快捷導(dǎo)航

vue?注釋template中組件的屬性說(shuō)明

更新時(shí)間：2022年04月13日 08:41:30 作者：南鄉(xiāng)人

這篇文章主要介紹了vue?注釋template中組件的屬性說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

注釋template中組件屬性

想注釋一個(gè)組件的屬性，一直報(bào)錯(cuò)

[vue/no-parsing-error] Parsing error: unexpected-character-in-attribute-name

因?yàn)轫?xiàng)目中引入了eslint-plugin-vue，對(duì)template有默認(rèn)檢測(cè)，因此就直接修改.eslintrc.js文件

 "unexpected-character-in-attribute-name": false,

發(fā)現(xiàn)也沒(méi)啥用.

最后一番查找發(fā)現(xiàn)，這個(gè)插件是修改了VsCode的默認(rèn)配置

你得打開Vscode的配置文件

Ctrl+Shift+P ，輸入open workspace settings

再搜索 vetur.validation.template

把這玩意給設(shè)置成false就成(取消勾選項(xiàng))

在這里插入圖片描述

實(shí)例中的template講解

代碼

//別忘了引包
<body>
  <div id="app-1">
     {{msg}}
  </div>
  ================
  <div id="app-2">
     {{msg}}
  </div>
  =================
  <div id="app-3">
     {{msg}}
  </div>
  <script>
    //在vue.js中，可以使用template給元素添加模板，但是元素中只能有一個(gè)根元素，不能出現(xiàn)兩個(gè)或兩個(gè)以上的根同級(jí)元素。還可以在模板中綁定數(shù)據(jù)、表達(dá)式等。下面利用實(shí)例說(shuō)明如何添加模板
    // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    new Vue({
      el: '#app-1',
      data: {
         msg:'這是通過(guò)el屬性獲取掛載元素的outerHTML方式渲染' 
      }
    });
    //結(jié)論:如果vue實(shí)例中有template屬性，會(huì)將該屬性值進(jìn)行編譯，將編譯后的虛擬dom直接替換掉vue實(shí)例綁定的元素（即el綁定的那個(gè)元素);
    //注意:template屬性中的dom結(jié)構(gòu)只能有一個(gè)根元素，如果有多個(gè)根元素需要使用v-if、v-else、v-else-if設(shè)置成只顯示其中一個(gè)根元素；
    new Vue({
      el: '#app-2',
      data: {
         msg:'這是通過(guò)el屬性獲取掛載元素的outerHTML方式渲染' 
      },
      template:'<div>這是template屬性模板渲染</div>'
    });
    //render 
    new Vue({
      el: '#app-3',
      data: {
         msg:'這是通過(guò)el屬性獲取掛載元素的outerHTML方式渲染' 
      },
      template:'<div>這是template屬性模板渲染</div>',
      render: function(createElement){
        return createElement('div', 
        // 參數(shù)2、這里相當(dāng)于給標(biāo)簽加屬性 例如：<div style='color:red,font-size: 14px'></div>
        {
　　　　　　 //給div綁定樣式
　　　　　　 style:{
　　　　　　　　　width:'300px',
                height:'400px',
                color:'pink'
　　　　　　 },　
　　　　　　//給div綁定點(diǎn)擊事件　　
            on: {
                click: () => {
                    console.log('點(diǎn)擊事件')
                }
            }
        },
        // 參數(shù)3、參數(shù)中渲染的標(biāo)簽的子元素?cái)?shù)組（可選） 
        // [
        //    // 文本節(jié)點(diǎn)直接寫就可以
        //    'text'
        // ]
        '這是render屬性方式渲染。'
        );
      }
    });
  </script>
</body>

調(diào)試圖片

在這里插入圖片描述

原理說(shuō)明圖片

在這里插入圖片描述

終極結(jié)論

el，template，render屬性優(yōu)先性

當(dāng)Vue選項(xiàng)對(duì)象中有render渲染函數(shù)時(shí)，Vue構(gòu)造函數(shù)將直接使用渲染函數(shù)渲染DOM樹，當(dāng)選項(xiàng)對(duì)象中沒(méi)有render渲染函數(shù)時(shí)，Vue構(gòu)造函數(shù)首先通過(guò)將template模板編譯生成渲染函數(shù)，然后再渲染DOM樹，而當(dāng)Vue選項(xiàng)對(duì)象中既沒(méi)有render渲染函數(shù)，也沒(méi)有template模板時(shí)，會(huì)通過(guò)el屬性獲取掛載元素的outerHTML來(lái)作為模板，并編譯生成渲染函數(shù)。

換言之，在進(jìn)行DOM樹的渲染時(shí)，render渲染函數(shù)的優(yōu)先級(jí)最高，template次之且需編譯成渲染函數(shù)，而掛載點(diǎn)el屬性對(duì)應(yīng)的元素若存在，則在前兩者均不存在時(shí)，其outerHTML才會(huì)用于編譯與渲染。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: