Vue框架的使用
基本使用
常考:
- Vue组件如何通讯
- 描述组件渲染和更新的过程
- 双向数据绑定v-model的实现原理
知识点:
-
模板(插值,指令)
-
computer和watch
- computed 适合多个数据变化影响一个数据
- watch 适合一个数据的变动影响多个数据或者复杂的运算
注意:watch监听引用类型,拿不到oldVal;
注意事项
1.watcher 初始化是不执行的,如果想初始化就执行的话可以配置immediate属性
2.一般情况不要直接修改computed的值,会报错,一般通过为computed属性自定义set方法,通过改变依赖变量来改变computed的值
3.computed的属性如果不加入在dom中渲染是不会被加入到响应系统的。所以如果只是数据的变动的监控,不映射到dom上,请使用watcher或者其他方法。
4.watcher和computed 属性定义的函数不能使用箭头函数,否则内部this会指向组件的父环境,比如window,导致调用失败。
————————————————
版权声明:本文为CSDN博主「圣者为王」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_41275295/article/details/100999927 -
class和style
-
条件,循环,事件,表单
v-if和v-show的区别和使用场景
- 频繁切换用v-show[display:none]
event参数,自定义参数,事件修饰符,按键修饰符
-
组件
-
生命周期
-
props和$emit(类型和默认值)
-
v-on和$emit
-
自定义事件-组件内通讯 - [ o n , on, on,off]
import Vue from 'vue'
export default new Vue();
高级特性 - 不常用,但体现深度
- 自定义v-direction, 自定义v-model
- $nextTick, $refs
- slot
- 动态、异步组件
- keep-alive
- mixin
常考:
- 自定义组件v-model
<input type="text" :value="text" @input="$emit('change', $event.target.value)"/>
export default {
model: {
prop: 'text', // 对应 props text
event: 'change'
},
props