Vue 基础知识点的总结

Web前端开发概述

MVVM (Model-View-ViewModel）模式包括3个核心部分
Model(模型): 由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。
View(视图): 即用户界面。
ViewModel(视图模型): 用于链接匹配模型和视图的专用模型。

数据的双向绑定：

命令行控制台：

dir：显示一个目录中的文件列表

cd：进入一个目录

md：创建一个目录

安装Vue.js:

所谓CDN，是指内容分发网络。通过构建分布式的内容分发网络，用户可以就近获取所需内容，这样可以提高用户访问的响应速度和命中率。

Vue.js开发基础

Vue.js 遵循 MVVM模式，因此使用Vue.js的亥心工作就是创建一个“视图模型”(ViewModel)对象，并将它作为“视图’(View)和业务“模型”(Model)之间的桥梁。Vue.js 的做法是提供Vue类型，开发者可通通过创建一个Vue类型的实例来实现视图模型的定义。

Vue根实例

方法属性：

使用模板字符串的另一个优点是，可以跨行，直接妾产生多行文本;而普通字符串不能跨行，如果要定义多行字符串，那么必须通过将多个单行字符串拼接才能能获得。
统

属性绑定：

v-bind 指令有一种简写形式，即省略“v-bind”，ī而只保留想要绑定的属性前面的冒号。例如，下面的代码就使用了v-bind指令的简写形式。
<ul :class="sex">
  <li>姓名 : {{ name }}</li>    
  <li>城市 : {{ city }}</li>    
</ul>

插入HTML片段：

如果插入的不是单纯的文本内容，而是带有HTML结构，就要改用v-html指令了

Vue实例的的生命周期：

beforeCreate(): 在实例创建之前调用，
created(): 在实例创建之后调用，此时尚未开始DOM 编编译 beforeMount():在挂载开始之前调用。
mounted(): 在实例被挂载后调用，这时页面的相关DO M节点已被新创建的 vm.$el 替换。它相当于JavaScript中的window.onload()方法。
beforeUpdate(): 每次页面中有元素需要更新时，在更新前就会调用beforeUpdate()钩子函数。 updated(): 每次页面中有元素需要更新时，在更新完之后就会调用updated()钩子函数。 beforeDestroy(): 在销毁实例前调用，此时实例仍然有交效。

destroyed():在实例被销毁之后调用。

计算属性与侦听器

计算属性：

        计算属性其实分为setter和getter两个属性

        顾名思义setter是设置值，getter是获取值。

        在正常使用计算属性的时候默认是只有getter，不需要额外定义。

        但是我们可以在需要的时候设置setter，用在属性更新时触发。

        在vue中我们通常使用get和set来定义getter和setter

计算属性的缓存特性：

必须有return,只求结果,有级存。

第一次调用计算属性时,会产生一个结果,这个结果会被缓存起来,后面每次用这个属性都是从缓存里取。

当它的依赖项发生改变,会重新计算得到一个结果,再缓存起来。

对数组进行侦听：

当通过下列方法操作或更改数组时，变化可以被侦听到。这些方法包括:

• push()   尾部添加    
• pop()    尾部删除    
• unshift()    头部添加    
• shift()    头部删除    
• splice()    删除、添加、替换    
• sort()    排序    
• reverse()    逆序

事件处理

事与事件流：

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

【事件】

JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作

使得网页具备互动性。

常见的有加载事件、鼠标事件。

【件流】

由于DOM是一个树结构,如果在父子节点绑定事件时候，当触发子节点的时候，

就存在一个顺序问题，这就涉及到了事件流。

页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

【js的事件流三阶段】

事件捕捉阶段(capture phrase): 事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;

处于目标阶段(target phrase): 处于绑定事件的元素上;

事件冒泡阶段(bubbling phrase): 事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素

(事件捕获是从上到下，而事件冒泡，是从下到上。)

事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。

【事件冒泡】

微软提出了名为事件冒泡(event bubbling)的事件流。

事件冒泡可以形象的比喻成把一颗石头投入水中，泡泡会一直从水底冒出水面。

也就是说,事件会从最内层的元素开始发生，一直向上传播,直到document对象。

因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是

button-div-body-html-document。

【事件捕获】

网景提出另一种事件流名为事件捕获(event capturing)

与事件冒泡相反，事件会从最外层开始发生，直到具体的元素。

因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document

事件修饰符：

.stop

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

.self

.self事件修饰符的作用是，仅当一个事件的|    目标(event.target)是当前元素自身时，才会触发处理函数。

.capture

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

.once

.once事件修饰符的含义是只触发一次事件。

.prevent

.prevent    
在添加了.prevent 事件修饰符以后，程序就会会自动调用event.preventDefault(方法，从而取消事件触发的默认行为。

按键修饰符：

与按键相关的三个事件：

• keydown:按下键时触发。
• keypress:按下有值的键时触发，而当按下Ctrl、Alt、 Shift、Meta 这样无值的键时，keypress事件不会触发。对于有值的键，按下时先触发keydown事件，再触发keypress 事件。
• keyup: 松开键时触发。

表单绑定

文本框：

文本框对应HTML的input元素，将 type 设置为text，然后使用v-model指令即可将文本框与数据模型中指定的属性绑定起来

修饰符：

.lazy

对于文本输入框，默认情况下，v-model指令在每次input 事件触发后，都会对文本输入框的值与数据进行同步

.number

如果希望用户输入的值能够自动转为数值类型，那么可以给v-model指令添加.number修饰符

.trim

如果要自动过滤用户输入的首尾空白字符

结构渲染

用 key属性管理可复用的元素：

Vue.js会尽可能高效地渲染元素，并且通常会复用已有元素而不是重新构造DOM结构

总结如下：

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件侦听器被销毁重建。
• v-if是“惰性”的，即如果在进行初始渲染时条件为假，则不会渲染，直到条件第一次变为时，才开始渲染相应的DOM 结构。
• v-show相对简单，不管初始条件是什么，元素总是会被渲染，并且还会基于CSS的display 属性进行切换。
• 通常，v-if的切换开销更大，而v-show 的衤初始渲染开销更大。因此，如果切换非常频繁，建议优先使用v-show;而如果在运行时条件很少改变，则使用v-if效果较好。

列表渲染指令v-for：

v-for有些类似于JavaScript中的for...of循环结构肉。在Vue.js中，v-for指令几乎每个项目都会用到

v-for中的key属性有何作用：

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

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

v-for的优先级比 v-if 高，v-for每次迭代时都会执行一次v-if，这会造成不必要的计算开销