• 带你深入浅出Vue

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

    前 言

    🏖️ 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    🏝️ 模板语法

    Vue模板语法有2大类：

    1. 插值语法：
      功能：用于解析标签体内容。
      写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

    2. 指令语法：
      功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
      举例：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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    🏝️ 数据绑定

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

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

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

    🏝️ data与el的2种写法
    1. 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') //第二种写法 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. data有2种写法：
      (1).对象式
      (2).函数式
    //data的两种写法
new Vue({
	el:'#root',
	//data的第一种写法：对象式
	data:{
		name:'小客气'
	} 
	//data的第二种写法：函数式
	data(){
		console.log('@@@',this) //此处的this是Vue实例对象
		return{
			name:'小客气'
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

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

    🏝️ MVVM模型
    1. M：模型(Model) ：data中的数据
    2. V：视图(View) ：模板代码
    3. VM：视图模型(ViewModel)：Vue实例

    在这里插入图片描述

    🏝️ 数据代理

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

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

    1、事件的基本使用：

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

    2、Vue中的事件修饰符：

    1. prevent：阻止默认事件（常用）；
    2. stop：阻止事件冒泡（常用）；
    3. once：事件只触发一次（常用）；
    4. capture：使用事件的捕获模式；
    5. self：只有event.target是当前操作的元素时才触发事件；
    6. 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    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>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    🏝️ 计算属性
    1. 定义：要用的属性不存在，要通过已有属性计算得来。
    2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
    3. get函数什么时候执行？
      (1).初次读取时会执行一次。
      (2).当依赖的数据发生改变时会被再次调用。
    4. 优势：与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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    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]
			}
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    //简写
computed:{
	fullName(){
		// 默认调用get
		return this.firstName + '-' + this.lastName
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    🏝️ 监视属性

    监视属性watch：

    1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
    2. 监视的属性必须存在，才能进行监视！！
    3. 监视的两种写法：
      (1).new Vue时传入watch配置
      (2).通过vm.$watch监视
    <div id="root">
	<h2>今天天气很{{info}}</h2>
	<button @click="changeWeather">切换天气</button>
</div>

    • 1
    • 2
    • 3
    • 4
    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)
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

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

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

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

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

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

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

    2. v-show
      写法：v-show=“表达式”

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

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

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

    🏝️ 列表渲染

    v-for指令:

    1. 用于展示列表数据
    2. 语法：v-for=“(item, index) in xxx” :key=“yyy”
    3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
    <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/>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    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:'黑色'
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    🏝️ 收集表单数据
    若：，则v-model收集的是value值，用户输入的就是value值。

若：，则v-model收集的是value值，且要给标签配置value值。

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    🏝️ 过滤器
    定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    🏝️ 内置指令
    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.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    🏝️ 生命周期
    1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
    2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
    3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
    4. 生命周期函数中的this指向是vm 或 组件实例对象。

    在这里插入图片描述

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    🏝️ 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('组件名',组件)

三、编写组件标签：
			

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    关于VueComponent：
	1.school组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的。

	2.我们只需要写，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。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    感谢各位家人的观看喜欢的话点帮忙点赞👍👍👍哦

    写这篇文章的时候发现了一个比较香的东西，作为一个爱分享的笔者，分享给家人们！！

    拿去不谢

    https://emoji.muan.co/

  • 相关阅读:
    java性能优化实战：谈一谈服务性能衡量指标有哪些？
    2024双非网安捡漏华五0854经验分享
    如何轻松做好多项目管理？抓住这6点就够了
    （swjtu西南交大）数据库实验（概念数据库设计及逻辑关系转换）：音乐软件数据管理系统
    华为云云耀云服务器L实例评测｜教你搭建第一个Java程序
    Py之fasttext：fasttext的简介、安装、案例应用之详细攻略
    来自北大算法课的Leetcode题解：7. 整数反转
    推动智行生态融合！Flyme 迎来大动作，魅族与星纪时代布局初显
    mybatis-plus 操作json字段
    收录批量查询 网页收录批量查询数据并导出
  • 原文地址：https://blog.csdn.net/weixin_42222436/article/details/127546217