快捷導(dǎo)航

vue?注釋template中組件的屬性說明

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

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

注釋template中組件屬性

想注釋一個組件的屬性，一直報錯

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

因為項目中引入了eslint-plugin-vue，對template有默認(rèn)檢測，因此就直接修改.eslintrc.js文件

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

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

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

你得打開Vscode的配置文件

Ctrl+Shift+P ，輸入open workspace settings

再搜索 vetur.validation.template

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

在這里插入圖片描述

實例中的template講解

代碼

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

調(diào)試圖片

在這里插入圖片描述

原理說明圖片

在這里插入圖片描述

終極結(jié)論

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

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

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

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

您可能感興趣的文章: