(1), interpolation: Displays the model data on the View layer, (2), the binding expression: executes the JS command on the view layer. (3), instructions: Perform the Write function on the view layer. (4), abbreviation: V-bind binding attribute v-on The template that binds the event Vue.js is based on the DOM. This means that all vue.js templates are resolvable and valid HTML and are enhanced by some special features. Vue.js is thus fundamentally different from string-based templates. 1, mustache syntax double curly brace Syntax;<span>{{data}}</span> two-way binding;<span>{{*data}}</span> Single binding: Modify Model, view does not change; 2, three curly braces and two braces: three curly braces are: The resulting string, if it is HTML syntax will be parsed into HTML tags, etc., two curly braces are: The resulting string is parsed only as a string.
2. Content is inserted in an HTML string, and data binding is ignored. If you need to reuse a module fragment, you should use partial. Partial is the vue.js built-in label Vue.partial (' name matches the partial name attribute of the view layer ', ' template directive this template instead of something ') 2.12.2
Partial dynamically gets the name through the input box, enters ID1 to embed the ID1 content, and loads the message1 data. 2.3
3, {{}} can also be used in the HTML attribute (the value of the property) attributes. <div id= "Item-{{id}" ></div>;
4. Binding expressions in Vue.js a binding expression is composed of a simple JavaScript expression and an optional filter or filters. But only one expression is allowed.
5. Filter Vue.js Run add an optional "filter" after the expression, as indicated by the pipe symbol. {{message | capitalize}} initial uppercase {{money | currency ' ￥ '}} format currency filter can concatenate {{message | filtera | filterb}} can also pass in parameter {{message | The filter ' Arg1 ' arg2}} Filters function always takes the value of the expression as the first argument, the quoted parameter as a string, and the unquoted parameter as the expression. Here, the string ' arg1 ' is passed to the filter as the second argument, and the value of the expression arg2 is calculated as the third argument. 6. Custom Filters
A message is the first parameter. Before the second parameter. After the third parameter. 7, the instruction format is the V-directive name = "JS expression" directive is special with the prefix v-character. The value of the directive is limited to the binding expression, so the JavaScript expressions and filter rules mentioned above are also used here. The duty of an instruction is to apply certain special behaviors to the DOM when the value of its expression changes. <p v-if= "Greeting" >hello!</p> here the v-if instruction according to the expression greeting worth the true or false delete/insert <p> element.
8, instruction-parameters some directives can be preceded by a "parameter" (argument), separated by a colon. For example, the V-bind directive is used to respond to an updated HTML attribute: <a v-bind:href= "url" ></a> same as <a href= "{{}url}" > </a> here href is the parameter, He tells the V-bind directive to bind the href attribute of an element to the value of the expression URL. You may have noticed that the same result can be obtained with the attribute interpolation href= "{{URL}}", in fact the interpolation of intrinsic attributes is converted to V-bind: binding. v-on instruction for the identification of DOM events: <a v-on:click= "Dosomthing" > here the parameter is the name of the event being monitored.
9, abbreviation when building a single page application, Vue.js will manage all the modules, so the V-prefix is less important. V-bind<a v-bind:href= "url" ></a><a:href= "url" ></a><button v-bind:disabled= "someThing" >button</button><button:d isabled= "someThing" >Button</button> v-on<a v-on:click= "Do" > </a><a @click = "Do" ></a>
Vue.js Fourth Lesson
