携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天
七、条件渲染
1.条件渲染指令
1）v-if 与 v-else
2）v-show
2.比较 v-if 与 v-show
1）如果需要频繁切换 v-show 较好
2）当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
八、列表渲染
1.列表显示指令
1）遍历数组: v-for / index
2）遍历对象: v-for / key
九、过滤器
1.理解过滤器
1）功能: 对要显示的数据进行特定格式化后再显示
2）注意: 并没有改变原本的数据, 是产生新的对应的数据
十、内置指令与自定义指令
1.常用内置指令
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果为 true, 当前标签才会输出到页面
4）v-else: 如果为 false, 当前标签才会输出到页面
5）v-show : 通过控制 display 样式来控制显示/隐藏
6）v-for : 遍历数组/对象
7）v-on : 绑定事件监听, 一般简写为@
8）v-bind : 绑定解析表达式, 可以省略 v-bind
9）v-model : 双向数据绑定
10）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
2.自定义指令
1）注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2）注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
- 使用指令
v-my-directive='xxx'
十一、Vue 实例生命周期
1.vue 生命周期分析
- 初始化显示
beforeCreate()
created()
beforeMount()
mounted() - 更新状态: this.xxx = value
beforeUpdate()
updated()3) 销毁 vue 实例: vm.$destory()
beforeDestory()
destoryed()
2.常用的生命周期方法
1）mounted(): 发送 ajax 请求, 启动定时器等异步任务
2）beforeDestory(): 做收尾工作, 如: 清除定时器
十二、MVVM 模型
1.M：模型(Model) ：对应 data 中的数据
2.V：视图(View) ：模板
3.VM：视图模型(ViewModel) ： Vue 实例对象
