The template syntax Vue

The core Vue.js that allows the use of a simple declarative syntax template to render data into the DOM system.

Interpolation:

1. Text: Data binding is the most common form of dual-use text braces interpolation.

   <div id="app">
     <p>{{ message }}</p>
   </div>
   

   By using the v-once instruction, the interpolation can be performed at one time, when the data changes, the content is not updated at the interpolation.

   <span v-once>这个将不会改变: {{ msg }}</span>
   

2. Original HTML: curly brackets will interpret the data as plain text rather than HTML code. In order to output the real HTML, it requires the use of v-html commands.

   <div id="app">
       <div v-html="message"></div>
   </div>
       
   <script>
   new Vue({
     el: '#app',
     data: {
       message: '<h1>菜鸟教程</h1>'
     }
   })
   </script>
   

3. Attribute Attritube: using the attribute values ​​v-bind command.

   Using v-bind to the element characteristic (attribute) value when passing, Vue sets the value as an expression.

   <div id="app">
       <pre><a v-bind:href="url">菜鸟教程</a></pre>
   </div>
       
   <script>
   new Vue({
     el: '#app',
     data: {
       url: 'http://www.runoob.com'
     }
   })
   </script>
   

4. JavaScript expression: For all of the data binding, Vue.js provides full support JavaScript expression.

   <div id="app"> 
       {{ message.split('').reverse().join('') }}
       <div v-bind:id="'list-' + id">菜鸟教程</div>
   </div>
   

   Each binding can only contain a single expression, so the following example will not take effect.

   //这是语句，不是表达式
   {{ var a = 1 }}
   //控制流也不会生效，可以使用三元运算符代替
   {{ if (ok) { return message } }}
   

instruction:

Instruction is a special property with v- prefix.

<p v-if="seen">现在你看到我了</p>

v-if truth values ​​according to the instruction of the expression seen to insert / remove the p elements.

parameter:

Some instructions capable of receiving a parameter representing a colon after the instruction name.

<a v-bind:href="url">...</a>

href is a parameter, the command informing v-bind value href url attribute of the expression of the binding element.

2.6.0 From the start, using square brackets in JavaScript expression as the dynamic parameter of a command. Dynamic parameters are expected to find a string, the value of any other non-string types are will trigger a warning.

<a v-bind:[attributeName]="url"> ... </a>

attributeName will be dynamically evaluated as a JavaScript expression, the value obtained will be used as the final argument.

Some characters, such as spaces and quotes in your HTML attribute name is invalid. Workaround is to use an expression without spaces or quotation marks, or alternatively calculates the properties of this complex expression.

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

Also you need to avoid the use of uppercase characters to name the key name, because the browser will force the property name all lowercase.

Modifiers:

Modifiers are periods to. Specified special suffix should be used to indicate an instruction in a special way binding.

//告诉v-on指令对于触发的submit事件调用event.preventDefault()；
<form v-on:submit.prevent="onSubmit">...</form>

abbreviation:

Vue as v-bind, and v-on the two most frequently used instructions, provides specific abbreviations are used:

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>