vue 注释template中组件的属性说明

目录

• 注释template中组件属性
• 实例中的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,

发现也没啥用.

最后一番查找发现，这个插件是修改了VsCode的默认配置

你得打开Vscode的配置文件

Ctrl+Shift+P ，输入open workspace settings

再搜索 vetur.validation.template

把这玩意给设置成false就成(取消勾选项)

实例中的template讲解

代码

//别忘了引包

  

     {{msg}}
  
  ================
  

     {{msg}}
  
  =================
  

     {{msg}}
  
  

调试图片

原理说明图片

终极结论

el，template，render属性优先性

当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。