一:常见的指令:
v-if/v-else-if/v-else: 判断元素是否应该被渲染
v-show: 判断元素是否被隐藏(元素被隐藏后仍然存在, 但是页面看不到)
v-bind: 为元素绑定特性, 可简写, 如v-bind: class写为:class
v-on: 监听dom事件, 可简写, 如v-on:click简写为@click
v-for: 可用于遍历循环数组
v-html: 将文本当作html解析
v-text: 展示文本
v-model: 表单或组件实现数据双向绑定
二:通信方式:
(1), props/@emit 实现父子通信
(2), $children/$parent 直接调用子/父组件实例, 不推荐
(3), bus.js的$emit/$on方法 兄弟组件通信
(4), vuex 针对整个项目的数据存储, 每个组件都能访问到数据 官网教程: https://vuex.vuejs.org/zh/
(5), $attrs/$listeners 多级组件嵌套通信
(6), provide/inject 隔代组件通信, 较少用到
三:常用的生命周期:
created: 数据实例初始化之后, 可用来异步请求并初始化页面数据
mounted: DOM已生成并且挂载到对应节点上, 可用来访问dom实例
beforeDestroy: 组件即将被销毁, 可用来发移除定时器/监听器
四:常用的重点的api:
(1), data: 存储组件的数据
(2), computed 计算属性, 基于响应式原理实现自动获取最新值
(3), watch 监听器, 监测到特定值变化时可触发回调, 常用来执行开销较大的操作
(4), filter过滤器, 将数据进行处理展示在页面上(原数据并没有改变)
(5), props 接受来自父组件的数据
(6), methods 存放组件函数
(7), mixin 混入通用的方法, 达到复用的目的
(8), vue-router 路由 单页面应用中利用不同路由展示不同的页面 官网教程: https://router.vuejs.org/zh/
(9), vue-cli 配置 对webpack进行封装, 可快速搭建项目
(10), components: 引入的组件
关于上面的一些常见用法的区别:
1,v-if 和v-show 的区别:
官方给出的答案:
2,computed和watch的区别:
computed擅长处理的事情:一个数据依赖于多个数据
watch擅长处理的事情:多个数据依赖一个数据
computed缓存计算结果,再重复的调用中,只要依赖数据不变,就直接取缓存中的计算结果
watch 可能在每次的计算结果都是一样的,算是重复计算
3,vue的单向数据流
所有的prop都使其父子prop之间形成一个单向下行绑定,这个值可是数字 布尔值 数组 对象,
即:父级prop的更新会向下流动到子组件中,但是反过来则不行,如果强行修改变量值,则会发出警告. 这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流难以理解.
但这里的单向数据流却有一个限制, 就是所传的变量必须是基本数据类型,数字,布尔,字符串, 而数组和对象则是双向绑定,在子组件中修改了父组件传进来的一个数组,同时会作用到父组件上,从而影响父组件的状态.
4,v-on的解释:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
v-on事件修饰符:
- .stop 阻止冒泡。本质是调用event.stopPropagation()
- .prevent 阻止默认事件(默认行为)。本质是调用 event.preventDefault()。
- .capture 添加事件监听器时,使用捕获的方式(也就是说,事件采用捕获的方式,而不是采用冒泡的方式)。
- .self 只有当事件在该元素本身(比如不是子元素)触发时,才会触发回调。
- .once 事件只触发一次。
- .{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时,才触发回调。
- .native 监听组件根元素的原生事件。