Directorio de artículos
1. Interpolación de texto
1.1 Sintaxis del bigote (llaves dobles { {}})
La forma más común de vinculación de datos. HTMLCuando se analiza el documento, Vue Mustachereemplazará automáticamente el nombre del atributo en la etiqueta con el propertyvalor del atributo ( ) en el objeto de datos correspondiente . Siempre que propertycambie el valor del atributo ( ) en el objeto de datos , se actualizará el contenido en el punto de interpolación.
<div id="app">
<div>{
{
msg}}</div>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello world!"
}
})
1.2 texto v
La etiqueta no se reconocerá y se mostrará como texto normal, en comparación con las v-htmlinstrucciones de la siguiente sección .
<div id="app">
<div>{
{
msg}}</div>
<div v-text='msg'></div>
<div v-text='html'></div>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello world!",
html:`<h1>这是一个HTML代码片段</h1>`
}
})
1.3 v-una vez
Cargue solo una vez, cuando los datos cambien, el contenido de la interpolación no se actualizará. Mira la demostración de la animación:
<div id="app">
<div>{
{
msg}}</div>
<div v-text='msg'></div>
<div v-text='html'></div>
<div v-once>{
{
msg}}</div>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello world!",
html:`<h1>这是一个HTML代码片段</h1>`
}
})
2. Fragmento HTML
El v-textcomando anterior HTMLmostrará el fragmento como texto normal. Para insertar el HTMLfragmento , debe usar el v-htmlcomando, que puede reconocer la HTMLetiqueta.
<div id="app">
<div v-text='html'></div>
<div v-html='html'></div>
</div>
let vm = new Vue({
el:"#app",
data:{
html:`<h1>这是一个HTML代码片段</h1>`
}
})
3. Atributo
3.1 instrucción v-bind
Cada HTMLetiqueta puede tener class, id, styley otros atributos básicos, sino también nuestra relativamente alta frecuencia de funcionamiento. En Vue, v-bindimplementamos el enlace de propiedad a través de instrucciones.
El método de escritura específico es :, un ejemplo v-bind:属性="表达式"simple id:
<div v-bind:id="app"></div>
Especialmente para classy style, Vue.js ha realizado mejoras especiales. Además de las cadenas, el tipo de resultado de expresión también puede ser un objeto o una matriz.
3.2 enlace de clase
Los elementos operativos de classla lista y el estilo en línea son una demanda común para el enlace de datos. Para classel enlace del nombre de la clase , a menudo esperamos que se pueda cambiar dinámicamente. La forma más sencilla de escribirlo es:
<div id="app">
<div v-bind:class="{title:isTitle,import:isImport}">重点标题</div>
</div>
let vm = new Vue({
el:'#app',
data:{
isTitle:true,
isImport:true
}
})
title, importQue los dos nombres de clase surtan efecto depende de datalas variables en isTitley respectivamente isImport. El nombre de la clase se puede agregar dinámicamente controlando el valor booleano de la variable.
Cuando classhay muchos nombres de clases que deben cambiarse dinámicamente en la lista, Vue admite la encapsulación en un objeto para usar:
<div id="app">
<div v-bind:class="classObject">重点标题</div>
</div>
let vm = new Vue({
el:'#app',
data:{
classObject:{
title:true,
import:true
}
}
})
El resultado de la renderización es el mismo que antes. Incluso admite varios classobjetos de este tipo para formar una matriz:
<div id="app">
<div v-bind:class="[classObject,errorClass]">重点标题</div>
</div>
let vm = new Vue({
el:'#app',
data:{
classObject:{
title:true,
import:true
},
errorClass:{
errorText:true
}
}
})
3.3 encuadernación de estilo
El método de vinculación del atributo de estilo de etiqueta es el mismo que el del nombre de la clase y también admite la forma de objeto o matriz. Cabe señalar que el método de escritura aquí es muy similar al atributo de estilo CSS, pero aquí debe usar camelCase (camelCase —— fontSize) o separación de guiones (kebab-case, recuerde encerrarlo entre comillas—— "font-size") para nombrar:
<div id="app">
<div v-bind:style='{color:textColor,fontSize: fontSize + "px"}'>一级目录</div>
</div>
let vm = new Vue({
el:'#app',
data:{
textColor:'red',
fontSize:28
}
})
La operación más común es enlazar directamente a un objeto de estilo:
<div class="app">
<div v-bind:style='{color:textColor,fontSize: fontSize + "px"}'>一级目录</div>
<div v-bind:style='firstTitle'>二级目录</div>
</div>
let vm = new Vue({
el:'#app',
data:{
textColor:'red',
fontSize:28,
firstTitle:{
color:"gray",
fontSize:"24px"
}
}
})
También puede agregar varios objetos de estilo a una matriz:
<div class="app">
<div v-bind:style='{color:textColor,fontSize: fontSize + "px"}'>一级目录</div>
<div :style='firstTitle'>二级目录</div>
<div :style='[firstTitle,secondTitle]'>三级目录</div>
</div>
new Vue({
el:'.app',
data:{
textColor:'red',
fontSize:28,
firstTitle:{
color:"#333",
fontSize:"24px"
},
secondTitle :{
color:"gray",
fontSize:"18px"
}
}
})
4. Expresiones JavaScript simples
Siempre hemos representado ciertos valores de atributos directamente entre llaves dobles y, por supuesto, también admitimos JavaScriptexpresiones simples . Como operaciones numéricas, operadores ternarios o métodos API simples:
{
{
number + 1 }}
{
{
ok ? 'YES' : 'NO' }}
{
{
message.split('').reverse().join('') }}
No importa cuán complejo sea el código, como declaraciones if-else, etc .:
{
{
if (true) {
return message } }}