Vue系列知识-vue基础知识

绝地灬酷狼 2023-10-06 19:34 1阅读 0赞

一.Vue的定义  
Vue（vju:）是一套用于构建用户界面的渐进式框架。  
每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue(\{  
// 选项  
\})  
二.Vue模板语法有两大类

1.  差值语法：  
    功能：用于解析标签体内容  
    写法：\{ \{xxx\}\}，xxx是js表达式，且可以直接读取到data中的所有属性
2.  指令语法  
    功能：用于解析标签(包括：标签属性，标签体内容，绑定事件…).  
    举例：v-bind:href或简写为 :href=“xxx”,xxx同样要写js表达式。且可以直接读取到data中的所有属性。

三.MVVM模型  
3.1. M:模型(model):对应data中的数据  
3.2. V:视图(View):模板  
3.3. VM:视图模型(ViewModel):Vue实例模型对象

![MVVM模型][MVVM]  
四. 数据代理  
4.1 Vue中的数据代理：  
通过Vm对象来代理data对象中属性的操作(读/写)  
4.2 Vue中数据代理的好处：  
更加方便的操作data中的数据  
4.3 基本原理  
通过object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter.在getter/setter内部都去操作(读/写)data中对应的属性。

五. 事件处理  
事件的基本使用：  
5.1 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名  
5.2 事件的回调需要配置在methods对象中，最终会在vm上；  
5.3 methods中配置的函数。不要用箭头函数！否则this就不是vm了。  
5.4 methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件的实例对象；  
5.5 @click="demo"和@click="demo($event)"效果一致，但后者可以传参。

六. 事件修饰符  
Vue中的事件修饰符：  
6.1 prevent：阻止默认事件(常用)  
6.2 stop：阻止事件冒泡(常用)  
6.3 once：事件只触发一次(常用)  
6.4 capture：使用事件的捕获模式  
6.5 self：只有event.target是当前操作的元素时才触发  
6.6 passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

七. 键盘事件  
7.1 Vue中常用的按键别名：  
回车 =>enter  
删除 =>delete（捕获"删除"和"退格"键）  
退出 => esc  
空格 => space  
换行 =>tab（特殊，必须配合keydown去使用）  
上 => up  
下 => down  
左 => left  
右 => right

八. 计算属性  
8.1 定义：要用的属性不存在，要通过已有属性计算得来。  
8.2 语法：  
computed: \{  
// 计算属性的 getter  
xxx:\{  
get () \{  
// `this` 指向 vm 实例  
return \*\*\*  
\}  
\}  
\}  
当只有get方法时可以简写为：  
computed: \{  
// 计算属性的 getter  
xxx()\{  
// `this` 指向 vm 实例  
return \*\*\*  
\}  
\}

8.3 原理：底层借助了Object.defineproperty方法提供getter和setter  
8.4 get函数什么时候执行？  
（1）初次读取时会执行一次  
（2）当依赖的数据发生改变时会被再次调用  
8.5 优势：我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

8.6 备注：  
（1）计算属性最终会出现在vm上，直接读取使用即可。  
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

[MVVM]: https://img-blog.csdnimg.cn/466918d979164ceb82ac0df22ff9ecf1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Iqx5p6c5rC06I6y,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center