<div id="root" class="demo">
    {{name}}  
    {{age}}
</div>	
<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
	new Vue({
		//el:'.demo'
		el:'#root',
		data:{
			name: '做一只猫',
			age: 20
	    }
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- 准备好一个容器-->
<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>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el:'#root',
		data:{
			name:'Tom'
		}
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//第一种写法
new Vue({
	el:'#root', 
	data:{
		name:'Tom'
	}
})
//第二种写法
Vue vm = new Vue({
	el:'#root', 
	data:{
		name:'Tom'
	}
})
console.log(v)		 	// 输出Vue实例，不是Vue构造函数
vm.$mount('#root')
// 定时器，一秒钟后执行
setTimeout(() => {
	vm.$mount('#root')
},1000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

//(2) 函数式
new Vue({
	el:'#root',
	//data的第二种写法：函数式
	//不能是箭头函数，否则this指向windows
	data:function(){
		console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数
		return{
			name:'Tom'
		}
	}
	//简写
	data(){
		console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数
		return{
			name:'Tom'
		}
	}
})
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

<script type="text/javascript" >
let person = {
  	name:'张三',
  	sex:'男',
  	// age: '18',
  }
//定义person对象的age属性
Object.defineProperty(person,'age',{
  	// value:18,
  	// enumerable:true, 		//控制属性是否可以枚举，默认值是false
  	// writable:true,	 		//控制属性是否可以被修改，默认值是false
  	// configurable:true 		//控制属性是否可以被删除，默认值是false
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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
   		}
})

   		// Object.keys() 传入一个对象做为参数,可以把传入的属性名，提取出来作为一个数组
   		// console.log(Object.keys(person))

   		console.log(person)
</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

<script type="text/javascript" >
   let obj = {x:100}
   let obj2 = {y:200}
//通过obj2对象控制obj.x的读写
   Object.defineProperty(obj2,'x',{
   	get(){
   		return obj.x
   	},
   	set(value){
   		obj.x = value
   	}
   })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue({
		el:'#root',
		data:{
			name:'尚硅谷',
			address:'宏福科技园'
		}
	})
</script>
1
2
3
4
5
6
7
8
9
10

<div id="root">
	<h2>欢迎来到{{name}}学习</h2>
	<button v-on:click="showInfo">点我提示信息</button>
	//$event为占位符
	<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el:'#root',
		data:{
			name:'Tom',
		},
		methods:{
			//1 不传参
			showInfo1(event){
				alert('同学你好！')
			//2 传参
			showInfo1(event){
				console.log(event.target.innerText)
				alert('同学你好！')
			},
			//3 传参和事件
			showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
})
</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

<a href="https://blog.csdn.net/gh_xiaohe" @click.prevent="showInfo">点我提示信息</a>
1

<div id="root">
	<h2>欢迎来到{{name}}学习</h2>
   <!-- 阻止事件冒泡（常用） -->
	<div class="demo1" @click="showInfo">
		<button @click.stop="showInfo">点我提示信息</button>
	</div>
</div>
1
2
3
4
5
6
7

<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
1
2

<div id="root">
	<h2>欢迎来到{{name}}学习</h2>
	
	<!-- 使用事件的捕获模式 -->
	<div class="box1" @click.capture="showMsg(1)">
			div1
		<div class="box2" @click="showMsg(2)">
			div2
		</div>
	</div>
</div>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	new Vue({
		el:'#root',
		data:{
			name:'Tom'
		},
		methods:{
			showMsg(msg){
				console.log(msg)
			},
	})
</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

<div id="root">
	<h2>欢迎来到{{name}}学习</h2>

	<!-- 只有event.target是当前操作的元素时才触发事件； -->
	<div class="demo1" @click.self="showInfo">
		<button @click="showInfo">点我提示信息</button>
	</div>

</div>

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

	new Vue({
		el:'#root',
		data:{
			name:'Tom'
		},
		methods:{
			showInfo(e){
				// e.preventDefault()// 阻止默认行为  Vue中不用亲自书写
             alert('同学您好！')
			},
	})
</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

	<script type="text/javascript" src="../js/vue.js"></script>
	<style>
		*{
			margin-top: 20px;
		}
		.list{
			width: 200px;
			height: 200px;
			background-color: peru;
			overflow: auto;
		}
		li{
			height: 100px;
		}
	</style>
</head>
<body>

	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>


		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<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 //阻止 vue 在启动时生成生产提示。

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

<div class="demo1" @click="showInfo">
	<!-- 修饰符可以连续写 -->
	<a href="https://blog.csdn.net/gh_xiaohe" @click.prevent.stop="showInfo">点我提示信息</a>
</div>
1
2
3
4

if（e.keyCode !== 13） return Vue 中 @keyup.enter=“”
1

<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		//1 按下回车
		<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		//2 使用 CapsLock 切换大小写按键 多个单词使用 caps-lock
		//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

3.4 计算属性 computed

姓名案例
1. 插值语法实现

<div id="root">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   全名：<span>{{firstName}}-{{lastName}}</span>
</div>
<script type="text/javascript">
   Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

   new Vue({
   	el:'#root',
   	data:{
   		firstName:'张',
   		lastName:'三'
   	}
   })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.methods实现
数据发生改变Vue一定会重写解析模板，并更新数据

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三'
	},
	methods: {
		fullName(){
			console.log('@---fullName')
			return this.firstName + '-' + this.lastName
		}
	},
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.计算属性实现

计算属性：

1. 定义：要用的属性不存在，要通过已有属性计算得来
2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter
3. get函数什么时候执行？
   (1) 初次读取时会执行一次。
   (2) 当依赖的数据发生改变时会被再次调用。
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5. 备注：
   - 计算属性最终会出现在vm上，直接读取使用即可。
   - 如果计算属性要被修改，那必须写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/>
</div>

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

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三'
		},
		methods: {
		},
		computed:{
			fullName:{ 
				// 计算过程配置成一个对象,里面要放到有一个get()
				// get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
				// get什么时候调用？
				// 1. 初次读取fullName时
				// 2. 所依赖的数据发生变化时
				get(){
					console.log('get被调用了')
					// console.log(this) //此处的this是vm
					return this.firstName + '-' + this.lastName
				},

				// set 不是必须写的, 如果确定数据只读,就可以不用书写set 
				// set什么时候调用? 当fullName被修改时。
				set(value){
					console.log('set',value)
					// 张 - 三
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
	})
</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

3.计算属性简写(只读时可以使用)
计算属性更多的情况是不修改，呈现给用户看：

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

computed:{
	//简写
	fullName(){
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	}
}
1
2
3
4
5
6
7

四、监视属性（侦听属性） watch

​ immediate:true, //初始化时让handler调用一下
​ deep:true //深度监视

4.1 天气案例（没用到监视属性）

<div id="root">
	<h2>今天天气很{{info}}</h2>
	<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
	<!-- <button @click="isHot = !isHot">切换天气</button> -->
	<button @click="changeWeather">切换天气</button>
</div>
<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>
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

4.2 监视属性watch（也可以监视计算属性）

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

//(1) new Vue时传入watch配置
<div id="root">
	<h2>今天天气很{{info}}</h2>
	<button @click="changeWeather">切换天气</button>
</div>
<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){ // 参数：newValue,oldValue 可以查看监视前的数值,和修改后的数值
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} 
	})
	
	//(2) 通过vm.$watch监视
	// 创建完实例后  第一次参数 'isHot'：要监视的对象 , 第二个参数 配置对象 （同上）
 	// 二者的区别：在创建时就明确监视对象方式一、不明确时方式二    
		vm.$watch('isHot',{
			immediate:true, // 初始化时让handler调用一下
			// handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
</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

4.3 深度监视

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

• ① 只监测a的变化 不监测b
  ​ numbers.a会报错，应还原为 最初的写法 ‘numbers .a’ , 正常的key 都是 ’ key ’ 简写 key 多个属性时 ‘key.s’ 误区

<div id="root">
	<h2>今天天气很{{info}}</h2>
	<button @click="changeWeather">切换天气</button>
	<hr/>
	<h3>a的值是:{{numbers.a}}</h3>
	<button @click="numbers.a++">点我让a+1</button>
</div>

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

	const vm = new Vue({
		el:'#root',
		data:{
			isHot:true,
			numbers:{
				a:1,
				b:1,
			}
		},
		computed:{
			info(){
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather(){
				this.isHot = !this.isHot
			}
		},
		watch:{
				// 监视多级结构中某个属性的变化
			'numbers.a':{
				handler(){
					console.log('a被改变了')
				}
			},
	}
</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

• ② 监视 a 和 b的变化（即监视整个number） 配置项 deep:true 开启深度监测

	methods: {
	changeWeather(){
			this.isHot = !this.isHot
		}
	},
	//监视多级结构中所有属性的变化
	numbers:{
		//配置deep
		deep:true,
		handler(){
			console.log('numbers改变了')
		}
	}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.4 监视属性简写

要求： 不需要配置项时，可以使用简写

① watch 方式一的正常写法

watch:{
   //正常写法
   isHot:{
   	handler(newValue,oldValue){
   		console.log('isHot被修改了',newValue,oldValue)
   	}
   }, 

}
1
2
3
4
5
6
7
8
9

② watch 方式一的简写 不允许书写成箭头函数

watch:{
	//简写
	isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	} 
}
1
2
3
4
5
6

③ watch 方式二的正常写法

		//正常写法
vm.$watch('isHot',{
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
}) 
1
2
3
4
5
6

④ watch 方式二的简写 不允许书写成箭头函数

//简写
vm.$watch('isHot',function(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
}) 
1
2
3
4

4.5 watch 和 computed的区别

computed和watch之间的区别

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

两个重要的小原则

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

① watch实现天气案例

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

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

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三',
			fullName:'张-三'
		},
		watch:{
			firstName(newValue){
				console.log(this)
				this.fullName = newValue + '-' + this.lastName
			},
			lastName(newValue){
				this.fullName = this.firstName + '-' + newValue
			}
		}
	})
</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

② 需要在姓名改变时，延迟1s后实现才改变全名，只能使用watch
定时器 setTimeout 所指定的函数不是 Vue 所管理的函数，要写成箭头函数

watch:{
	firstName(newValue){
		setTimeout(()=>{ // 定时器,延迟器  
			console.log(this)
			this.fullName = newValue + '-' + this.lastName
		},1000);
	},
	lastName(newValue){
		this.fullName = this.firstName + '-' + newValue
	}
}
1
2
3
4
5
6
7
8
9
10
11

• ③ computed计算属性不能开启异步任务
  因为其实现靠的是return 返回值，此时把renturn的返回值返回给了 setTimeout，则fullName没有返回值

computed:{
	 fullName:{
		setTimeout(()=>{
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		},1000)
	} 
}
1
2
3
4
5
6
7
8

五、class和style绑定（绑定样式）

绑定样式：

1. class样式

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

2. style样式

• :style="{fontSize: xxx}" 其中xxx是动态值
• :style="[a,b]" 其中a、b是样式对象
• 样式对象 的 key 是固定的，不能瞎写，如：red

5.1 class绑定

• 基本使用

<div id="root">
	<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
	<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
</div>

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

	const vm = new Vue({
		el:'#root',
		data:{
			name:'Tom',
			mood:'normal',
		},
		methods: {
			changeMood(){
				this.mood = 'happy'
			}
		},
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 数组写法
  div 初始有 basic 样式，日后可能增加样式多少个不确定

<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
const vm = new Vue({
	el:'#root',
	data:{
		name:'Tom',
		mood:'normal',
            classArr:['text1','text2','text3'],
	},
})
1
2
3
4
5
6
7
8
9

• 对象写法
  div 初始有 basic 样式 切换text1 和 text2 （切换的个数确定，名字也确定，不确定的是到底使用不使用）

<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
const vm = new Vue({
	el:'#root',
	data:{
        classObj:{
			text1:false,
			text2:false,
		},
	},
})
1
2
3
4
5
6
7
8
9
10

5.2 绑定style样式

• ① 常规写法

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

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

   const vm = new Vue({
   	el:'#root',
   	data:{
            sytleObj:{
   			height: 100px;
   			weight: 100px;
   		},
   	},
   })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 数组写法（很少用）

<div id="root">

	<!-- 绑定style样式--数组写法 -->
	// 方法1 两个对象用数组引用
	<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
	// 方法2 在定义时就将两个对象定义为一个数组
	 <div class="basic" :style="[styleArr]">{{name}}</div>

</div>

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

	const vm = new Vue({
		el:'#root',
		data:{
			// 方法1
             styleObj:{
				fontSize: '40px',
				color:'red',
			},
             styleObj2:{
				backgroundColor:'orange' // 背景颜色
			},
			// 方法2
			styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
		},
	})
</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

六、条件渲染

条件渲染：

1. v-show

• 写法：v-show=“表达式”
• 适用于：切换频率较高的场景。
• 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

2. v-if

• 写法：
  (1) v-if=“表达式”
  (2) v-else-if=“表达式”
  (3) v-else=“表达式”
• 适用于：切换频率较低的场景
• 特点：不展示的DOM元素直接被移除
• 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

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

① 让div 隐藏 v-show

不仅可以可以写 boolean 值 v-show=“false”
也可以写表达式 用表达式的结果来进行判断 v-show=“1 === 1”
此时结构存在但是不显示

<div id="root">
	<!-- 使用v-show做条件渲染 -->
	<h2 v-show="false">欢迎来到{{name}}</h2>
	<h2 v-show="1 === 1">欢迎来到{{name}}</h2>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			name:'Tom',
			n:0
		}
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

② 使用 v-if进行条件渲染

<div id="root">
	<!-- 使用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>
</div>
1
2
3
4
5
6
7
8
9
10

③ v-if与template的配合使用

<template v-if="n === 1">	
	<h2>你好</h2>
	<h2>Tom</h2>
	<h2>北京</h2>
</template>
1
2
3
4
5

七、 列表渲染

v-for指令:

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

7.1遍历数组

① 接受一个参数

<div id="root">
	<!-- 遍历数组 -->
	<ul>
		<li v-for="p in persons" :key="p.id">
			{{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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

② 接受两个参数

<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<ul>
	<li v-for="(p,index) in persons" :key="index">
		{{p.name}}-{{p.age}}
	</li>
</ul>
1
2
3
4
5
6
7

7.2 遍历对象

<div id="root">
   	<!-- 遍历字符串 -->
   	<h2>测试遍历字符串（用得少）</h2>
   	<ul>
   		<li v-for="(char,index) in str" :key="index">
   			{{char}}-{{index}}
   		</li>
   	</ul>
</div>

   new Vue({
   	el:'#root',
   	data:{
   			car:{
   				name:'奥迪A8',
   				price:'70万',
   				color:'黑色'
   			},
   	}
   })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

7.3 遍历字符串（用得少）

<div id="root">
   	<!-- 遍历字符串 -->
   	<h2>测试遍历字符串（用得少）</h2>
   	<ul>
   		<li v-for="(char,index) in str" :key="index">
   			{{char}}-{{index}}
   		</li>
   	</ul>
</div>

   new Vue({
   	el:'#root',
   	data:{
   		str:'hello'
   	}
   })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7.4 遍历指定次数（使用少）

<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
   <li v-for="(number,index) in 5" :key="index">
   	{{index}}-{{number}}
   </li>
</ul>
1
2
3
4
5
6
7

7.5 key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用：
   key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
   随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2. diff算法对比规则：
   (1)旧虚拟DOM中找到了与新虚拟DOM相同的key：

   • 若虚拟DOM中内容没变, 直接使用之前的真实DOM
   • 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

   (2) 旧虚拟DOM中未找到与新虚拟DOM相同的key
   创建新的真实DOM，随后渲染到到页面

3. 用index作为key可能会引发的问题：

   • 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
     会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低（因为要对后续的dom重新新建）

4. 如果结构中还包含 输入类 的DOM：
   会产生错误DOM更新 ==> 界面有问题

5. 开发中如何选择key:

   • 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
   • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
     使用index作为key是没有问题的
   • 不写key值时，Vue会把的索引值inxdex自动作为key

例子引入 - 数组中添加一个老刘
添加的位置在数组的前面，会出现问题（索引为0，索引后移）；添加在数组的后面不会出现问题

<div id="root">
	<!-- 遍历数组 -->
	<h2>人员列表（遍历数组）</h2>
	<!-- @click.once 只点击一次 -->    
	<button @click.once="add">添加一个老刘</button>
	<ul>
		<li v-for="(p,index) in 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>
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

问题： 看起来好像老刘-40把张三-18顶下去了

解决方法： 使用 p.id 作为key

<div id="root">
	<!-- 遍历数组 -->
	<h2>人员列表（遍历数组）</h2>
	<!-- @click.once 只点击一次 -->    
	<button @click.once="add">添加一个老刘</button>
	<ul>
		<li v-for="(p,index) in persons" :key="p.id">
			{{p.name}}-{{p.age}}
			<input type="text">
		</li>
	</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

虚拟Dom的对比算法

index作为key产生的问题
1.diff首先对比生成的两个虚拟DOM 张三-18 和 老刘-30，发现不同，打个X
2.再对比两个input，发现相同打个X
3.再用相同的方法把三行都对比后，开始生成新的真实DOM
4.在这个新的真实DOM里，老刘-30是新的，但是input是沿用原来的，所以输入框内容包含“张三-18”
5.生成最后一个王五-20的时候，生成的input是新的，所以输入框内容为空

id作为key的作用
1.同样是对比两个虚拟DOM，但这一次有任何一个不同，内容都不会沿用
2.对比第一行，老刘-30 和 张三-18不同，在创建新的DOM时，直接创建新的内容 即老刘-30 空白input
3.对比其他行，都一样，所以都引用的原来的呢日用

7.6 列表过滤

1.watch方法过滤（少用）

//收集用户所输入的数据 v-model
<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实现
   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:[]  // 数组的元数据不能发生改变，把新数据交给 filPerons:[]
   	},
   	watch:{
   		keyWord:{
   			immediate:true,  // 不等发生改变时就调用了一次（否则一开始没有数据）
   			handler(val){
   				this.filPerons = this.persons.filter((p)=>{
                  		// 不包含返回 -1，包含返回第几位出现的索引，filter 不改变原来的数组，而会创建一个全新的数组
   					// 上面遍历时，就不能使用persions （不能改变元数据）而是使用 filPerons
   					// 一个字符里面，包不包含空格字符串 包含 返回索引是 0 不是 -1（即默认包含空字符串，位置为0）
   					return p.name.indexOf(val) !== -1
   				})
   			}
   		}
   	}
   })
</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

2.computed方法过滤（常用）

<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)=>{
               			// 返回filter 规定 返回过滤条件 
					return p.name.indexOf(this.keyWord) !== -1
				})
			}
		}
	}) 
</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

7.7 列表排序

<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是只要包含在其中的数据变了就会调用一次，这里sortType变化所以会调用
		computed:{
			filPerons(){
				const arr = this.persons.filter((p)=>{
					return p.name.indexOf(this.keyWord) !== -1
				})
				//判断一下是否需要排序
				if(this.sortType){
					// sort 改变原数组 p1 - p2 升序 p2 - p1 降序
					arr.sort((p1,p2)=>{
						return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
					})
				}
				return arr
			}
		}
	}) 
</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

八、Vue检测数据改变的原理

8.1 更新数据时遇到的一个问题

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:'男'}
	]
},
1
2
3
4
5
6
7
8

① 成功

methods: {
	updateMei(){
 		this.persons[0].name = '马老师' //奏效
 		this.persons[0].age = 50 		//奏效
 		this.persons[0].sex = '男' 		//奏效
	}
}
1
2
3
4
5
6
7

② 失败 数据已经修改成功，但是Vue 没有发现数据的改变

methods: {
	updateMei(){
		this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
	}
}
1
2
3
4
5

③ 成功（后面解释原因）

methods: {
	updateMei(){
		this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) //奏效
	}
}		
1
2
3
4
5

8.2 Vue监测数据改变的原理–对象

原理核心代码如下
相当于创建了一个function Observer(obj)，用这个方法为每一个对象赋setter和getter方法

<script type="text/javascript" >

	let data = {
		name:'尚硅谷',
		address:'北京',
	}

	// ① 创建一个监视的实例对象，用于监视data中属性的变化
	const obs = new Observer(data)	// 收到	Observer 实例对象  
	console.log(obs)	 

	// ④ 准备一个vm实例对象
	let vm = {}
	vm._data = data = obs

	// Observer 观察者	构造函数 作用: 创建一个，监视的实例对象 可以收到一个对象作为参数
	function Observer(obj){
		// ② 汇总对象中所有的属性形成一个数组
		const keys = Object.keys(obj)
		// ③ 遍历
		keys.forEach((k)=>{
			//这里的this 是 Observer 的实例对象，即obs
			Object.defineProperty(this,k,{ // 不直接动 data 数据，往this身上添加数据 
				get(){
					return obj[k] // 把传入的对象，身上对应的属性的值，交出去
				},
				set(val){ // 可以收到 所修改的值
					console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
					// 把传入 对象身上的key 所对应的那个属性 修改
					obj[k] = val
				}
			})
		})
	}
</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

8.3 Vue.set方法（Vue Api）

• 管理者想添加 Vue 尚不完善的功能
• 如：添加一个性别，当时性别有没有定义下来，随着用户的交互，代码的发现，需要性别

解决方式（两种方式）：

1. Vue.set(target,key,val) 在Vue身上

   • target 目标（往谁的身上添加属性）

   • key 什么属性

   • val 属性的值

   Vue.set(vm._data.student,'sex','男')

2. vm.$set(vm._data.student,‘sex’,‘男’) 在vm身上

   vm.$set(vm._data.student,'sex','女')

上面两种方法 _data均可省略

局限性

• 只能对对象属性用set
• 不能对Vue实例，或Vue实例的根数据对象用set，即不能直接往data里插一个新的数据
  添加一个功能点我给学生添加一个性别

<div id="root">
	<button @click="addSex">添加一个性别属性，默认值是男</button>
	<h2>姓名：{{student.name}}</h2>
	<h2 v-if="student.sex">性别：{{student.sex}}</h2>
</div>

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

const vm = new Vue({
	el:'#root',
	data:{
	},
	methods: {
		addSex(){
			// Vue.set(this.student,'sex','男')  或者
			this.$set(this.student,'sex','男')
		}
	}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

8.4 Vue监测数据改变的原理–数组

data:{
   	hobby:['抽烟','喝酒','烫头'],
   	friends:[
   		{name:'jerry',age:35},
   		{name:'tony',age:36}
   	]
   }
},
1
2
3
4
5
6
7
8

直接用下标修改会因为下图原因（因为数组保存的是个字符串，Vue不会对每个字符去设置一个getter和setter）

要修改数组要通过 Vue 默认修改数组的方法 (7个操作数组的方法)
（注：这些方法是将Array中的同名方法进行封装，在里面插入setter和getter）

• push 最后的位置新增一个元素

• pop 删除最后一个元素

• shift 删除第一个元素

• unshift 最前面添加一个元素

• splice 指定位置插入一个元素，或者删除一个元素，或者替换调一个元素

• sort 数组排序

• reverse 翻转数组

• filter 不影响原数组，但是还想使用filter 怎么办？

  • 把过滤生成的新数组，替换掉原来的数组

共同点：可以修改数组，引起数组的改变

8.5 Vue数据监测总结

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修改数组中的某个元素一定要用如下方法：
   - 使用这些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(){
					//filter不改变数组，所以要用新数组替换掉原数组
					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
88

九、收集表单数据 v-model

收集表单数据：

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

<!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">
				//trim去掉前后空格
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				//前一个number限制输入框只能输入数字，后一个.number使得更新进data的数据为number形式而不是string形式
				年龄：<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/>
				其他信息：
				//lazy 失去焦点，从textarea上离开则获取输入框中内容
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://blog.csdn.net/m0_51487301?spm=1000.2115.3001.5343">《用户协议》</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',
					//多选框在不写value的情况下默认收集checked属性，勾选一个返回true，同时因为双向绑定
					//其他多选框也会被影响为true，呈现打上了勾的效果
					//多选框默认一定要数组，否则如果也写成''，因为只能收集一个值，同上原因也会影响其他多选框的勾选
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					// stringify 穿串
					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
65
66
67
68
69
70
71
72

十、过滤器 filters

过滤器：

• 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
• 语法：
  1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
  2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
  3. 其他如 v-model 都不能用
• 备注：
  1. 过滤器也可以接收额外参数、多个过滤器也可以串联
  2. 并没有改变原本的数据, 是产生新的对应的数据
  3. 全局过滤器是filter，局部过滤器是filters，注意区分防止写错

案例：格式化时间戳

<!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>
			<!-- 1. 计算属性实现 -->
			<h3>计算属性实现,现在是：{{fmtTime}}</h3>
			<!-- 2. methods实现 -->
			<h3>methods实现,现在是：{{getFmtTime()}}</h3>
			<!-- 3. 过滤器实现 -->
			<h3>过滤器实现,现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参）一层一层传递 -->
			<!-- 多个过滤器之间可以串联 -->
			<!-- timeFormater的返回值作为参数传入mySlice中 -->
			<h3>过滤器实现（传参）,现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<!-- 过滤器 不仅可以使用在 插值语法中 v-bind 中可以使用 但是使用较少 -->
			<h3 :x="msg | mySlice">Tom</h3>
		</div>

		
		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</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:1658817898000, //时间戳
				msg:'你好，Tom'
			},
			computed: {
				fmtTime(){
					// return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
					return dayjs().format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					// return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
					return dayjs().format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器 只有自己的Vue 实例可以使用 下一个Vue实例不能使用
			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,world'
			}
		})
	</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