Sintaxis de plantilla
Vue.js utiliza una sintaxis de plantilla basada en HTML, lo que permite a los desarrolladores vincular declarativamente el DOM a los datos de la instancia de Vue subyacente. Todas las plantillas de Vue.js son HTML legales, por lo que pueden ser analizadas por navegadores y analizadores HTML que siguen las especificaciones
En la implementación subyacente, Vue compila la plantilla en una función de representación DOM virtual. En combinación con el sistema de respuesta, Vue puede calcular de forma inteligente el número mínimo de componentes que deben volver a representarse y minimizar el número de operaciones DOM.
La salida de texto usando la sintaxis de Moustache ({{}} valor)
{{msg}} se reemplazará con el valor del atributo msg en los datos del objeto de datos (y el contenido en la interpolación cambiará a medida que cambie el mensaje)
Si está familiarizado con el DOM virtual y prefiere el poder original de JavaScript, también puede escribir una función de renderizado directamente sin usar plantillas, usando la sintaxis opcional JSX.
Instrucción
Las directivas son atributos especiales con el prefijo v-. Se espera que el valor del atributo de instrucción sea una única expresión de JavaScript (v-for es una excepción, lo discutiremos más adelante). La responsabilidad de la instrucción es actuar en el DOM de manera responsable cuando el valor de la expresión cambia
Para dar algunos ejemplos, la
salida html usa el
enlace de atributo v-html y v-bind
- Parámetro
Algunos comandos pueden recibir un "parámetro", indicado por dos puntos después del nombre del comando. Por ejemplo, el comando v-bind se puede usar para actualizar los atributos HTML de manera receptiva: por
ejemplo, v-bind puede vincular algunos atributos originales de la clase href para actualizar dinámicamente los atributos
v-on puede vincular eventos nativos, hacer clic en foco y similares El
comando de operación puede recibir el parámetro v-bind: v-on: puede tomar un parámetro
o incluso transportar un parámetro dinámico v-bind: [value] = "xxxx"
De hecho, para todos los enlaces de datos, Vue.js proporciona soporte completo de expresiones JavaScript
Podemos escribir la expresión js en {{}} Por supuesto, v-bind: id = "'value' + id"
Estas expresiones se analizarán como JavaScript en el ámbito de datos de la instancia de Vue a la que pertenecen. Una limitación es que cada enlace solo puede contener una sola expresión, no declaraciones y control de flujo
- Modificador
El modificador es un sufijo especial indicado por un punto y se utiliza para indicar que una instrucción debe estar vinculada de una manera especial. Por ejemplo, el modificador .prevent le dice a la directiva v-on que llame a event.preventDefault () en el evento desencadenado. PreventDefault
es cancelar el comportamiento predeterminado del navegador para el evento actual
. Por
ejemplo, si definimos el componente para usar este componente Para enlazar los eventos nativos del navegador (los eventos de enlace de componentes personalizados no son eventos nativos por defecto),
puede usar modificadores para resolver este problema
<comp v-on:click="handleClick"></comp> //自定义组件,这么写无效 无法绑定原生事件
<comp v-on:click.native="handleClick"></comp> //绑定了原生事件
- Abreviatura
Algunas instrucciones de uso frecuente les proporcionan abreviaturas abreviadas de
v-bind: abreviaturas v-on @
Atributos calculados
Aunque podemos usar expresiones dentro de la plantilla para calcular el valor {{}}
<div>
{{"这是测试"+message}}
</div>
Sin embargo, esto en realidad agrava la lógica de la capa de vista. Para reducir la lógica compleja, debe usar atributos calculados
Las expresiones en la plantilla son muy convenientes, pero están diseñadas para operaciones simples. Poner demasiada lógica en la plantilla hará que la plantilla sea demasiado pesada y difícil de mantener.
Por lo tanto, para cualquier lógica compleja, debe usar atributos calculados.
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
El atributo calculado depende del atributo común correspondiente, por lo que cuando el atributo común cambia, el atributo calculado se recalcula y se vuelve a mostrar en la página.
En el atributo calculado, puede establecer get. La función set función
get es similar a la definición del atributo calculado original. El valor calculado
y la función set pueden ayudarnos a actualizar propiedades comunes
<div id="app">
{{fullName}}
<p>{{firstName}}</p>
<p>{{lastName}}</p>
</div>
var vm=new Vue({
el:'#app',
data:{
firstName:"57",
lastName:"one",
},
computed:{
fullName:{
get:function() {
return this.firstName+" "+this.lastName;
},
set:function(value){
console.log("change");
var arr=value.split(" ");
this.firstName=arr[0];
this.lastName=arr[1];
}
}
}
})
Podemos cambiar el valor del atributo calculado fullName en la consola
y también cambiar los valores de firstName y lastName del atributo ordinario (es decir, se llama al método set del atributo calculado cuando se cambia el valor)
Atributo calculado de caché vs método
El método también puede lograr este efecto. Podemos llamar a la función en {{}} para mostrar el mismo efecto,
pero diferentes métodos siempre ejecutarán la función nuevamente cuando se vuelve a renderizar,
y el atributo calculado depende del atributo ordinario correspondiente. , Si estos atributos comunes no han cambiado, la función no se volverá a ejecutar (la función correspondiente al atributo calculado)