带你深入浅出Vue-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42222436/article/details/127546217

如果文章对你有帮助欢迎【关注❤️❤️❤️点赞👍👍👍收藏⭐⭐⭐】一键三连！一起努力！

前言

🏖️ Vue介绍

Vue 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是：Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

🏕️ 官网：https://cn.vuejs.org/

在这里插入图片描述

🏝️ Vue特点

遵循 MVVM 模式
编码简洁，体积小，运行效率高, 适合移动/PC 端开发
它本身只关注 UI，也可以引入其它第三方库开发项目
采用组件或模式，提高代码复用率，并且让代码更好的维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
命令式编码
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

🏝️ Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

<!-- 准备好一个容器 -->
<div id="app">
  {{ message }}
</div>

<script type="text/javascript" >
	//创建Vue实例
	var app = new Vue({
	  el: '#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
	  data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们可以写成一个对象。
	    message: 'Hello Vue!'
	  }
	})
</script>

🏝️ 模板语法

Vue模板语法有2大类：

插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>插值语法</h1>
		<h3>你好，{{name}}</h3>
		<hr/><hr/><hr/>
		<h1>指令语法</h1>
		<a :href="school.url" x="hello">点我去 {{school.name}} 学习</a>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#root',
		data:{
			name:'小客气',
			school:{
				name:'小可期（小客气）',
				url:'https://blog.csdn.net/weixin_42222436?spm=1000.2115.3001.5343',
			}
		}
	})
</script>

🏝️ 数据绑定

Vue 数据绑定的方式有两种：

单向绑定(v-bind)：数据只能从data流向页面；
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

注意：
双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

🏝️ data与el的2种写法

el有2种写法：
(1). new Vue时候配置el属性。
(2). 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

    // el的两种写法
	const v = new Vue({
		el:'#root', //第一种写法
		data:{
			name:'小客气'
		}
	})
	console.log(v)
	v.$mount('#root') //第二种写法

data有2种写法：
(1).对象式
(2).函数式

//data的两种写法
new Vue({
	el:'#root',
	//data的第一种写法：对象式
	data:{
		name:'小客气'
	} 
	//data的第二种写法：函数式
	data(){
		console.log('@@@',this) //此处的this是Vue实例对象
		return{
			name:'小客气'
		}
	}
})

我承认，我偷懒了，大家请自行注释代码，要不然会报错。

🏝️ MVVM模型

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

在这里插入图片描述

🏝️ 数据代理

数据代理就是：通过一个对象代理对另一个对象中属性的操作（读/写）

Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

🏝️ 事件处理

1、事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

2、Vue中的事件修饰符：

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 阻止默认事件（常用） -->
		<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
		<!-- 阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 修饰符可以连续写 -->
			<a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>
		</div>
		<!-- 事件只触发一次（常用） -->
		<button @click.once="showInfo">点我提示信息</button>

		<!-- 使用事件的捕获模式 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>
		<!-- 只有event.target是当前操作的元素时才触发事件； -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>
		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<ul @wheel.passive="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>

	</div>
</body>

<script type="text/javascript">
	new Vue({
		el:'#root',
		data:{
			name:'小客气'
		},
		methods:{
			showInfo(e){
				alert('同学你好！')
				// console.log(e.target)
			},
			showMsg(msg){
				console.log(msg)
			},
			demo(){
				for (let i = 0; i < 100000; i++) {
					console.log('#')
				}
				console.log('累坏了')
			}
		}
	})
</script>

3、Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行=> tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

注意：Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

<div id="root">
	<h2>欢迎来到{{name}}学习</h2>
	<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>

new Vue({
	el:'#root',
	data:{
		name:'小客气'
	},
	methods: {
		showInfo(e){
			console.log(e.target.value)
		}
	},
})

🏝️ 计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

注意：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	测试：<input type="text" v-model="x"> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
</div>

const vm= new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		x:'你好'
	},
	methods: {
		demo(){}
	},
	computed:{
		fullName:{
			//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
			//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
			get(){
				console.log('get被调用了')
				// console.log(this) //此处的this是vm
				return this.firstName + '-' + this.lastName
			},
			//set什么时候调用? 当fullName被修改时。
			set(value){
				console.log('set',value)
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}
	}
})

//简写
computed:{
	fullName(){
		// 默认调用get
		return this.firstName + '-' + this.lastName
	}
}

🏝️ 监视属性

监视属性watch：

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

<div id="root">
	<h2>今天天气很{{info}}</h2>
	<button @click="changeWeather">切换天气</button>
</div>

const vm = new Vue({
	el:'#root',
	data:{
		isHot:true,
	},
	computed:{
		info(){
			return this.isHot ? '炎热' : '凉爽'
		}
	},
	methods: {
		changeWeather(){
			this.isHot = !this.isHot
		}
	},
	watch:{
		isHot:{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}
		//简写
		isHot(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue,this)
		}
	}
})

vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})
//简写
vm.$watch('isHot', (newValue,oldValue)=>{
	console.log('isHot被修改了',newValue,oldValue,this)
})

扩展：
深度监视：
(1). Vue中的watch默认不监测对象内部值的改变（一层）。
(2). 配置deep:true可以监测对象内部值改变（多层）。
备注：
(1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2). 使用watch时根据数据的具体结构，决定是否采用深度监视。

🏝️ 绑定样式

class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。

🏝️ 条件渲染

v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
v-show
写法：v-show=“表达式”

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

🏝️ 列表渲染

v-for指令:

用于展示列表数据
语法：v-for=“(item, index) in xxx” :key=“yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<div id="root">
	<!--遍历数组 -->
	<ul>
		<li v-for="(p,index) of persons" :key="index">
			{{p.name}}-{{p.age}}
		</li>
	</ul>
	<!-- 遍历对象 -->
	<ul>
		<li v-for="(value,k) of car" :key="k">
			{{k}}-{{value}}
		</li>
	</ul>
<div/>

new Vue({
	el:'#root',
	data:{
		persons:[
			{id:'001',name:'张三',age:18},
			{id:'002',name:'李四',age:19},
			{id:'003',name:'王五',age:20}
		],
		car:{
			name:'奥迪A8',
			price:'70万',
			color:'黑色'
		}
	}
})

🏝️ 收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>
	1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
	2.配置input的value属性:
		(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
		(2)v-model的初始值是数组，那么收集的的就是value组成的数组
		
备注：v-model的三个修饰符：
			lazy：失去焦点再收集数据
			number：输入字符串转为有效的数字
			trim：输入首尾空格过滤

🏝️ 过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：
		1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
		2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
备注：
		1.过滤器也可以接收额外参数、多个过滤器也可以串联
		2.并没有改变原本的数据, 是产生新的对应的数据

🏝️ 内置指令

v-text 指令：
	1.作用：向其所在的节点中渲染文本内容。
	2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
		
		
v-html 指令：
	1.作用：向指定节点中渲染包含html结构的内容。
	2.与插值语法的区别：
				(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
				(2).v-html可以识别html结构。
	3.严重注意：v-html有安全性问题！！！！
				(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
				(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
				
				
v-cloak 指令（没有值）：
	1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
	2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
		
		
v-once 指令：
	1.v-once所在节点在初次动态渲染后，就视为静态内容了。
	2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
			
			
v-pre指令：
	1.跳过其所在节点的编译过程。
	2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

🏝️ 生命周期

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或组件实例对象。

在这里插入图片描述

常用的生命周期钩子：
	1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
	2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例
	1.销毁后借助Vue开发者工具看不到任何信息。
	2.销毁后自定义事件会失效，但原生DOM事件依然有效。
	3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

🏝️ Vue组件

Vue中使用组件的三大步骤：
	一、定义组件(创建组件)
	二、注册组件
	三、使用组件(写组件标签)

一、如何定义一个组件？
	使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options
	几乎一样，但也有点区别；
	
	区别如下：
			1.el不要写； 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
			2.data必须写成函数； 避免组件被复用时，数据存在引用关系。
			
	备注：使用template可以配置组件结构。

二、如何注册组件？
			1.局部注册：靠new Vue的时候传入components选项
			2.全局注册：靠Vue.component('组件名',组件)

三、编写组件标签：
			<school></school>

几个注意点：
	1.关于组件名:
		一个单词组成：
					第一种写法(首字母小写)：school
					第二种写法(首字母大写)：School
		多个单词组成：
					第一种写法(kebab-case命名)：my-school
					第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
		备注：
				(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
				(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

	2.关于组件标签:
		第一种写法：<school></school>
		第二种写法：<school/>
		备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

	3.一个简写方式：
		const school = Vue.extend(options) 可简写为：const school = options

关于VueComponent：
	1.school组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的。

	2.我们只需要写<school></school>，Vue解析时会帮我们创建school组件的实例对象，
		即Vue帮我们执行的：new VueComponent(options)。

	3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

	4.关于this指向：
		(1).组件配置中：
		  data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是
		  【VueComponent实例对象】。
		 
		(2).new Vue(options)配置中：
		  data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是
		  【Vue实例对象】。

	5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
		Vue的实例对象，以后简称vm。