vue 基础知识总结

Vue 简介

vue的概念（即vue是什么）

vue是一套用户构建用户界面的前端框架

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

MVVM 指的是 Model、View 和 ViewModel

Model（模型）：由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。 

View（视图）：即用户界面。

ViewModel（视图模型）：用于链接匹配模型和视图的专用模型

Vue.js的核心思想 

 数据的双向绑定：View和Model之间不直接沟通，而是通过ViewModel这个桥梁进行交互 通过ViewModel这个桥梁，可实现View和Model之间的自动双向同步。当用户操作View时，ViewModel 会感知到View的变化，然后通知Model发生同步改变：反之，当Model发生改变时，ViewModel也 能感知到Model的变化，从而使View做出相应更新

 

Vue 的基本使用

基本使用步骤

导入 vue.js 的 script 脚本文件

在页面中声明一个将要被 vue 所控制的 DOM 区域

创建 vue 实例对象

vue 的指令

内容渲染指令

v-text：会覆盖元素内部原有的内容

v-html：不仅会覆盖原来的内容，而且可以把带有标签的字符串，渲染成真正的HTML内容

{{}}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容

 

属性绑定指令

v-bind：为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。

 

计算属性和侦听器

侦听器

作用：watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

 

方法格式的侦听器（watch:{……}）；

对象格式的侦听器 （watch（）{……}）；

 

计算机属性

我们在methods属性中设置的函数通常被称为“方法”， 用于实现对原始数据的加工，从而方便你在视图中使用加工后的数据。Vue.js除了“方法”之外， 还有很多其他的方式用于加工处理数据，比如说computed（计算属性）。

计算机的缓存特性

computed定义的属性在第一次访问时进行计算，以后再次访问时不再计算，而直接返回上次计算的结果。但是，如果计算属性的值依赖于响应式数据，那么当响应式数据发生变化的时候， 也会重新计算。 

而定义在mcthods中的方法每次调用时都会计算一次。

 

控制页面的css样式

 以对象方式绑定class属性

 以对象方式绑定class属性的基本语法是使用v-bind指令，并设定对象的属性名为class 属性的名称，值为true或false。如果值为true，那么表示class属性中将包括绑定的这个clas 属性的名称，否则就不包含这个class属性的名称。

将class属性与对象变量绑定 实际上，当使用对象语法绑定class属性的时候，不一定要使用内联方式， 也可以将class属性通 bind指令绑定到一个变量。

以对象方式绑定style属性 

v-bind:style 的对象语法看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 命名规范来命名

同绑定class属性一致，除了可以使用对象对style属性进行绑定之外，还可以利用数组的 定style属性。在数组中，每个元素的值是一个对象或变量名，代码如下： 

<divv-bind:style="[{键：值}， 变量名]"></div>

事件处理

事件与事件流

总体来说，浏览器产生事件流分为三个阶段。从最外层的根元素html开始依次向下，称为 捕获 设”到达目标元素时，称为“到达阶段”。

事件修饰符

.stop

stop 事件修饰符会自动调用stopPropagationO方法，从而阻止事件的继续传播。

下面在内层 div的事件绑定代码中加入.stop事件修饰符，再次运行这个页面，单击内层div，就只会弹出一次提示框了，这是因为.stop 事件修饰符阻止了事件的“冒泡”传播，因此外层div 就不会触发单击事件了

.self

self事件修饰符的作用是，仅当一个事件的目标（event.target）是当前元素自身时，才会触发处理 函数。也就是说，内部的子元素不会触发这个事件单击内层div也会触发外层div的事件。

.capture

capture事件修饰符的作用是改变事件流的默认处理方式，从默认的冒泡方式改为捕获方式

按键修饰符

1.与按键相关的三个事件

对于键盘的按键事件，我们需要先讲解一下相关的规范。按键事件由用户按下或释放键盘上的按

键触发，主要有keydown、keypress、keyup三个事件

keydown：按下键时触发。

keypress：按下有值的健时触发，而当按下Cri、Alt、Shif、Mcta 这样无值的健时，keypress事件不会触发。对于有值的键，按下时先触发keydown 事件，再触发keypress 事件。• keyup：松开键时触发。

如果用户一直按着某个键不松开，就会连续触发键盘事件，触发的顺序如下：

keydown→(keypress→ keydown)→…重复以上过程……→ keyup

因此，具体侦听哪个事件需要根据实际情况来确定，大多数情况下，侦听 keyup 事件是比较合适的

 

结构渲染

v-for中key属性的作业

当Vue.js 更新使用v-for渲染的列表时，默认使用“就地更新”的策略。如果数据项的顺序发生了改变，Vue，js不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置得到正确渲染。

v-for与v-if同时使用的注意事项

前面的条件谊染章节讲解了vif指令，需要注意的是，除非必要，否则不要将v-if和v-for 用在同

一个元素上。当它们处于同一节点时，v-for的优先级比v-if高，v-for 每次迭代时都会执行一次v-if.这会造成不必要的计算开销，影响性能