Abstract:
Directive is an important feature in Vue.js. It mainly provides a mechanism to map data changes to DOM behavior. What changes in data are mapped to DOM behaviors? Vue.js is driven by data, so we will not directly modify the DOM structure, and there will be no similar $('ul').append('
Vue’s built-in instructions
1. v-bindv-bind It is mainly used to bind DOM element attributes (attributes).
That is, the actual value of the element attribute is provided by the data attribute in the vm instance.
For example:
Vue的指令 {{message}}
v-bind can be abbreviated as ":",
The above example can be abbreviated as
The implementation effect is as follows:
Bind event listener , abbreviated as @.
We also used it yesterday, let’s abbreviate it to see the effect
Vue的指令 {{message}}
The effect is as follows:
##3.v- html
v-html, the parameter type is string,
is used to update innerHTML,acceptedstring
will not be compiled Wait for the operation,The code is as followsVue的指令
The effect is as follows
For more built-in instructions, please check the official website: Vue.js instructions
template
html template
DOM-based templates, templates are all available Parse valid htmlInterpolationText: Use "Mustache" syntax (double curly brackets) {{value}}Function: Replace the attribute value on the instance,When the value changes, the interpolated content will automatically updateNative html: double curly braces output text and will not parse htmlAttributes: use v-bind Binding can respond to changesUse JavaScript
Expression: You can write simple expressionsString template
template string
-- Attribute of template option object’ s ’ ’ s ’ s ’ s through through ’s ’ using ’s ’ using ’s ’ through through ’s through through ’s' ’ ‐ to ‐‐‐‐‐‐mn to Content hanging from the element will be ignored.The code is as follows
template模板
There can only be one root node
template模板 vue
Writing in script tags is still relatively limited.
Let’s use a piece of code to demonstrate
render函数
The above is the detailed content of Discussion on components and templates in Vue.js. For more information, please follow other related articles on the PHP Chinese website!