一、Vue概述
1.1web前段框架介绍
Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue的核心库关注于视图（html），不仅易上手，还便于与第三方库或项目整合。
近几年，互联网前端行业发展得依旧迅猛，涌现出了很多优秀的JavaScript框架，同时这些JavaScript框架也正在逐渐改变统的前端开发方式。
在这些新出现的JavaScript框架中，最具代表性的框架有Angular.js、React.js和 Vue.js。
1.2 MVC和MVVM
MVC是著名的设计模式，基本思想是将软件结构分解为Model（模型）、View（视图）和Controller（控制器）三部分组成。
- Model:主要负责数据处理和运算(数据保存)
- Controller: 主要负责接收输入的数据并控制使用哪个View显示(业务逻辑)
- View : 主要负责显示数据和用户交互(用户界面)
各部分之间的通信方式如下:
MVVM设计模式是由Model（模型）、View（视图）和ViewModel（视图模型）三部分组成，是MVC设计模式的进化版，即Controller转变为ViewModel。
唯一的区别是，它采用双向绑定(data-binding)：View的变动，自动反映在ViewModel，反之亦然。Angular和ember都采用这种模式。
1.3Vue简介
（一）、基本介绍
1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。
2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。
3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
(二)、为什么要使用Vue.js
- 轻量级，体积小是一个重要指标。Vue.js压缩后只有20多kb(Angular压缩后56kb+，react压缩后44kb+)
- 移动优先。更适合移动端，比如移动端的Touch事件
- 易上手，学习曲线平稳，文档齐全
- 吸取了Angular(模块化)和React(虚拟DOM)的长处，并拥有自己独特的功能，如计算机属性
- 开源，社区活跃度高
(三)、vue的优势
轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
二、第一个Vue程序
2.1引入Vue.js
开发版本:包含完整的警告和调试模式
生产版本:删除了警告，33.46KB min+gzip
CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2.2第一个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="../vue/vue.js"></script>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<!-- 3. Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了[前端的Vue之类的框架，不提倡我们去手动操作DOM元素了]
}
})
</script>
</body>
</html>
使用Vue将helloworld 渲染到页面上
三、Vue的模板语法
3.1插值表达式
使用 {{}} 的形式将数据显示在页面中
<div>{{msg}}</div>
3.2指令语法
① 什么是指令？
指令的本质就是自定义属性
指令的格式：以v-开始（比如： v-cloak）
② v-cloak
防止页面加载时出现闪烁问题
<style type="text/css">
/*
1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
*/
[v-cloak]{
/* 元素隐藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 2、 让带有插值 语法的 添加 v-cloak 属性
在 数据渲染完场之后，v-cloak 属性会被自动去除，
v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签
也就是对应的标签会变为可见
-->
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 里面存储的是数据
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
③v-text
- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<div id="app">
<!--
注意:在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中 赋值的时候不要在写 插值语法
一般属性中不加 {{}} 直接写 对应 的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
④v-html
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<div id="app">
<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
<p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>通过双括号绑定</span>",
html: "<span>html标签在渲染的时候被解析</span>",
text: "<span>html标签在渲染的时候被源码输出</span>",
}
});
</script>
四、 事件绑定
4.1v-on指令用法
<input type='button' v-on:click='num++'/>
4.2v-on简写形式
<input type=‘button' @click='num++'/>
4.3事件函数的调用方式
直接绑定函数名称
<button v-on:click='say'>Hello</button>
调用函数
<button v-on:click='say()'>Say hi</button>
案例
<!-- 函数调用 -->
<button @click='handle'>点击1</button>
<button @click='handle()'>点击2</button>
/* 事件绑定 */
var vm = new Vue({
el: '#app',
data: {
num: 0
},
// 函数必须定义在methods属性当中
methods: {
handle: function() {
// 这里的this是Vue的实例对象
console.log(this == vm);
// 注意，函数里面不能直接使用data里的数据，必须要加上this.，否则会报错num没定义
this.num++;
}
}
})
4.4事件函数参数传递
普通参数和事件对象
<button v-on:click='say1()'>Say hi1</button>
<button v-on:click='say2("hi", $event)'>Say hi2</button>
-
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
-
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
4.5事件修饰符
- stop 阻止冒泡
传统的阻止冒泡的方式是在函数里添加这样一句代码：event.stopPropagation();
<a v-on:click.stop="handle">跳转</a>
- prevent 阻止默认行为
原生JS中阻止默认行为是在函数里添加这样一句代码：event.preventDefault();
<a v-on:click.prevent="handle">跳转</a>
- once 事件只触发一次
<button @click.once="showInfo">只能点一次</button>
五、属性绑定
v-bind指令用法
<a v-bind:href='url'>跳转</a>
缩写形式
<a :href='url'>跳转</a>
5.1绑定对象
- 我们可以给v-bind:class 一个对象，以动态地切换class。
- 注意：v-bind:class指令可以与普通的class特性共存
绑定对象语法
<!-- 单个类名绑定 -->
<div v-bind:class="{ active: isActive }"></div>
<!-- 多个类名绑定 -->
<div v-bind:class="{ active: isActive, error: isError }"></div>
例如下列代码
1、 v-bind 中支持绑定一个对象
如果绑定的是一个对象 则 键为 对应的类名 值 为对应data中的数据
<!--
HTML最终渲染为 <ul class="box textColor textSize"></ul>
注意：
textColor，textSize 对应的渲染到页面上的CSS类名
isColor，isSize 对应vue data中的数据 如果为true 则对应的类名 渲染到页面上
当 isColor 和 isSize 变化时，class列表将相应的更新，
例如，将isSize改成false，
class列表将变为 <ul class="box textColor"></ul>
-->
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
<div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>
<sript>
var vm= new Vue({
el:'.box',
data:{
isColor:true,
isSize:true，
activeColor:"red",
activeSize:"25px",
}
})
</sript>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
5.2绑定class
绑定数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
例如下面案例
2、 v-bind 中支持绑定一个数组 数组中classA和 classB 对应为data中的数据
这里的classA 对用data 中的 classA
这里的classB 对用data 中的 classB
<ul class="box" :class="[classA, classB]">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
<script>
var vm= new Vue({
el:'.box',
data:{
classA:‘textColor‘,
classB:‘textSize‘
}
})
</script>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
样式绑定的一些细节：
对象绑定和数组绑定可以结合使用：
<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
如果样式过多，都写在标签中太过于复杂，class绑定的值可以简化：
data: {
arrClasses: ['active', 'error']
}
// 或者
data: {
objClasses: {
active: true,
error: true
}
}
默认的class如何处理？默认的class样式会保留
<!-- 默认的base样式会保留，不会被覆盖 -->
<div class='base' v-bind:class='objClasses'></div>
5.3绑定对象和绑定数组 的区别
- 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是data 中的数据
5.4style样式处理
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
六、双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
v-model
- v-model是一个指令，限制在
<input>、<select>、<textarea>、components中使用
<div id="app">
<div>{{msg}}</div>
<div>
当输入框中内容改变的时候， 页面上的msg 会自动更新
<input type="text" v-model='msg'>
</div>
</div>
v-model指令的修饰符
为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .number | 自动将用户的输入值转为数值类型 | |
| .trim | 自动将过滤用户输入的首位空白字符 | |
| .lazy | 在"change"时而非 "input"时更新 |
v-model的底层实现原理
<!-- 这三种方式都是双向绑定数据 -->
<!-- handle函数中的内容为：this.msg=event.target.value; -->
<input v-bind:value="msg" v-on:input="handle">
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
<input v-model="msg">
七、分支循环结构
① 分支结构
v-if
v-else
v-else-if
v-show
注意，分支结构渲染出来的实际上只有一个div：
<div id="app">
<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>比较差</div>
</div>
② v-if与v-show的区别
-
v-if控制元素是否渲染到页面
-
v-show控制元素是否显示（已经渲染到了页面），类似于display: none
-
如果我们需要频繁的显示和隐藏某个元素，那就使用v-show
-
如果我们希望元素渲染之后基本上变化比较少了，那就是用v-if
③ 循环结构
v-for遍历数组
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
data: {
list: ['apple', 'orange', 'banana']
}
如果是复杂的数据类型，例如：
data: {
myFruits: [{
ename: 'apple',
cname: '苹果'
},{
ename: 'orange',
cname: '橘子'
},{
ename: 'banana',
cname: '香蕉'
}]
}
<li v-for='item in myFruits'>
<span>{{item.ename}}</span>
<span>------</span>
<span>{{item.cname}}</span>
</li>
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
v-for遍历对象 里面的参数顺序是固定的，但是名字可以自定义
<div v-for='(value, key, index) in object'></div>
使用原生的JS遍历对象：
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
// 注意：for in循环不推荐遍历数组，只用于遍历对象
for (var key in obj) {
console.log(key, obj[key]);
}
v-if和v-for结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>
八.过滤器
1.过滤器
过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部，由"|"管道符进行调用，示例代码如下
在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：
2.私有过滤器和全局过滤器
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
九、侦听器
1.什么是watch侦听器
==watch侦听器==允许开发者监视数据的变化，从而针对数据的变化做特定的操作
const vm = new Vue({
el:'#root',
data:{
userName:'',
},
watch:{
//监听userName值得变化
//newVal是 "变化后的新值", oldval是"变化之前的旧值"
userName(newval,oldval){
console.log(newval,oldval)
},
}
})
2.immediate选项
默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch 侦听器 ==立即被调用==，则需要使用==immediate==选项。 示例代码如下:
const vm = new Vue({
el:'#root',
data:{
firstName:'',
},
watch:{
firstName(newval,oldval){
console.log(newval,oldval)
},
// 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
immediate: true
}
})
3.deep 深度监听 选项
如果 watch侦听是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep选项。 代码示例如下
const vm = new Vue({
el:'#root',
data:{
firstName:'',
numbers:{
a:0
}
},
watch:{
numbers:{
//深度监听事件
deep:true,
handler(){
console.log('numbers改变了')
}
},
}
})
4.监听对象单个属性的变化
如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch侦听器:
const vm = new Vue({
el:"#app",
data:{
info:{username:'admin'}
},
watch:{
'info.username':{
handler(newVal){
console.log(newVal)
}
}
}
})
