vue.js简介

传统网页开发步骤

传统开发的缺点：

DOM 操作频繁，代码繁杂
DOM 操作与逻辑代码混合，可维护性差
不同功能区域书写在一起，可维护性低
模块之间的依赖关系复杂

需要解决的问题

Vue.js 是什么？

前端流行框架，库是一种工具，框架是一种规则；

渐进式JavaScript框架

Vue.js 核心特性

数据驱动视图

数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。
对于输入框等可输入元素，可设置双向数据绑定。
- 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。
原理：Vue.js 的数据驱动视图是基于 MVVM 模型实现的。
MVVM (Model – View – ViewModel )是一种软件开发思想
- Model 层，代表数据
- View 层，代表视图模板
- ViewModel 层，代表业务逻辑处理代码
优点1：基于MVVM 模型实现的数据驱动视图解放了DOM操作
优点2：View 与 Model 处理分离，降低代码耦合度
缺点1：但双向绑定时的 Bug 调试难度增大
缺点2：大型项目的 View 与 Model 过多，维护成本高

组件化开发

组件化开发，允许我们将网页功能封装为自定义 HTML 标签，复用时书写自定义标签名即可。
组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性。

Vue.js 安装

本地引入

开发版本：cn.vuejs.org/js/vue.js
生产版本：cn.vuejs.org/js/vue.min.…

cdn 引入

最新稳定版： cdn.jsdelivr.net/npm/vue
指定版本： cdn.jsdelivr.net/npm/vue@2.6…

npm 安装

最新稳定版： • npm install vue
指定版本 • npm install vue@2.6.12

Vue.js 基础语法

Vue 实例

Vue 实例是通过 Vue 函数创建的对象，是使用 Vue 功能的基础。

var vm = new Vue({
    // 选项对象
})
复制代码

基础选项

el选项

用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。
代表 MVVM 中的 View 层（视图）。
可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body。

挂载完毕后，可以通过 vm.$el 进行访问。

未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同。

插值表达式

挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}。

注意点：
- 插值表达式只能书写在标签内容区域，可以与其它内容混合。
- 内部只能书写 JavaScript 表达式，不能书写语句。

data 选项

用于存储 Vue 实例需要使用的数据，值为对象类型。

new Vue({
    el:'#app',
    data: {
        title:'标题内容'
    }
});
复制代码

data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问。

data 中的数据可以直接在视图中通过插值表达式访问。
data 中的数据为响应式数据，在发生改变时，视图会自动更新。

data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助Vue.set() 方法替代操作。

methods 选项

用于存储需要在 Vue 实例中使用的函数。

methods 中的方法可以通过 vm.方法名 访问。
方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能。

指令

指令的本质就是 HTML 自定义属性

Vue.js 的指令就是以 v- 开头的自定义属性

内容处理

v-once 指令

使元素内部的插值表达式只生效一次

v-text 指令

元素内容整体替换为指定纯文本数据

v-html 指令

元素内容整体替换为指定的 HTML 文本

属性绑定

v-bind 指令

v-bind 指令用于动态绑定 HTML 属性

Vue.js 还为 v-bind 指令提供了简写方式。直接写:,不需要书写v-bind

如果需要一次绑定多个属性，还可以绑定对象。

与插值表达式类似，v-bind 中也允许使用表达式

Class 绑定

class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 class 属性共存

对于 class 绑定， Vue.js 中还提供了特殊处理方式，可以书写表达式，但是绑定的类名不能并排写

// 这是错误写法
<!-- <p class="a b c" :class="cls1 cls2 cls3"></p> -->
// 但是可以这样写
<!-- <p :class="cls"></p> -->
cls: 'q w e',
复制代码

下图中b、c、’class-d’是类名，冒号后面代表属性是否生效

使用数组的方式，结合了传统方式与动态控制的方式

Style 绑定

style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存。

当我们希望给元素绑定多个样式对象时，可以设置为数组

渲染指令

v-for 指令

用于遍历数据渲染结构，常用的数组与对象均可遍历

<!--数组方式-->
<li v-for="(item, index) in arr">元素内容为：{{ item }}, 索引为：{{ index }}</li>
<!--对象方式-->
<li v-for="(value, key, index) in obj">
    元素内容为: {{ value }}, 键为： {{ key }}, 索引值为： {{ index }}
</li> 
复制代码

<!--遍历数值-->
<li v-for="(item, index) in 5">
    这是第{{ item }}个元素，索引值为：{{ index }}
</li>
复制代码

使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题

通过 <template> 标签设置模板占位符，可以将部分元素或内容作为整体进行操作。<template> 标签不是一个标签，只是一个占位符，在页面结构中不会展示。所以不能设置key值，不需设置

v-show 指令

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用。本质是控制元素的display属性来控制元素的显示隐藏

<p v-show="22 > 11">标签内容</p>
复制代码

注意：
- <template> 无法使用 v-show 指令。因为<template>不是一个标签没有display属性

v-if 指令

用于根据条件控制元素的创建与移除。v-if是不适用频繁操作dom显示和隐藏的，会消耗性能

<div id="app">
    <p v-if="bool">这是标签内容</p>
    <p v-else-if="false">这是第二个p标签</p>
    <p v-else-if="false">这是第三个p标签</p>
    <p v-else>最后一个p标签</p>
</div>
复制代码

给使用 v-if 的同类型元素绑定不同的key

出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签,因为v-for的优先级更高，会先执行v-for再执行v-if

事件处理

v-on 指令

用于进行元素的事件绑定。

Vue.js 还为 v-on 指令提供了简写方式。

事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。

设置事件处理程序后，可以从参数中接收事件对象。

在视图中可以通过 $event 访问事件对象。

表单输入绑定

v-model 指令

用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。
首先我们来体验一下双向数据绑定的效果,从数据到视图，从视图到数据。

输入框绑定

输入框分为单行输入框 input 与多行输入框 textarea。

单选按钮绑定

单选按钮的双向数据绑定方式如下：

复选框绑定

复选框绑定分为单个选项与多个选项两种情况，书写方式不同。

- 单个复选框选定后的value值为布尔值，而不是当前选项的value，代表当前选项是否是选中状态
- 多个复选框选定后的value值就是选中选项的value值

选择框绑定

选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同

v-model 指令小结

input 输入框：绑定字符串值。
textarea 输入框：绑定字符串值。
radio：绑定字符串值。
checkbox：单个绑定布尔值，多个绑定数组。
select：单选绑定字符串，多选绑定数组。

修饰符

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作

事件修饰符

.prevent 修饰符
- 用于阻止默认事件行为，相当于 event.preventDefault()

.stop 修饰符
- 用于阻止事件传播，相当于 event.stopPropagation()
- Vue.js 中允许修饰符进行连写，例如：@click.prevent.stop

.once 修饰符
- 用于设置事件只会触发一次。

按键修饰符

按键码

按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式。

特殊按键

特殊按键指的是键盘中类似 esc、enter、delete 等功能按键，为了更好的兼容性，应首选内置别名。

.a.b.c代表点击了a键或者b键或者c键

系统修饰符

系统按键指的是 ctrl 、alt 、shift 等按键
单独点击系统操作符无效
系统按键通常与其他按键组合使用
.ctrl修饰符
.alt修饰符
.shift修饰符

鼠标按键修饰符

用于设置点击事件由鼠标哪个按键来完成

.left修饰符
.right修饰符
.middle修饰符

v-model 修饰符

.trim 修饰符
- 用于自动过滤用户输入内容首尾两端的空格。
.lazy 修饰符
- 用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发。
.number 修饰符
- 用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容

自定义指令

指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装。
当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置。

自定义全局指令

指的是可以被任意 Vue 实例或组件使用的指令

参数1focus是指令名称，参数2是该指令要执行的操作

自定义局部指令

指的是可以在当前 Vue 实例或组件内使用的指令

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive=”1 + 1″ 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1″ 中，表达式为 “1 + 1″。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行
复制代码

过滤器

过滤器用于进行文本内容格式化处理

// 设置全局过滤器
    Vue.filter('过滤器名称', function (value) {
      return 处理结果;
    });
复制代码

过滤器可以在插值表达式和 v-bind 中使用。通过管道符 | 连接使用

    <div id="app">
    <!-- 在v-bind中 -->
    <p v-bind:title="value | filterA">这是标签</p>
    <!-- 在插值表达式中-->
    <p>{{ value2 | filterA }}</p>
  </div>
复制代码

全局过滤器

可以将一个数据传入到多个过滤器中进行处理

一个过滤器可以传入多个参数。

在过滤器中函数的参数：参数1，是传入的初始值，参数2、参数3。。。是调用时传入的参数

局部过滤器

局部过滤器只能在当前 Vue 实例中使用

计算属性

Vue.js 的视图不建议书写复杂逻辑，这样不利于维护

封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。

如何提高执行效率？

计算属性使用时为属性形式，访问时会自动执行对应函数

methods（方法）与 computed（计算属性）区别

computed 具有缓存型，methods 没有。
computed 通过属性名访问，methods 需要调用。
computed 仅适用于计算操作。

准备一个数组，根据数组数据创建列表。

要求：当数据大于10时创建 li，否则不创建。
思考以下三种实现方式：

1.v-if 与 v-for 结合

2.v-for 与 methods 结合

3.v-for 与计算属性结合

计算属性的 setter

计算属性默认只有 getter，Vue.js 也允许给计算属性设置 setter 。

使用set时可以使用vm.fullName = '李四'

侦听器

侦听器用于监听数据变化并执行指定操作。

为了监听对象内部值的变化，需要将watch书写为对象，并设置选项deep: true，这时通过 handler（处理器）设置处理函数。

注意：当更改（非替换）数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组、对象。
注意：数组操作不要使用索引与length，无法触发侦听器函数。

Vue DevTools

是 Vue.js 官方提供的用来调试 Vue 应用的工具。

注意事项：
- 网页必须应用了 Vue.js 功能才能看到 Vue DevTools
- 网页必须使用 Vue.js 而不是 Vue.min.js
- 网页需要在 http 协议下打开，而不是使用 file 协议本地打开。

Vue.js 生命周期

Vue.js 生命周期指的是 Vue 实例的生命周期

Vue 实例的生命周期，指的是实例从创建到运行，再到销毁的过程。

Vue.js 生命周期函数

通过设置生命周期函数，可以在生命周期的特定阶段执行功能
生命周期函数也称为生命周期钩子

vue生命周期图示：cn.vuejs.org/images/life…

创建阶段：
- beforeCreate：实例初始化之前调用。(很少使用)
- created：实例创建后调用。（常用）
- beforeMount：实例挂载之前调用。
- mounted：实例挂载完毕。（常用）

特点：每个实例只能执行一次

运行阶段：
- beforeUpdate：数据更新后，视图更新前调用。
- updated：视图更新后调用。

特点：按需调用。

销毁阶段：
- beforeDestroy：实例销毁之前调用。
- destroyed：实例销毁后调用。

特点：每个实例只能执行一次。

综合案例：TodoMVC

TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式。

官网地址：todomvc.com/

功能完备不冗余，多样实现引深思。

准备工作

从 github 克隆项目模板。
- git clone github.com/tastejs/tod…
进入项目目录，安装项目依赖
- cd 项目目录
- npm install
安装 Vue.js
- npm install vue

需求分析

事项列表展示
- 有事项的情况
1. 引入 vue.js 文件，创建 Vue 实例设置挂载元素。
2. 在 data 中设置 todos 存储初始数据
3. 设置事项视图

设置事项视图：

– 没有事项的情况

设置有无事项时的显示状态：

状态栏展示
- 个数展示

– 单位处理

事项状态切换
- 单个事项切换
  - 单个事项切换通过 v-model 的设置已经实现了，体会双向数据绑定的好处。
  - 单个事项切换会导致 toggle-all 状态变化，我们可以通过 remaining 来进行判断：
  - 设置 v-model 后，主动操作 toggle-all 相当于设置 allDone 数据，这时需要给 allDone 设置 setter 来处理。