2.1、moustache** 闪烁问题
v-text 识别文本 innerText
v-html 识别文本+标签 innerHTML
案例:~~ 计数器~~
2.2、v-for 循环**
数组 对象 数字 字符串
案例:~~文件标题目录~~
2.3、v-show**
v-if v-else-if v-else
案例:~~ 猜数字游戏 ~~
2.4、v-on**
语法糖 @
$event解释
案例:~~ 显示隐藏 ~~
ref的引出
2.5、综合案例**
登录注册切换
key的引出
2.6、v-bind**
语法糖 :
a href=""
动态属性class的解释
字符串
数组 【变量1,变量2】
对象 {active:true,b:false}
动态属性style的解释
字符串
数组 【变量1,变量2】
对象 {active:true,b:false}
案例: ~~ tab切换核心 高亮显示核心 ~~
2.7、v-model 结合表单使用**
1、结合input
案例:~~ todoList add-del~~
-2、 结合radio
案例: ~~ 选男选女~~
3、结合checkbox
@change @click比较
案例: ~~ 全选反选~~
4、v-model的原理
:value =“msg”
@input=“change()” this.msg=ev.target.value
2.8、v-slot v-pre v-cloak v-once
参照官网了解即可
2.9、综合案例 购物车
涉及知识点:
filters 过滤器 管道符
computed 计算属性 算总价 全选反选
watch 实现模糊搜索 生命周期钩子函数
2.10、修饰符
事件修饰符
按键修饰符
系统修饰符
表单修饰符
sync
native
2.11、生命周期(钩子函数8+2=10个)
https://cn.vuejs.org/v2/guide/instance.htm
3、组件
3.1、组件的介绍和特点
模块 组件对比的介绍
展示型组件
功能型组件
全局组件
局部组件
3.2、组件的使用
1、定义组件
2、注册组件
3、使用组件
3.3、组件传参
1、父传子 自定义属性
App.vue 父组件 :list=“list”
list.vue 子组件 props:[“list”]
2、子传父 自定义事件
list.vue 子组件 @click=“change” this.$emit(发射事件名change,传递所需参数)
App.vue 父组件 @change=“change”
3 兄弟/隔代 组件传参 EventBus 了解
count.vue 孙子组件 this.b u s . bus.bus.emit(发射事件add,type,index)
App.vue 父组件 this.b u s . bus.bus.on(“add”,(type,index)=>{this.add()})
4 动态组件
component :is=“nowComponent”’
keep-alive
补充剩下的生命周期
activated
deactivated
5 transition动画
6 递归组件
多级菜单
树形菜单