vue会根据不同的指令,针对不同的标签实现不同的功能。指令是带有 v-
前缀的特殊标签属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
8、v-for:基于数据循环,多次渲染整个元素(数组、对象、数字等),v-for = "(item--每一项, index--下标) in 数组" key = "唯一标识" ,若不需要下标,可使用 v-for = "item in 数组",key是给列表添加的唯一标识,只能是唯一的字符串或数字,便于vue进行列表项的正确排序及复用;
<ul><li v-for="(item, index) in list" :key="index">{{ item }} - {{ index }}</li>
</ul>data: {list: ['西瓜', '苹果', '鸭梨', '榴莲']
}
9、v-model:给表单元素使用, 实现双向数据绑定,可以快速获取或设置表单元素内容,v-model = '变量;
账户:<input type="text" v-model="username"> <br><br>
密码:<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>data: {username: '',password: ''
},methods: {login () {console.log(this.username, this.password)},
}
- .lazy- 监听
change
事件而不是input
- .number- 将输入的合法字符串转为数字
- .trim- 移除输入内容两端空格
10、v-slot:声明具名插槽或是期望接收 props 的作用域插槽;
11、v-pre:跳过该元素及其所有子元素的编译;
12、v-once:仅渲染元素和组件一次,并跳过之后的更新;