Tabla de contenido
2. Visualización de la lista vue (v-for)
Dos propiedades de enlace dinámico
2. Clase de enlace dinámico v-bind (sintaxis de objeto)
3. Combinación de v-bind y v-for
4 clases de enlace dinámico v-bind (uso de matriz)
5.v-bind estilo de enlace dinámico (sintaxis de objeto)
6.v-bind estilo de enlace dinámico (sintaxis de matriz)
1. Operación de interpolación
1.Sintaxis del bigote
Bigote significa barba, porque {
{}}es como una barba, también llamada sintaxis de llaves.
En el elemento dom montado por el objeto vue, {
{}}no solo se pueden escribir variables directamente, sino que también se pueden escribir expresiones simples.
<body>
<div id="app">
<h2>{
{message}}</h2>
<h2>{
{message}},world</h2>
<!-- Mustache的语法不仅可以直接写变量，还可以写简单表达式 -->
<h2>{
{firstName+'-'+lastName}}</h2>
<h2>{
{firstName}}-{
{lastName}}</h2>
<h2>{
{firstName+lastName}}</h2>
<h2>{
{count*2}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#app',
data(){
return{
message: 'hello',
firstName:'zhang',
lastName:'san',
count:2
}
}
})
</script>
</body>
2. Visualización de la lista vue (v-for)
Las matrices comúnmente utilizadas en desarrollo tienen una gran cantidad de datos, que deben mostrarse total o parcialmente. En JS nativo, debe usar el recorrido de bucle for para reemplazar los elementos div uno por uno. En Vue, puede usar el recorrido simple para generar nodos de elementos v-for.
<div id='app'>
<!-- <h2>{
{todolists}}</h2> -->
v-for="数组或对象中的每一个值 in/of 数组或对象本身"
<!-- <h2 v-for="item in todolists">{
{item}}</h2> -->
<!-- <h2 v-for="item of todolists">{
{item}}</h2> -->
<!-- <h2 v-for="item of obj">{
{item}}</h2> -->
<!-- <h2 v-for="item in obj">{
{item}}</h2> -->
<h2 v-for="item of obj2">{
{item.a}}{
{item.b}}{
{item.c}}</h2>
<!-- <h2 v-for="item in obj2">{
{item.a}}{
{item.b}}{
{item.c}}</h2> -->
<ul>
<li v-for="item of obj2">{
{item.a}}{
{item.b}}{
{item.c}}</li>
</ul>
<!-- 添加索引值 动态绑定key值，涉及diff算法 可以为index、id,
在将来的项目中写v-for是需要加上:key 它的值可以写索引,最好写数据中的id值-->
<h2 v-for="(item,index) in todolists" :key="index">{
{item}}--{
{index}}</h2>
<h2 v-for="item in obj2" :key="item.id">{
{item.a}}{
{item.b}}{
{item.c}}</h2>
<!-- diff算法 -->
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#app',
data() {
return {
todolists: ['篮球', '排球', '羽毛球', '足球'],
obj: {
a: '张三',
b: '李四',
c: '王五'
},
obj2: [{
id:1,
a: '张三'
}, {
id:2,
b: '李四'
}, {
id:3,
c: '王五'
}]
}
}
})
</script>
item representa el elemento atravesado actualmente e index representa el índice del elemento. Para darle a Vue una pista para que pueda rastrear la identidad de cada nodo para que pueda reutilizar y reordenar los elementos existentes, debe proporcionar una propiedad única para cada nodo. artículo key . v-for Se recomienda proporcionar tantos atributos como sea posible al usar key , a menos que atravesar el contenido DOM de salida sea muy simple o confiar deliberadamente en el comportamiento predeterminado para mejorar el rendimiento.
Debido a que es un mecanismo general para que Vue identifique nodos, key no está v-for vinculado específicamente a .
No utilice valores no primitivos como objetos o matrices
v-forcomokey. Utilice una cadena o un valor numérico.
3. Contador de casos de Vue
Use vue para implementar un pequeño contador, haga clic en
+el botón, el contador +1, use-el botón contador -1.
Defina el objeto vue e inicialice una variable count=0
Defina dos métodos
addysubpara count++ o count--Defina dos objetos de botón y agregue un evento de clic al botón
En el objeto Vue, los métodos se utilizan para representar la colección de métodos y las palabras clave utilizadas se utilizan para vincular elementos para escuchar eventos de clic, vincular eventos de clic a botones y vincular funciones de devolución de llamada y
v-on:clickdesencadenar eventos . Las expresiones también se pueden utilizar directamente en métodos de devolución de llamada. Por ejemplo: y .addsubcount++count--
<body>
<div id="app">
<!-- <button type="button" v-on:click="add">+</button>
<h3>{
{count}}</h3>
<button type="button" v-on:click="sub">-</button> -->
<!-- 简写 v-on:click 简写 @click-->
<button type="button" @click="add">+</button>
<h3>{
{count}}</h3>
<button type="button" @click="sum">-</button>
</div>
<script>
/* 点击事件
v-on 监听事件
*/
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: { //以后所有的vue中的方法都可以写在methods里面
/* add:function(){
// console.log('add');
this.count++;
},
sub:function(){
// console.log('sub');
this.count--;
} */
add() {
/* console.log(this); */
this.count++;
},
sub() {
this.count--;
}
}
})
</script>
</body> 
4. Comando común v-once
v-once significa que el elemento DOM solo se representa una vez y, después de que los datos cambian, no se volverá a representar.
<body>
<div id="app">
<h2>{
{msg}}</h2>
<!-- 只会渲染一次，数据改变不会再次渲染 -->
<h2 v-once>{
{msg}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#app',
data(){
return {
msg:'我就是这么倔强'
}
}
})
</script>
</body>
Después de modificar el {
{msg}}mensaje anterior, los datos de la primera etiqueta h2 cambiarán automáticamente, pero el segundo h2 no.
5. Comando común v-html
En algún momento, no queremos generar directamente <a href='http://www.baidu.com'>百度一下</a>dicha cadena, sino generar un hipervínculo convertido por el propio html. En este punto puedes usar v-html.
<div id="app">
<h2 v-html="url"></h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
url:"<a href='http://www.baidu.com'>百度一下</a>"
}
}
})
</script>
6. Comando común v-text
V-text sobrescribirá los datos en el elemento dom, lo que equivale al método internalHTML de js.
<div id="app">
<h2>不使用v-text</h2>
<h2>{
{message}}，啧啧啧</h2>
<h2>使用v-text，以文本形式显示,会覆盖</h2>
<h2 v-text="message">，啧啧啧</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>Como se muestra en la figura, el uso {
{message}}es unir variables y cadenas, pero usar v-text para cubrir directamente el contenido de la cadena.
7. Comando común v-pre
A veces esperamos generar {
{msg}}dicha cadena directamente, en lugar del {
{}}valor variable de msg transformado por la sintaxis, en este momento podemos usar v-preetiquetas.
<div id="app">
<h2>不使用v-pre</h2>
<h2>{
{msg}}</h2>
<h2>使用v-pre,不会解析</h2>
<h2 v-pre>{
{msg}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
msg:'我比v-once还要厉害'
}
}
})
</script>Como se muestra en la figura, el dom decorado con v-pre generará directamente la cadena.
8. Comando común v-cloak
A veces, debido a problemas de retraso en la carga, por ejemplo, la tarjeta se cae y los datos no se actualizan a tiempo, lo que hace que la visualización de la página cambie {
{message}}de la variable de mensaje "Hola". Un cambio tan parpadeante provocará una mala experiencia del usuario. . Esta etiqueta debe usarse en este momento v-cloak. Antes del análisis de vue, existe v-cloakesta etiqueta en el atributo div y, una vez completado el análisis de vue, se elimina la etiqueta v-cloak. Simple, similar a un div que comienza con un atributo css display:none;, una vez completada la carga, el atributo css se convierte en display:blocky se muestra el elemento.
<head>
<meta charset="utf-8" />
<title>v-cloak指令的使用</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{
{msg}}</h2>
</div>
<script>
//在vue解析前，div中有一个属性cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(() => {
const vm = new Vue({
el: '#app',
data() {
return {
msg: '你好啊'
}
}
})
}, 1000)
</script>
</body>Aquí, el estado de carga atascada se simula retrasando 1 segundo. Como resultado, el valor del mensaje no se muestra al principio y hay un atributo v-cloak en el elemento div. Después de 1 segundo, el valor Se muestra la variable de mensaje y el elemento v-cloak en div se reemplaza por remove.
Dos propiedades de enlace dinámico
1. comando v-bind
A veces no queremos poner variables en el contenido de la etiqueta, por ejemplo, <h2>{
{msg}}</h2>para encerrar la etiqueta h2 variable, similar al HTML interno de js. Pero esperamos srcescribir la variable en la siguiente posición. Si queremos <img src="src" alt="">importar la imagen de esta manera, queremos obtener dinámicamente el enlace de la imagen. En este momento, el src no es una variable sino una cadena src. Si Si desea que sea efectivo como variable, necesita usar una etiqueta, v-bind:como esta <img v-bind:src="src" alt="">, y la sintaxis de Moustache no se puede usar aquí; de manera similar <img v-bind:src="{
{src}}" alt="">, esto también es incorrecto.
<div id="app">
<!-- 错误的做法这里不能使用Mustache语法 -->
<!-- <img v-bind:src="{
{src}}" alt=""> -->
<!-- 正确的做法使用v-bind指令 -->
<img v-bind:src="src" alt="">
<a v-bind:href="url"></a>
<img :src="src" />
<img :src="url" />
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
src:'https://cn.bing.com/thid=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
url:'img/6.png'
}
}
})
</script>2. Clase de enlace dinámico v-bind (sintaxis de objeto)
A veces esperamos vincular dinámicamente la clase del nodo del elemento Dom y elegir si el Dom tiene un atributo de clase específico. Por ejemplo, agregue a la etiqueta h2 class="active", cuando el elemento Dom tenga esta clase, se volverá rojo <style>.active{color:red;}</style>, escriba un evento de enlace de botón, haga clic para volverse negro, haga clic nuevamente para volverse rojo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind动态绑定class(对象语法)</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 class="active">{
{message}}</h2>
<h2 :class="active">{
{message}}</h2> -->
<!-- 动态绑定class对象用法 -->
<!-- <h2 :class="{key1:value1,key2:value2}">{
{message}}</h2>
<h2 :class="{类名1:true,类名2:boolean}">{
{message}}</h2> -->
<h2 class="title" :class="{active:isActive}">{
{message}}</h2>
<h2 class="title" :class="getClasses()">{
{message}}</h2>
<button @click="change">点击变色</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
active:"active",
isActive:true
},
methods: {
change(){
this.isActive = !this.isActive
},
getClasses(){
return {active:this.isActive}
}
},
})
</script>
</body>
</html>Defina dos variables activey isActive, utilizadas en el elemento Dom , vinculadas en este momento , isActive es verdadero, visualización activa, defina el cambio de método () vinculado al botón, haga clic en el botón , controle si el elemento Dom tiene atributos.:class={active:isActive}class='active'this.isActive = !this.isActiveclass='active'
3. Combinación de v-bind y v-for
Utilice v-for y v-bind para implementar una pequeña demostración, mostrar la lista de películas y, cuando haga clic en una determinada lista de películas, la lista de películas se volverá roja.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active {
color: #f00;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- <li v-for="(item,index) in movies" :key="index" :class="{active:currentIndex==index}" @click="change(index)">{
{item}}</li> -->
<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="change(index)">{
{item}}</li><!-- 动态绑定三元表达式 -->
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
currentIndex: 0,
movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
}
},
methods: {
change(i) {
/* this.currentIndex = i */
if (this.currentIndex == i) return
this.currentIndex = i
}
}
})
</script>
</body>
</html>
El índice de v-for, evento de enlace, haga clic en el evento para cada fila, haga clic en la fila para obtener el índice de esta fila y asígnelo, use currentIndexla v-bind:clase de enlace, cuando index===currentIndexel elemento Dom tiene una clase activa, el color se vuelve rojo.
4 clases de enlace dinámico v-bind (uso de matriz)
Se puede colocar una matriz en el atributo de clase, que a su vez se analizará en la clase correspondiente.
<div id="app">
<h2 :class="['active','aaa']">我们正在学习vue</h2>
<h2 :class="[active,aaa]">我们正在学习vue</h2>
<h2 :class="getStyle()">我们正在学习vue</h2>
</div>
<script>
/* 数组中加引号和不加引号有区别
加引号:表示字符串 是固定的,
不加引号:表示变量是不固定的 */
const vm = new Vue({
el: '#app',
data() {
return {
active: 'isactive',
aaa: 'bbb'
}
},
methods: {
getStyle() {
return [this.active, this.aaa]
}
}
})
</script>
5.v-bind estilo de enlace dinámico (sintaxis de objeto)
<div id="app">
<!-- <h2 :style="{key(属性名):value(属性值)}">{
{message}}</h2> -->
<!-- 加单引号，当成字符串解析 -->
<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
<!-- 不加单引号，变量解析 -->
<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
fontsize:40+'px'
}
},
methods:{
getStyle(){
return {fontSize:this.fontsize}
}
}
})
</script>
6.v-bind estilo de enlace dinámico (sintaxis de matriz)
<div id="app">
<h2 :style="[baseStyle]">我们爱学习</h2>
<h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
baseStyle:{background:'#f00'}
}
},
methods:{
getStyle(){
return [this.baseStyle]
}
}
})
</script>
Similar a la clase vinculante, el estilo de vinculación es el mismo.