Vue实例中的template讲解(1)

//别忘了引包<body><div id="app-1">{{msg}}</div>================<div id="app-2">{{msg}}</div>=================<div id="app-3">{{msg}}</div><script>//在vue.js中，

会点php的前端小渣渣

5735人浏览 · 2021-11-04 14:57:58

会点php的前端小渣渣 · 2021-11-04 14:57:58 发布

<body>

    <div id="el">
    </div>
    <script type="text/x-template" id="demo-template">
      <div>
        <p>Selected: {{ selected }}</p>
        <select2 :options="options" v-model="selected">
          <option disabled value="0">Select one</option>
        </select2>
      </div>
    </script>

  <!--前后不分离  可以这样做   -->
    <script type="text/x-template" id="select2-template">
      <select>
        <slot></slot>
      </select>
    </script>

    <script>
    Vue.component('select2', {
      props: ['options', 'value'],
      template: '#select2-template',
      mounted: function () {},
      watch: {},
      destroyed: function () {}
    })

    var vm = new Vue({
      el: '#el',
      template: '#demo-template',
      data: {
        selected: 0,
      }
    })
    </script>
  </body>
</html>

先说下上面的：type="text/x-template"

1. script不写type默认是text/javascript，如果写了不被识别的type将被浏览器忽略。text/x-template或text/html可能只是为了语义而已~而且在有些编辑器还具有语法高亮的显示，type="text/diy"随便写也可以

2. script的type为各种template的时候，可能就是使用了模板引擎。

//别忘了引包
<body>
  <div id="app-1">
     {{msg}}
  </div>
  ================
  <div id="app-2">
     {{msg}}
  </div>
  =================
  <div id="app-3">
     {{msg}}
  </div>

  <script>
    //在vue.js中，可以使用template给元素添加模板，但是元素中只能有一个根元素，不能出现两个或两个以上的根同级元素。还可以在模板中绑定数据、表达式等。下面利用实例说明如何添加模板
    // 创建 Vue 实例，得到 ViewModel
    new Vue({
      el: '#app-1',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      }
    });
    //结论:如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素);
    //注意:template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
    new Vue({
      el: '#app-2',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      },
      template:'<div>这是template属性模板渲染</div>'
    });
    //render 
    new Vue({
      el: '#app-3',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      },
      template:'<div>这是template属性模板渲染</div>',
      render: function(createElement){
        return createElement('div', 
        // 参数2、这里相当于给标签加属性 例如：<div style='color:red,font-size: 14px'></div>
        {
　　　　　　 //给div绑定样式
　　　　　　 style:{
　　　　　　　　　width:'300px',
                height:'400px',
                color:'pink'
　　　　　　 },　
　　　　　　//给div绑定点击事件　　
            on: {
                click: () => {
                    console.log('点击事件')
                }
            }
        },
        // 参数3、参数中渲染的标签的子元素数组（可选） 
        // [
        //    // 文本节点直接写就可以
        //    'text'
        // ]
        '这是render属性方式渲染。'
        );
      }
    });
  </script>
</body>

render > template > el 属性优先性：
1.当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树。

2.当选项对象中没有render渲染函数时：Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树。

3.而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。

换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

Vue模版编译原理

vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所有需要将template转化成一个JavaScript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，就可以让视图跑起来了，这一个转化的过程，就成为模板编译。模板编译又分三个阶段，解析parse，优化optimize，生成generate，最终生成可执行函数render。