vue?注釋template中組件的屬性說明
注釋template中組件屬性
想注釋一個組件的屬性，一直報錯
[vue/no-parsing-error] Parsing error: unexpected-character-in-attribute-name
因為項目中引入了eslint-plugin-vue，對template有默認檢測，因此就直接修改.eslintrc.js文件
"unexpected-character-in-attribute-name": false,
發(fā)現(xiàn)也沒啥用.
最后一番查找發(fā)現(xiàn)，這個插件是修改了VsCode的默認配置
你得打開Vscode的配置文件
Ctrl+Shift+P ，輸入open workspace settings
再搜索 vetur.validation.template
把這玩意給設置成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ù)、表達式等。下面利用實例說明如何添加模板
// 創(chuàng)建 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',
// 參數(shù)2、這里相當于給標簽加屬性 例如：<div style='color:red,font-size: 14px'></div>
{
//給div綁定樣式
style:{
width:'300px',
height:'400px',
color:'pink'
},
//給div綁定點擊事件
on: {
click: () => {
console.log('點擊事件')
}
}
},
// 參數(shù)3、參數(shù)中渲染的標簽的子元素數(shù)組（可選）
// [
// // 文本節(jié)點直接寫就可以
// 'text'
// ]
'這是render屬性方式渲染。'
);
}
});
</script>
</body>
調試圖片
原理說明圖片
終極結論
el，template，render屬性優(yōu)先性
當Vue選項對象中有render渲染函數(shù)時，Vue構造函數(shù)將直接使用渲染函數(shù)渲染DOM樹，當選項對象中沒有render渲染函數(shù)時，Vue構造函數(shù)首先通過將template模板編譯生成渲染函數(shù)，然后再渲染DOM樹，而當Vue選項對象中既沒有render渲染函數(shù)，也沒有template模板時，會通過el屬性獲取掛載元素的outerHTML來作為模板，并編譯生成渲染函數(shù)。
換言之，在進行DOM樹的渲染時，render渲染函數(shù)的優(yōu)先級最高，template次之且需編譯成渲染函數(shù)，而掛載點el屬性對應的元素若存在，則在前兩者均不存在時，其outerHTML才會用于編譯與渲染。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue路由跳轉到新頁面實現(xiàn)置頂問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇element-ui 設置菜單欄展開的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue proxyTable的跨域中pathRewrite配置方式
這篇文章主要介紹了vue proxyTable的跨域中pathRewrite配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
登錄功能對于前端剛入門不久的同學來說較為困難,下面這篇文章主要給大家介紹了關于Vue登錄功能實現(xiàn)(含封裝axios)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關于vue實現(xiàn)簡易計算器的4種方法,文中通過代碼介紹的非常詳細,對大家學習或者使用vue覺有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
關于vue利用postcss-pxtorem進行移動端適配的問題
這篇文章主要介紹了關于vue利用postcss-pxtorem進行移動端適配的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要為大家介紹了Vitepress的文檔渲染基礎教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10