Shulou(Shulou.com)05/31 Report--

This article mainly explains the "vue comments template components of the attribute error report how to solve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "vue annotation template components of the attribute error report how to solve" it!

Note component properties in template

If you want to annotate the properties of a component, you keep reporting errors.

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

Because eslint-plugin-vue is introduced into the project, there is a default detection for template, so the .eslintrc.js file is modified directly.

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

It's no use finding out.

The last search found that the plug-in modified the default configuration of VsCode.

You need to open Vscode's configuration file.

Ctrl+Shift+P, enter open workspace settings

Search vetur.validation.template again

Just set this thing to false (uncheck)

Template explanation in an example

Code

/ / Don't forget the bootstrap {{msg}} = {{msg}} = {{msg}} / / in vue.js, you can use template to add templates to elements, but there can be only one root element in the element, and there cannot be two or more root siblings. You can also bind data, expressions, and so on in templates. The following example shows how to add a template / / create a Vue instance to get the ViewModel new Vue ({el:'# app-1', data: {msg:', which is the outerHTML rendering of the mounted element obtained through the el attribute'}}) / / conclusion: if there is a template attribute in the vue instance, the attribute value will be compiled, and the compiled virtual dom will directly replace the element bound by the vue instance (that is, the element bound by el). / / Note: the dom structure in the template attribute can only have one root element. If there are multiple root elements, use v-if, v-else, and v-else-if to display only one of the root elements. New Vue ({el:'# app-2', data: {msg:' this is the outerHTML rendering of the mounted element obtained through the el attribute'}, template:' this is the template attribute template rendering'}) / / render new Vue ({el:'# app-3', data: {msg:' this is the outerHTML rendering of the mounted element obtained through the el attribute'}, template:' this is the template attribute template rendering', render: function (createElement) {return createElement ('div') / / Parameter 2. This is equivalent to adding an attribute to the tag, for example: {/ / bind div style style: {width:'300px', height:'400px', color:'pink'} / / bind click event to div on: {click: () = > {console.log ('click event')} / / Parameter 3. The sub-element array of the rendered tag in the parameter (optional) / / [/ text node can be directly written to / / 'text' / /]' this is rendered by the render attribute.' );}}); debug the picture

Principle picture

Ultimate conclusion

El,template,render attribute priority

When there is a render render function in the Vue option object, the Vue constructor will directly use the render function to render the DOM tree. When there is no render render function in the option object, the Vue constructor first compiles the template template to generate the render function, and then renders the DOM tree. When there is neither render render function nor template template in the Vue option object, it will use the el attribute to obtain the outerHTML of the mounted element as the template And compile and generate the rendering function.

In other words, when rendering a DOM tree, the render rendering function has the highest priority, followed by template and needs to be compiled into a rendering function. If the element corresponding to the el attribute of the mount point exists, its outerHTML will be used for compilation and rendering only when the first two do not exist.

Thank you for your reading, the above is the "vue comments template components of the property error report how to solve" the content, after the study of this article, I believe you on the vue annotation template components of the property error report how to solve this problem has a more profound experience, the specific use of the need for everyone to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.