Vue基础

Vue基础

1. Vue简介

官方的定义：一套用于构建用户界面的前端框架。

1.1 Vue特性

• 数据驱动视图：Vue会监听数据的变化，从而自动重新渲染页面结构
• 双向数据绑定：不操作DOM的前提下，自动将表单内容同步到数据源中

1.2 MVVM

MVVM: Model, View, ViewModel

MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理，它把每个HTML页面都拆成了三部分：Model表示当前页面渲染时所依赖的数据源；View表示当前页面渲染的DOM结构；ViewModel表示vue的实例，是MVVM的核心！

2. Vue的基本使用

2.1 基本使用步骤

• 导入Vue.js的脚本文件，就会在window全局有Vue构造函数
• 在页面中声明一个将要被vue控制的DOM区域
• 创建vm实例对象（vue实例对象）

2.2 Vue的调式工具

Vue.js devtools

3. Vue指令

3.1 指令的概念

指令Directives：是Vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。v-xxx

按照不同的用途可以分为：

• 内容渲染指令：v-text, 插值表达式双花括号，v-html
• 属性绑定指定：v-bind
• 事件绑定指令：v-on
• 双向绑定指令：v-model
• 条件渲染指定：v-if，v-show，v-else，v-else-if
• 列表渲染指令：v-for

3.2 内容渲染指令

用来辅助开发者渲染DOM元素的文本内容。

• v-text：将文本渲染到标签中，但是会覆盖元素内默认的值

如何解决？

• 插值表达式Mustache

• v-html: 可以渲染包含html标签的字符串

---

问题：插值表达式可以解决文本内容，但是属性是没办法用插值表达式的怎么办呢？

3.3 属性绑定指令 v-bind:(:)

为元素的属性动态绑定属性值

---

经常会和布尔型Attribute联用：

button :disabled=”isButtonDisabled”

3.4 事件绑定指令 v-on:(@)

辅助为DOM元素绑定事件监听

注：原生DOM对象有onclick、onkeyup等原生事件，替换为vue事件绑定形式后，为：v-on:click、v-on:keyup或者简写形式：@click、@keyup

3.4.1 事件对象event

在原生的DOM事件绑定中，可以在事件处理函数的形参中，接收事件参数对象event。同理，在v-on指令所绑定的事件处理函数中，也可以接收事件对象event。

3.4.2 事件修饰符

在事件处理函数中调用event.preventDefault()或者event.stopPropogation()是很常见的需求。

Vue中提供了事件修饰符的概念辅助对事件的触发进行控制。

• event.stop: 阻止事件冒泡

• event.prevent: 阻止默认行为（比如a链接的跳转、表单的提交等）

  e.g. a href=”某度的网址嘻嘻” @click.prevent=”事件处理函数”，就可以阻止默认的跳转行为

3.4.3 按键修饰符

监听键盘事件，常常需要判断详细的按键

• @keyup.enter=”xx”：只有在按键为enter键时调用处理函数xx
• @keyup.esc=”yy”: 只有在按键为esc键时调用处理函数yy

3.5 双向绑定指令 v-model

注意，v-model只能配合表单元素一起使用

vue中的v-model双向数据绑定指令，可以辅助在不操作DOM的前提下，快速获取表单的数据

3.5.1 v-model指令的修饰符

为了方便对用户输入的内容进行处理，vue为v-model指令提供了以下修饰符

• .number: 自动将用户的输入值转为数值类型
• .trim: 自动过滤用户输入的首尾空白字符
• .lazy: 默认情况下v-model会在每次input事件后更新数据，添加lazy修饰符会在每次change事件后更新数据

3.6 条件渲染指令

按条件控制DOM的显示与隐藏，只有在指令表达式返回true时才被渲染

v-if和v-show的区别：

实现原理不同：

• v-if指令会动态的创建或者移除DOM元素，从而控制元素在页面上的显示与隐藏；
• v-show指定会动态的为元素添加或移除style=”display:none”样式，从而控制元素在页面上的显示与隐藏；

性能消耗不同：

• v-if具有更高的切换开销：如果需要频繁的切换还是用v-show好一点
• v-show具有更高的初始渲染开销，在运行时条件改变很少使用v-if好一点

3.7 条件渲染指令

v-for=”(item,index) in list”

但是当列表数据变化的时候，vue默认会尽可能的复用已经存在的Dom元素，从而提升渲染的性能，但是有可能会导致有一些有状态的列表无法正确的被更新，vue官方建议用id作为key值，方便追踪每个节点

v-for使用时建议都指定key的值，既能提升性能，又可以防止列表状态紊乱

4. *Vue2.x中的过滤器Filters

了解即可，常用于文本的格式化，且以管道符的形式进行调用

• 在插值表达式中使用过滤器：

• 在v-bind属性绑定中使用过滤器：

  div v-bind:id=”rawId | formatId”

注意：

• methods v.s. filters：定义事件处理函数是定义在methods中，定义过滤器函数是在filters

• 私有过滤器 v.s. 全局过滤器：

  私有过滤器：定义在filters节点下的过滤器，只能在vm实例控制的el区域内使用，但是不能在多个vue实例中共享

  全局过滤器：独立于每个vm实例之外，用Vue.filter(名字，处理函数)进行定义

  

5. 侦听器Watch

用于监视数据变化

5.1 定义

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

watch是以方法形式对被侦听对象的变化进行侦听。

注意参数的顺序：newVal， oldVal！

但是watch方法默认不会对对象的初始值进行侦听，有变化才会侦听，那么如果相对被侦听对象的初始值也侦听怎么办呢？

5.2 immediate选项

默认的watch都是方法的形式，为了加入immediate选项，需要改造成对象的形式

watch: {

​ username: {

​ handler: function(newVal, oldVal) {xxx},

​ immediate: true

}}

但是watch侦听的对象如果是一个对象，对象中的属性值变化是侦听不到的怎么办？

5.3 deep选项

还是在上述对象的形式的基础上，加入deep: true就会对对象中所有属性的属性值变化进行侦听

但是我只想侦听某个属性值的变化怎么办呢？

5.4 侦听对象单个属性的变化

注意引号的使用！

6. 计算属性Computed

以function函数形式声明到computed节点中，实时监听data，经过一系列的运算后最终通过return返回一个属性值。

虽然计算属性在声明的时候被定义为方法，但是本质是一个属性，调用的使用也是通过属性的方式进行调用。

计算属性 v.s. 侦听器： 侧重的应用场景不同

• 计算属性侧重于监听多个值的变化，最终计算并返回一个新值
• 侦听器侧重于监听单个数据的变化，执行特定的业务处理并没有返回值