Vue总结2020.7.31
前言：
基于vue 2.X 写一份知识总结，可以说是学习笔记
目录
- 一、vue实例的基本结构
- 二、vue事件处理、绑定属性
- 三、vue指令、自定义指令
- 四、vue过滤器
- 五、vue数据监听
- 六、vue组件
- 七、vue-router
一、vue实例的基本结构
一、Vue 实例的基本结构
Vue官网API
{{msg}}
Welcome
var vm = new Vue({
el: '#app', //等价于后面的 .$mount('#app') 用其中之一就可以了
render: h => h(App), //理解不够深入，参考（https://cn.vuejs.org/v2/api/?#render）
data: {
//页面响应的数据都放在这里如上（组件只接受 function 且必须返回一个对象），zhicvm.$data 访问这里面的data
msg: 'Welcome',
},
props:{
//props 可以是数组或对象，接收任何值
},
methods: {
//页面或组件定义的方法的集合，可通过 vm.reset() 直接调用
reset: function(){
this.msg = '这是重新设置之后的数据'
}
},
computed: {
//计算属性(computed)与方法(methods) 类似，如果计算数据量比较大，建议放到这里
//计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
//参考（https://cn.vuejs.org/v2/api/?#computed）
},
components：{
// 局部组件注册的地方
'component-a': ComponentA,
'component-b': ComponentB
},
directives: {
// 局部指令注册的地方
focus: {
// 指令的定义
inserted: function (el,binding) {
el.focus();
}
}
},
filters:{
// 局部过滤器注册的地方
},
//生命周期钩子
beforeCreate: function (){}, //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created: function (){},//在实例创建完成后被立即调用。
beforeMount: function (){},//在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted: function (){},//el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate: function (){},//数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated: function (){},//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy: function (){},//实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed: function (){
//Vue 实例销毁后调用。
//调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
},
}).$mount('#app')
二、vue事件处理、绑定属性
二、Vue 事件处理、绑定属性
v-on：
1、绑定事件监听器。用在普通元素上时，只能监听原生 DOM 事件（如：click、keyup/down、mouseenter/over/move/down/out 等）。也可以监听自定义事件即 methods 里面的事件。
2、在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click=“handle(‘ok’, $event)”。
修饰符：
.stop - 调用 event.stopPropagation()。阻止冒泡
.prevent - 调用 event.preventDefault()。阻止默认事件
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
用法：
v-on 还提供了按键修饰符
键盘按钮的别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
// 可以通过全局 config.keyCodes 对象自定义按键修饰符别名
// 使用 方式 v-on:keyup.f1 ，f1 这个名字你可以任意取，你知道是什么意思就可以了
Vue.config.keyCodes.f1 = 112
v-bind：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
![]()
![]()
![]()
三、vue指令、自定义指令
三、Vue 指令、自定义指令
Vue指令：
v-text：
{{msg}}
v-html：
//输出真正的 HTML
data{
html:'我是真正的html'
}
v-show：
//根据表达式之真假值，切换元素的 display CSS 属性。
Hello!
v-if、v-if-else、v-else：
//v-if 是“真正”的条件渲染，如果条件为假，dom不会渲染在页面当中
//v-show 会一直渲染在dom当中
//当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
Yes
Yes
No
A
B
C
Not A/B/C
v-for：
//基于源数据多次渲染元素或模板块。
{{ item.text }}
//另外也可以为数组索引指定别名 (或者用于对象的键)：val->对象的键值 key->对象的键 index->对象的下标
v-model：作用于、