内容渲染指令:
插值表达式 {{}} 可以求值的式子,写js代码
v-html 当渲染的数据包含HTML标签,此时就用v-html
属性绑定指令:
v-bind简写:
v-bin:属性名="表达式"
事件绑定指令:
v-on:事件名="处理函数"
简写 @事件名="处理函数"
定义函数在methods用this访问data里的数据
修饰符:
事件修饰符: .prevent阻止默认行为, .stop阻止冒泡
按键修饰符:@keyup.enter监听用户是否按下enter键
双向数据绑定:
v-mode
v-mode.number:转换数字
v-mode.trim:自动过滤用户输入的首尾空白字符
v-mode.laze:懒更新
vue特性:
数据驱动视图:data数据变化时,导致页面结构重新渲染 好处:减少DOM操作 注意:是单向的数据绑定
双向数据绑定:data数据变化时,导致页面结构重新渲染,表单数据变化时,会自动更新data
条件渲染指令:
v-if(){}v-else-if(){}else
v-if:会动态创建和移除DOM,频繁使用会更消耗性能,没有初始值性能好
v-show :会添加或移除样式 display:'none',频繁使用性能好,没有初始值性能较差
v-for列表渲染指令
使用到v-for必须添加 :key属性防止紊乱 key的值必须是number或string 不要把索引当key
完整:v-for='(item,i) in 数组'
简写:v-for='item in 数组'
如何判断v-for加给那个元素,想循环渲染DOM元素,就给它加v-for
过滤器:
| 表示调用过滤器处理函数
<h1>{{username | suffix}}</h1>
一定要在 new Vue之前生命过滤器
vue.filter('suffix',(str)=>{
return str + '~'
})
函数替代过滤器
<h1>{{test(username )}}</h1>
methods:{
test(str){
return str + '~'
}
}
watch侦听器
函数格式侦听器首次进入不触发
watch :{
要侦听的数据(新值,旧值){
}
}
对象格式
watch :{
handler(新值,旧值){
}
用来控制一进入页面就触发一次侦听器
immediate:true
深度侦听,侦听对象里的某一个值 新值与旧值都是新值vue里面的bug 指向同一个内存
deep:true
}
计算属性
computed:{
计算属性定义时是function函数,使用时是当普通属性使用,必须有返回值
total(){
}
}