Prefacio
Vue.js es una biblioteca de interfaz web basada en datos. Vue.js se enfoca solo en las capas de vista y se puede integrar fácilmente con otras bibliotecas. El código es de solo 24 kb después de la compresión.
El siguiente código es el ejemplo más simple de Vue.js. Cuando el contenido en la entrada cambia, el contenido del nodo P cambiará en consecuencia.
<
Sintaxis básica de Vue.js
Insertar texto
<span> mensaje: {{text}} </span>Insertar texto en formato HTML y mostrarlo en formato HTML en la página
<span> mensaje: {{{html}}} </span>El contenido no sigue los cambios en los datos
<span> mensaje: {{ * text}} </span>Vincula los datos en las propiedades
<div id = "item-{{id}}"> </div>Usando expresiones JS en {{}}
{{número + 1}} {{OK? 'Sí': 'no'}} {{Message.split (''). Inverso (). Join ('')}}Usando declaraciones JS en {{}}
{{var a = 1}} {{if (ok) {Mensaje de retorno}}}if comando
<p v- if = "saludo"> ¡Hola! </p> Aquí la directiva V-if eliminará/insertará el elemento <p> de acuerdo con la autenticidad del valor de saludo de expresión.
directiva href
<a v-bind: href = "url"> </a> o <a href = "{{url}}"> </a>Haga clic en el comando
<a v-on: click = "dosomething">
Ingrese el comando
<input v-Model = "NewTodo" V-on: keyUp.enter = "addTodo">
Abreviatura
unión a V
<!-Complete Syntax-> <a v-bind: href = "url"> </a> <!-abreviation-> <a: href = "url"> </a> <!-Complete sintaxis-> <botón v-bind: desactivado = "somedynamiccondition"> botón </boton> <!-abreviation-> <botte: desactived = "somedynamiccondition" button "
vituano
<
Resumir
Las expresiones en las plantillas son muy convenientes, pero en realidad solo se usan para operaciones simples. La plantilla es describir la estructura de la vista. Poner demasiada lógica en una plantilla puede hacer que la plantilla sea demasiado pesada y difícil de mantener. Es por eso que Vue.js restringe las expresiones vinculantes a una expresión. Si se requiere más de una expresión, se deben usar propiedades calculadas. El editor actualizará cómo usar los atributos calculados más adelante. Amigos interesados, continúe prestando atención a Wulin.com.