常见指令directive
(一)、插值指令
{{ key }}
v-text
v-html
v-bind
1、动态属性绑定
2、v-bind简写
3、class样式处理
1>对象语法 Truthy真值
2>数组语法
4、style样式处理
1>对象语法
2>数组语法
javascript表达式
(二)、流程控制指令
条件渲染
1、v-show
2、v-if
template标签上使用v-if
用 key 管理可复用的元素
3、v-show 和 v-if 的区别
列表渲染
1、数字循环
2、对象循环
3、数组循环
4、在 template标签上使用v-for
5、v-for 与 v-if 一同使用
6、状态维护
(三)、事件绑定v-on
监听事件
事件处理方法
内联处理器中的方法
事件修饰符
1、.stop
2、.prevent
3、.capture
键盘修饰符
1、.enter
2、.tab
3、.esc
4、.space
系统修饰符
1、.ctrl
2、.alt
3、.shift
4、.meta
5、.exact
双向绑定v-model
文本框
多行文本框
复选框
单选框
下拉选择框
修饰符
1、.lazy
2、.number
3、.trim
自定义指令
全局定义/局部定义
钩子函数
1、 bind
只调用一次,指令第一次绑定到元素时调用。
在这里可以进行一次性的初始化设置
2、 inserted
被绑定元素插入父节点时调用
仅保证父节点存在,但不一定已被插入文档中
3、 update
所在组件的 VNode 更新时调用
4、 componentUpdated
指令所在组件的 VNode 及其子 VNode 全部更新后调用
5、 unbind
只调用一次,指令与元素解绑时调用
钩子函数参数
生命周期lifetime
侦听器watch
在数据变化时执行异步或开销较大的操作时、可以采用 watch监听响应式数据
计算属性computed
计算属性的 setter
计算属性缓存 vs 方法
计算属性缓存 vs 侦听器
过滤器filter
组件component
组件定义
组件传值
父向子组件传值
子向父组件传值
其他组件间传值
动态组件
插槽
插槽内容
后备内容
具名插槽
作用域插槽
动态插槽名
独占默认插槽
边界处理
$root
$parent
$children
$refs
$slots
路由VueRouter
路由安装及定义
路由名称
动态路由
1、响应路由参数的变化
2、通配符*定义路由
3、404not found路由
4、高级匹配模式path-to-regexp
5、同一个路径可以匹配多个路由
匹配优先级谁先定义的,谁的优先级就最高
子路由
子路由的定义
子路由渲染
路由导航
声明式导航
编程式导航
$router 和 $route
重定向和别名
字符串
对象
函数
别名
命名视图
路由组件传参
布尔模式
对象模式
函数模式
路由模式
路由守卫
全局守卫
全局前置守卫
全局解析守卫
全局后置钩子
路由独享守卫
组件内守卫
导航解析流程
路由元数据meta
路由懒加载
常见问题
Vue中报错: Uncaught (in promise) Error:Redirected when going from “x“ to “x“ via a navigation guard
路由管理器中添加如下代码:
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}