3-1
MVP模式
MVVM模式
组件化开发:把页面拆分成不同的区域,每一个区域就是一个组件,分组件开发可以把一个页面的布局和逻辑进行拆分,利于维护
3-2 选项:Dom
el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
template:一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
3-3 Vue的模板语法
X值表达式 {
{}}v-text ='a' el.innerText = a
v-html ='b' el.innerHtml = b
这三个语法中都可以写JS表达式
3-4 计算属性,方法与侦听器
computed 具有缓存的概念 ,只有依赖的值发生了改变才会重新计算
methods 可以在模板语法表达式中 直接调用来获取数据
watch 与computed都具有缓存的机制,但需要将所有变化的数据都进行监听,优先使用computed,性能更好
3-5 计算属性的 getter 和 setter
3-6 Vue中的样式绑定
在dom上动态绑定class 或者style,然后在data中声明class或者 style的值 ,值可以通过数组和对象的方式进行绑定
3-7 Vue中的条件渲染
v-if dom节点是否被移除 v-else 、v-else-if需要配合 v-if一起用
v-show 页面元素消失时 display = none 频繁切换时 性能更好 不会把dom节点去除
给一个元素标签加入key值,vue通过diff算法发现key值不同时,不会去复用这个元素
3-8 Vue中的列表渲染
v-for循环时 key值最好唯一
遍历数组
1 Vue中 操作数组的7个变异方法可以使得数据改变 视图响应
pop、 push 、shift、 unshift 、sort、 reverse、 splice
2 也可以让数组对应的数据data指向一个新的引用地址
template模板占位符 ,可以用于包裹循环的dom,但是template不会出现在dom结构中
遍历对象
也可以让对象对应的数据data指向一个新的引用地址
3-9 Vue中的set方法
改变数组或者对象数据 页面随之改变的方法
对象
Vue.set(obj,key,value) 实例上 vm.$set(obj,key,value)
数组
Vue.set(arr,index,value) 实例 vm.$set(arr,index,value)
4-1 使用组件的细节点
is 用于标签上出现BUG的情况,将当前标签元素替换为组件
ref
在html标签上 获取的是该dom节点
在组件上 获取到子组件的引用
4-2 父子组件间的数据传递
Vue中采用的是单向数据流,子组件不能直接改变父组件传下来的数据,这样会影响别的子组件引用这个数据,必须克隆一份,修改克隆以后的数据
父组件通过props给子组件传值,子组件通过$emit给父组件传递事件和参数
4-3 组件参数校验与非 props 特性
校验字符串:
校验数字或字符串 :
校验多种条件 :
自定义校验器:
4-4 给组件绑定原生事件
可以给HTML标签直接绑定原生事件,在组件上绑定的事件是自定义事件,如果需要直接给组件绑定原生事件,需要在事件后加上native修饰符
4-5 非父子组件间的传值
1 VUEX
2 总线机制/发布订阅模式/Bus/观察者模式
4-6 在Vue中使用插槽
子组件里面声明插槽 ,父组件传递插槽内容
4-7 作用域插槽
当子组件作循环时,它的dom结构应该由外部传进来决定时
4-8 动态组件与 v-once 指令
v-once 在第一次创建组件以后可以将组件缓存到内存中 , 当切换到别的组件再切换回来时不需要重新创建这个组件,当静态组件切换显示隐藏时可以使用,这样可以提升性能
5-1 Vue动画 - Vue中CSS动画原理
显示时的动画周期
隐藏时的动画周期
5-2 在Vue中使用 animate.css 库
5-3 在Vue中同时使用过渡和动画
在transition上加上 appear-active-class=‘animated swing’自定义类名 并且写上appear属性来调用,type 属性决定 动画和过渡时间效果时间以过渡为主, :duaration自定义 过渡时间
5-4 Vue中的 Js 动画与 Velocity.js 的结合
在transition标签上 自定义事件
@before-enter 动画开始前 @enter 动画开始后 处理函数 function(el,done) 最后需要调用done()才能进入 after-enter事件 @after-enter 动画结束后
Velocity.js JS动画
下载velocity.js 可以配置动画效果 持续时间 以及结束后的done回调
5-5 Vue中多个元素或组件的过渡
需要给transition中包裹的元素 加上不同的key ,因为vue中元素显示切换时默认缓存
组件进行切换时可以使用动态组件component 通过:is=‘type’ type值为子组件的name
5-6 Vue中的列表过渡
用 transition-group 包裹需要循环的列表元素 循环时的key最好不要用index,用数据中唯一的id更好