欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue是怎么渲染template內(nèi)的標簽內(nèi)容的

 更新時間：2020年06月05日 10:35:12   作者：Vam的金豆之路  
這篇文章主要介紹了Vue是怎么渲染template內(nèi)的標簽內(nèi)容的，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

我們在使用Vue做項目時，都會用到腳手架，相應的我們會在template寫標簽內(nèi)容。那么你知道為什么會在template寫標簽嗎？這當中經(jīng)過了怎樣的處理呢？

<template>
 <div id="app">
  <div id="nav">
  </div>
  <router-view/>
 </div>
</template>

<style lang="less">

</style>

其實Vue在處理template時，是經(jīng)過這樣處理的，它是通過內(nèi)置的render方法處理我們輸入的標簽，生成VNodes。下面我注釋了template內(nèi)的代碼，你可以先看下效果，然后注釋掉render方法內(nèi)的內(nèi)容，取消注釋template。看下前后效果是否一樣。

<!DOCTYPE html>
<html>
<head>
 <title>render</title>
</head>
<style type="text/css">
 #text{
 font-weight: bold;
 font-size: 26px;
 }
</style>
<body>
 <div id="app">
 
 </div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script type="text/javascript">
 const vm = new Vue({
 el:'#app',
 data: {
      text: 'hello world',
      style1: {
      width: '200px',
      height: '200px',
      border: '1px solid red'
      },
      style2: {
      textAlign: 'center'
      },
      colorText: {
      color:'blue'
      }
    },
   //  template:`<div :style='style1'>
   //  <p :style='style2'>
   //    <span :style='colorText' @click='cli()' id='text'>{{text}}</span>
   //  </p>
   //  </div>`,
   //  methods:{
   // cli(){
   // alert(1)
   // }
  //  },
  render(createElement) {
    return createElement('div', {
      style: this.style1
    }, [
      createElement('p', {
        style: this.style2
      }, [createElement('span', {
        style: this.colorText,
        attrs:{
          id:'text'
        },
        on:{
          click:()=>{
            alert(1)
          }
        }
      }, this.text)])
    ])
  }
 })
</script>
</html>

 到此這篇關(guān)于Vue是怎么渲染template內(nèi)的標簽內(nèi)容的的文章就介紹到這了,更多相關(guān)Vue渲染template內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論