vue.js基础

Vue.js 简介

Vue.js 是什么？

前端流行框架

Vue.js 核心特性

数据驱动视图

• 数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。
• 对于输入框等可输入元素，可设置双向数据绑定。
• 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。
• Vue.js 的数据驱动视图是基于 MVVM 模型实现的。
• MVVM (Model – View – ViewModel )是一种软件开发思想
• Model 层，代表数据
• View 层， 代表视图模板
• ViewModel 层，代表业务逻辑处理代码

优点

• 基于MVVM 模型实现的数据驱动视图解放了DOM操作
• View 与 Model 处理分离，降低代码耦合度

缺点

• 但双向绑定时的 Bug 调试难度增大
• 大型项目的 View 与 Model 过多，维护成本高

组件化开发

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

Vue.js 安装

本地引入

• 开发版本：https://cn.vuejs.org/js/vue.js
• 生产版本：https://cn.vuejs.org/js/vue.min.js

cdn 引入

• 最新稳定版： https://cdn.jsdelivr.net/npm/vue
• 指定版本：
https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js

npm 安装

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

Vue.js 基础语法

Vue 实例

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

基础选项

el 选项

• 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
• 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。
• 代表 MVVM 中的 View 层（视图）
• 可以为 CSS 选择器格式的字符串 或 HTMLElement 实例，但不能为 html 或 body
• 挂载完毕后，可以通过 vm.$el进行访问。•未设置el的vue实例，也可以通过vm.$mount() 进行挂载，参数形式与 el 规则相同

插值表达式

• 挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}
• 注意点：
• 插值表达式只能书写在标签内容区域，可以与其它内容混合。
• 内部只能书写 JavaScript 表达式，不能书写语句
#####data 选项
• 用于存储 Vue 实例需要使用的数据，值为对象类型
• data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问。
• data 中的数据可以直接在视图中通过插值表达式访问。
• data 中的数据为响应式数据，在发生改变时，视图会自动更新。
• data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助 Vue.set() 方法替代操作。

Vue.set(vm.contentArr,0,'生效的新内容')

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 中也允许使用表达式

Class 绑定

• class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与class 属性共存
• 对于 class 绑定， Vue.js 中还提供了特殊处理方式

Style 绑定

• style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与style 属性共存
• 当我们希望给元素绑定多个样式对象时，可以设置为数组。

渲染指令

v-for 指令

• 用于遍历数据渲染结构，常用的数组与对象均可遍历。
• 使用 v-for 的同时，应始终指定唯一的 key 属性，可以提高渲染性能并避免问题。
• 通过 标签设置模板占位符，可以将部分元素或内容作为整体进行操作。

v-show 指令

• 用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用。
• 注意：
• 无法使用 v-show 指令

v-if 指令

• 用于根据条件控制元素的创建与移除。
• 给使用 v-if 的同类型元素绑定不同的key
• 出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签

事件处理v-on 指令

• 用于进行元素的事件绑定。
• Vue.js 还为 v-on 指令提供了简写方式。
• 事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。
• 设置事件处理程序后，可以从参数中接收事件对象。
• 在视图中可以通过 $event 访问事件对象。

表单输入绑定v-model 指令

• 用于给 、 及 元素设置双向数据绑定。
• 首先我们来体验一下双向数据绑定的效果。

输入框绑定表单数据绑定

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

单选按钮绑定表单数据绑定

单选按钮的双向数据绑定

复选框绑定

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

#v-model 指令小结

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

修饰符

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

事件修饰符

.prevent 修饰符

• 用于阻止默认事件行为，相当于 event.preventDefault().

.stop 修饰符

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

.once 修饰符

• 用于设置事件只会触发一次。

按键修饰符

按键码

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

特殊按键

• 特殊按键指的是键盘中类似 esc、enter、delete 等功能按键，为了更好的兼容性，应首选内置别名。
####系统修饰符
系统按键指的是 ctrl 、alt 、shift 等按 键
单独点击系统操作符无效。
系统按键通常与其他按键组合使用。
.ctrl 修饰符
.alt 修饰符
.shift 修饰符
####鼠标按键修饰符
用于设置点击事件由鼠标哪个按键来完成。
• .left 修饰符
• .right 修饰符
• .middle 修饰符

v-model 修饰符

.trim 修饰符

• 用于自动过滤用户输入内容首尾两端的空格。

.lazy 修饰符

用于将 v-model 的触发方式由 input 事件触发更改为 change事件触发。

.number 修饰

• 用于自动将用户输入的值转换为数值类型，如无法被parseFloat() 转换，则返回原始内容。

自定义指令

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

自定义全局指令

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

自定义局部指令

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

过滤器

过滤器用于进行文本内容格式化处理。
过滤器可以在插值表达式和 v-bind 中使用

全局过滤器

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

局部过滤器

• 局部过滤器只能在当前 Vue 实例中使用
###计算属性
• Vue.js 的视图不建议书写复杂逻辑，这样不利于维护。
封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。

如何提高执行效率？

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

methods 与 computed 区别

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

练习

• 准备一个数组，根据数组数据创建列表。
• 要求：当数据大于10时创建 li，否则不创建。
• 思考以下三种实现方式：
• v-if 与 v-for 结合
• v-for 与 methods 结合
• v-for 与 计算属性结合

计算属性的 setter

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

侦听器

• 侦听器用于监听数据变化并执行指定操作。
• 为了监听对象内部值的变化，需要将 watch 书写为对象，并设置选项 deep: true，这时通过 handler 设置处理函数
• 注意：当更改（非替换）数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组 、对象。
• 注意：数组操作不要使用索引与length，无法触发侦听器函数。

Vue DevTool

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

注意事项：

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

Vue.js 生命周期

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

Vue.js 生命周期函数

通过设置生命周期函数，可以在生命周期的特定阶段执行功能。
生命周期函数也称为生命周期钩子。
• 创建阶段：
• beforeCreate：实例初始化之前调用。
• created： 实例创建后调用。
• beforeMount：实例挂载之前调用。
• mounted： 实例挂载完毕。
特点：每个实例只能执行一次。
• 运行阶段：
• beforeUpdate：数据更新后，视图更新前调用。
• updated： 视图更新后调用。
• 特点：按需调用。
• 销毁阶段：
• beforeDestroy：实例销毁之前调用。
• destroyed： 实例销毁后调用。
特点：每个实例只能执行一次。

综合案例：TodoMVC

TodoMVC 是一个经典项目，让开发者快速实 践到框架开发方式。
官网地址：http://todomvc.com/
功能完备不冗余，多样实现引深思。

准备工作

• 从 github 克隆项目模板。
• git clone https://github.com/tastejs/todomvc-app-template.git
• 进入项目目录，安装项目依赖
• cd 项目目录
• npm install
• 安装 Vue.js
• npm install vue

需求分析

• 事项列表展示 ,给内部的样式或者数据进行操作
• 有事项的情况
• 没有事项的情况
• 状态栏展示
• 个数展示
• 单位处理
• 事项状态切换
• 单个事项切换
• 多个事项切换
• 事项新增
• 内容检测
• 回车新增
• 事项删除
• 单个事项删除
• 已完成事项删除
• 事项编辑
• 触发编辑
• 取消编辑
• 保存编辑
• 事项筛选
• 点击切换显示类别
• 更新渲染所有事项
• 事项数据持久化
• 读取本地存储
• 更新本地存储

事项列表展示

• 引入 vue.js 文件，创建 Vue 实例设置挂载元素。
• 在 data 中设置 todos 存储初始数据
• 设置事项视图
• 设置有无事项时的显示状态

状态栏信息展示

• 需要实现的功能为：
• 个数展示
• 单位处理

事项状态切换

• 需要实现的功能为：
• 单个事项切换
• 多个事项切换
• 单个事项切换通过 v-model 的设置已经实现了，体会双向数据绑 定的好处。
• 多个事项切换分为 2 部分功能：
• 单个事项操作
• 全部切换选框操作
• 单个事项切换会导致 toggle-all 状态变化，我们可以通过 remaining 来进行判断

事项状态切换

• 设置 v-model 后，主动操作 toggle-all 相当于设置 allDone 数据，这时需要给 allDone 设置 setter 来处理。

事项新增

• 需要实现的功能为：
• 输入框内容绑定
• 回车新增事项
• 在 data 中设置 newTodo 用于存储数据，并绑定给新增输入框。
• 输入框回车时检测内容，并根据输入内容新增事项到 todos。

事项删除

• 需要实现的功能为：
• 单个事项删除
• 已完成事项删除
• 点击单个事项中的删除按钮时，删除 todos 中对应的对象数据。
• 已完成事项按钮的需要在具有已完成事项时显示。
• 操作后，事项列表中只保留未完成事项即可。

事项编辑

• 需要实现的功能为：
• 触发编辑
• 取消编辑
• 保存编辑
• 双击时进行记录正在编辑的 todo，并保存原始 todo 内容。
• 正在被编辑的 li 需要设置类名 editing。

自动获取焦点

• 触发编辑后，输入框无法自动获取焦点，可通过自定义指令实现。

取消编辑与保存编辑

• 点击 esc 键取消编辑，还原事项内容与状态。
• 点击回车键或失去焦点时保存编辑。
• 当编辑内容为空时保存，应当删除 todo 。
• 回车也会失去焦点，为避免重复触发事件，需进行检测。

事项筛选

• 需要实现的功能为：
• 记录筛选类别
• 点击更改类别
• 在 data 中声明数据存储当前显示的事项类别，并在点击筛选按 钮时更改显示的事项类别
• 设置用于筛选不同类别事项的函数，并统一存储。
• 设置计算属性处理 todoType，并设置给视图。
• 之前使用过的数据筛选函数也可以通过 filters 进行统一设置。

事项数据持久化

• 需要实现的功能为：
• 获取本地存储
• 更新本地存储
• 封装函数，用于进行本地存储数据读取。
• 将事项数据更改为本地存储数据。
• 封装本地存储的更新功能
• 由于多种事项操作都需要更新本地存储，单个设置十分繁琐，可…,/.,/.,/m./,./,m,mm,.//,mm,mmm==以通过侦听器统一设置。

文章内容输出来源：拉勾教育大前端就业急训营