一、Vue 简介和环境搭建
一、Vue 是什么
Vue 是一套用于动态构建用户界面的渐进式 JavaScript 框架。
渐进式:Vue 可以自底向上逐层的应用。
简单应用:只需一个轻量小巧的核心库
复杂应用:可以引入各式各样的 Vue 插件
开发者:尤雨溪
后起之秀,生态完善,已然成为国内前端工程师必备技能。
二、Vue 的特点
- 采用组件化模式,提高代码复用率且让代码更好维护
- 声明式编码,让编码人员无需直接操作DOM,提高开发效率
- 使用虚拟DOM+优秀的 Diff 算法,尽量复用DOM节点
三、环境搭建
简单来说直接下载并用<script>标签引入就可以了,Vue 会被注册为一个全局变量,具体使用过程可以参考官方文档:安装 — Vue.js。
四、小结
学习 Vue 前要尽可能掌握的 JavaScript 知识:
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise
通过代码初识Vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
初识Vue:
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
注意区分:js 表达式 和 js 代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js 代码(语句)
(1). if(){}
(2). for(){}
-->
<!-- 容器 -->
<div id="root">
<!-- 插值语法 -->
<h1>Hi,{{name.toUpperCase()}},{{film}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
// 创建Vue实例
new Vue({
// el:document.getElementByID('root')
el: '#root', // el 用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data: { // data 中用于存储数据,数据提供el所指定的容器去使用,值我们暂时先写成一个对象
name: 'Tom',
film: '猫和老鼠'
}
})
// axios({
// el: '#root'
// })
</script>
</body>
</html>
二、数据绑定和数据代理
一、模板语法
1、插值语法(双大括号表达式)
用于解析标签体内容。
语法:{{xxx}} ,xxxx 会作为 js 表达式解析,且可以直接读取到 data 中的所有属性。
2、指令语法(以 v- 开头)
用于解析标签(包括:标签属性、标签体内容、绑定事件等)。
例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx 会作为 js 表达式被解析,且可以直接读取到 data 中的所有属性。
二、数据绑定
1、单向数据绑定
语法:v-bind:href ="xxx" 或简写为 :href
特点:数据只能从 data 流向页面
2、双向数据绑定
语法:v-mode:value="xxx" 或简写为 v-model="xxx"
特点:数据不仅能从 data 流向页面,还能从页面流向 data;通常都是应用在表单类元素上(如:<input>、<select>、<textarea>等);v-model:value 可以简写为 v-model,因为 v-model 默认收集的就是 value 值。
三、el 与 data 的两种写法
1、el 的两种写法
- new Vue 时配置 el 属性
- 先创建 Vue 实例,再通过 vm.$mount('#root') 指定 el 的值
2、data 的两种写法
- 对象式
- 函数式
学习到组件时,data必须使用函数式,否则会报错。
注意:由 Vue 管理的函数,一定不要写箭头函数,一旦写了箭头函数,this 就不再是 Vue 实例了。
四、MVVM模型
- M:模型(Model) :data 中的数据
- V:视图(View) :模板代码
- VM:视图模型(ViewModel):Vue 实例
小结:data 中所有的属性,最后都出现在了vm 身上,vm 身上所有的属性 及 Vue 原型上所有属性,在 Vue 模板中都可以直接使用。
五、数据代理
通过一个对象代理对另一个对象中属性的操作(读/写)。
Vue 中的数据代理:
通过 vm 对象来代理 data 对象中属性的操作(读/写)。
好处:更加方便的操作 data 中的数据
基本原理:
- 通过Object.defineProperty()把 data 对象中所有属性添加到 vm 上
- 为每一个添加到 vm 上的属性,都指定一个 getter/setter
- 在 getter/setter 内部去操作(读/写)data 中对应的属性
三、事件处理
一、事件的基本使用
- 使用 v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名
- 事件的回调需要配置在 methods 对象中,最终会在 vm 上
- methods 中配置的函数,不要用箭头函数,否则 this 就不是 vm 了
- methods 中配置的函数,都是被 Vue 所管理的函数,this的指向是 vm 或 组件实例对象
- @click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参
事件修饰符:
事件修饰符 | 说明 |
---|---|
prevent | 阻止事件的默认行为(常用)event.preventDefault() |
stop | 阻止事件冒泡(常用)event.stopPropagation() |
once | 事件只触发一次(常用) |
capture | 使用事件的捕获模式 |
self | 只有 event.target 是当前操作的元素时才触发事件 |
passive | 事件的默认行为立即执行,无需等待事件回调执行完毕 |
二、键盘事件
1、Vue 中常用的按键别名
按键 | 按键别名 |
---|---|
回车 | enter |
删除 | delete (捕获“删除”和“退格”键) |
退出 | esc |
空格 | space |
换行 | tab (特殊,必须配合keydown去使用) |
上、下、左、右 | up、down、left、right |
注意:
- Vue 未提供别名的按键,可以使用按键原始的 key 值去绑定,但注意要转为 kebab-case(短横线命名)
- Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
- (不推荐)使用 keyCode 去指定具体的按键
系统修饰键(用法特殊):ctrl、alt、shift、meta
配合 keyup 使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
配合 keydown 使用:正常触发事件
四、计算属性和监视属性
一、计算属性-computed
1、定义
- 要显示的数据不存在,要通过计算得来
- 在 computed 对象中定义计算属性
- 在页面中使用{{方法名}}来显示计算的结果
2、原理
底层借助了 Objcet.defineproperty 方法提供的 getter 和 setter。
3、get 函数的执行机制
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
4、优势
与 methods 实现相比,内部有缓存机制(复用),效率更高,调试方便。
注意:计算属性最终会出现在 vm 上,直接读取使用即可;如果计算属性要被修改,那必须写 set 函数去响应修改,且 set 中要引起计算时依赖的数据发生改变。
二、监视属性-watch
1、定义
- 通过 vm 对象的$watch()或 watch 配置来监视指定的属性
- 当属性变化时,回调函数自动调用,在函数内部进行计算
注意:监视的属性必须存在,才能进行监视。
2、监视的两种写法
- new Vue 时传入 watch 配置
- 通过 vm.$watch 监视
3、深度监视
- Vue 中的 watch 默认不监测对象内部值的改变(一层)
- 配置 deep:true 可以监测对象内部值改变(多层)
注意:Vue 自身可以监测对象内部值的改变,但 Vue 提供的 watch 默认不可以;使用 watch 时根据数据的具体结构,决定是否采用深度监视。
三、computed 和 watch 之间的区别
computed 能完成的功能,watch 都可以完成;但 watch 能完成的功能,computed 不一定能完成,例:watch 可以进行异步操作。
两个重要的小原则:
- 所有被 Vue 管理的函数,最好写成普通函数,这样 this 的指向才是 vm 或 组件实例对象
- 所有不被 Vue 所管理的函数(定时器的回调函数、ajax 的回调函数等、Promise 的回调函数),最好写成箭头函数,这样 this 的指向才是 vm 或 组件实例对象
五、绑定样式和渲染
一、class 与 style 绑定
理解:在应用界面中,某个(些)元素的样式是变化的,class/style 绑定就是专门用来实现动态样式效果的技术。
1、class 绑定
语法:
:class='xxx'
其中 xxx 可以是字符串、对象、数组:
- 表达式是字符串: 'classA'
适用于:类名不确定,要动态获取
- 表达式是对象: {classA:isA, classB: isB}
适用于:要绑定多个样式,个数不确定,名字也不确定
- 表达式是数组: ['classA', 'classB']
适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
2、style 绑定
语法:
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中 activeColor/fontSize 是 data 属性,例:
- :style="{fontSize: xxx}",其中 xxx 是动态值
- :style="[a,b]"其中 a、b 是样式对象
二、条件渲染
1、v-if 与 v-else
语法:
v-if="表达式"
v-else-if="表达式"
v-else="表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if 可以和 v-else-if、v-else 一起使用,但要求结构不能被“打断”。
2、v-show
语法:
v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉。
注意:使用 v-if 的时,元素可能无法获取到,而使用 v-show 一定可以获取到。
比较 v-if 与 v-show:如果需要频繁切换 v-show 较好;当条件不成立时,v-if 的所有子节点不会解析(项目中使用)。
三、列表渲染
1、v-for 指令:用于展示列表数据;
可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
语法:
v-for="(item, index) in/of xxx" :key="yyy"
2、key 的原理
面试题:react、vue 中的 key 有什么作用?(key 的内部原理)
1.虚拟DOM中 key 的作用:
key 是虚拟DOM对象的标识,当数据发生变化时,Vue 会根据【新数据】生成【新的虚拟DOM】,随后 Vue 进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下。
2.对比规则
- 旧虚拟DOM中找到了与新虚拟DOM相同的 key
若虚拟DOM中内容没变, 直接使用之前的真实DOM;
若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
- 旧虚拟DOM中未找到与新虚拟DOM相同的 key
创建新的真实DOM,随后渲染到到页面。
3.用 index 作为 key 可能会引发的问题
若对数据进行逆序添加、逆序删除等破坏顺序的操作会产生没有必要的真实DOM更新;界面效果没问题,但效率低。
如果结构中还包含输入类的DOM会产生错误DOM更新;界面有问题。
4.开发中如何选择 key
最好使用每条数据的唯一标识作为 key,比如 id、手机号、身份证号、学号等唯一值;如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用 index 作为 key 是没有问题的。
六、监视数据、表单和过滤器
一、Vue 监视数据
原理:vue 会监视 data 中所有层次的数据。
1、如何监测对象中的数据
通过 setter 实现监视,且要在 new Vue 时就传入要监测的数据;
对象中后追加的属性,Vue 默认不做响应式处理;如需给后添加的属性做响应式,需使用如下API:
Vue.set(target,propertyName/index,value) 或
vm.$set(target,propertyName/index,value)
2、如何监测数组中的数据
通过包裹数组更新元素的方法实现,本质就是做了以下两件事:
1.调用原生对应的方法对数组进行更新
2.重新解析模板,进而更新页面
注意:在 Vue 修改数组中的某个元素一定要用如下方法:
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set() 或 vm.$set()
Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象添加属性。
二、收集表单数据
- 若:<input type="text"/>,则 v-model 收集的是 value 值,用户输入的就是 value 值;
- 若:<input type="radio"/>,则 v-model 收集的是 value 值,且要给标签配置 value 值;
- 若:<input type="checkbox"/>
没有配置 input 的 value 属性,那么收集的就是 checked(勾选 or 未勾选,是布尔值);
配置了 input 的 value 属性时:
v-model 的初始值是非数组,那么收集的就是 checked(勾选 or 未勾选,是布尔值);
v-model 的初始值是数组,那么收集的的就是 value 组成的数组。
v-model 的三个修饰符:
- lazy:失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:输入首尾空格过滤
三、过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
注册过滤器:
Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器:
{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
注意:过滤器也可以接收额外参数、多个过滤器也可以串联;并没有改变原本的数据,是产生新的对应的数据。
七、指令和生命周期
一、常用内置指令
1、v-text:更新元素的 textContent,即向其所在的节点中渲染文本内容。
与插值语法的区别:v-text 会替换掉节点中的内容,{{xx}}则不会。
2、v-html:更新元素的 innerHTML,即向指定节点中渲染包含 html 结构的内容。
与插值语法的区别:v-html 会替换掉节点中所有的内容,{{xx}}则不会;v-html 可以识别 html 结构。
注意:v-html 有安全性问题,在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击;一定要在可信的内容上使用 v-html,永远不要用在用户提交的内容上。
3、v-cloak(没有值):防止闪现,与 css 配合: [v-cloak] { display: none }。
本质是一个特殊属性,Vue 实例创建完毕并接管容器后,会删掉 v-cloak 属性。使用 css 配合 v-cloak 可以解决网速慢时页面展示出{{xxx}}的问题。
4、v-once:v-once 所在节点在初次动态渲染后,就视为静态内容了;以后数据的改变不会引起 v-once 所在结构的更新,可以用于优化性能。
5、v-pre:跳过其所在节点的编译过程;可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
常用内置指令 | 说明 |
---|---|
v-if | 条件渲染(动态控制节点是否存存在) 如果为 true, 当前标签才会输出到页面 |
v-else | 条件渲染(动态控制节点是否存存在) 如果为 false, 当前标签才会输出到页面 |
v-show | 条件渲染 (动态控制节点是否展示) 通过控制 display 样式来控制显示/隐藏 |
v-for | 遍历数组/对象/字符串 |
v-on | 绑定事件监听,一般简写为@ |
v-bind | 单向绑定解析表达式,可以省略 v-bind,简写为 :xxx |
v-model | 双向数据绑定 |
二、自定义指令
语法:
局部指令:
new Vue({
directives:{指令名:配置对象}
})
new Vue({
directives{指令名:回调函数}
})
全局指令:
Vue.directive(指令名,配置对象)
Vue.directive(指令名,回调函数)
配置对象中常用的3个回调:
配置对象中的回调 | 说明 |
---|---|
bind | 指令与元素成功绑定时调用 |
inserted | 指令所在元素被插入页面时调用 |
update | 指令所在模板结构被重新解析时调用 |
注意:指令定义时不加 v-,但使用时要加 v-;指令名如果是多个单词,要使用 kebab-case 命名方式,不要用 camelCase 命名。
三、生命周期
1、简介
生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。它是 Vue 在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的;生命周期函数中的 this 指向是 vm 或 组件实例对象。
生命周期图示
2、常用的生命周期方法(钩子)
1.mounted()
发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等初始化操作(异步任务)。
2.beforeDestroy()
做收尾工作,如: 清除定时器、解绑自定义事件、取消订阅消息等。
关于销毁 Vue 实例:
- 销毁后借助 Vue 开发者工具看不到任何信息
- 销毁后自定义事件会失效,但原生DOM事件依然有效
- 一般不会在 beforeDestroy 操作数据,因为即便操作数据,也不会再触发更新流程
参考博客:Vue学习笔记