复习-vue指令

内容渲染指令：
插值表达式 {{}} 可以求值的式子，写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（）{
 
 }
}