La plantilla de sintaxis Vue

El núcleo Vue.js que permite el uso de una plantilla de sintaxis declarativa sencilla para representar datos en el sistema de DOM.

interpolación:

1. Texto: El enlace de datos es la forma más común de productos de doble uso apoyos de texto interpolación.

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

   Mediante el uso de la instrucción v-una vez, la interpolación puede realizarse de una sola vez, cuando cambian los datos, el contenido no se actualiza en la interpolación.

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

2. HTML original: llaves interpretarán los datos como texto sin formato en lugar de código HTML. Con el fin de emitir el HTML real, se requiere el uso de comandos v-html.

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

3. Atributo Attritube: el uso de los valores de atributo v-bind comando.

   Usando v-bind a la característica elemento (atributo) valor al pasar, Vue establece el valor como una expresión.

   <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. expresión de JavaScript: Para todos los datos de unión, Vue.js proporciona soporte completo expresión de JavaScript.

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

   Cada unión sólo puede contener una sola expresión, por lo que el siguiente ejemplo no tendrá efecto.

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

instrucción:

La instrucción es una propiedad especial con el prefijo V-.

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

v-si los valores de verdad de acuerdo con la instrucción de la expresión visto inserción / extracción de los elementos p.

parámetros:

Algunas instrucciones capaces de recibir un parámetro que representa dos puntos después del nombre de la instrucción.

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

href es un parámetro, el comando informar v-bind valor href atributo url de la expresión del elemento de encuadernación.

2.6.0 Desde el principio, el uso de corchetes en la expresión JavaScript como el parámetro dinámico de un comando. Se espera que los parámetros dinámicos para encontrar una cadena, el valor de cualquier otro tipo que no son cadenas se activará una advertencia.

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

attributeName se evaluará dinámicamente como una expresión JavaScript, el valor obtenido se utiliza como el argumento final.

Algunos caracteres, como espacios y citas en su nombre de atributo HTML es válido. Solución alternativa es utilizar una expresión sin espacios o comillas, o alternativamente calcula las propiedades de esta expresión compleja.

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

También hay que evitar el uso de caracteres en mayúsculas para nombrar el nombre de la clave, ya que el navegador forzar el nombre de la propiedad en minúsculas.

modificadores:

Los modificadores son períodos a. Especificado sufijo especial se debe utilizar para indicar una instrucción de una manera especial la unión.

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

abreviaturas:

Vue como v-bind, y v-en las dos instrucciones de uso más frecuente, ofrece se utilizan abreviaturas específicas:

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

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