<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<!-- 插值表达式 -->
			<h3>{{msg}}</h3>
			<h3  v-text="msg"></h3>
			<!-- 渲染 -->
			<h3  v-text="h3Html"></h3>
			<!-- 直接渲染HTML标签 -->
			<h3 v-html="h3Html"></h3>
			<!-- 跳过预编译 显示标签体本身 -->
			<div v-pre>{{msg}}</div>
			<!-- 只渲染一次 -->
			<div v-once>{{once}}</div>
			<input name="once" v-model="once" /><br />
			{{once}}
		</div>
		<script src="../js/vue.js"></script>
		<script>		
			const App = new Vue({
				/* 指定区域 */
				el: "#app",
				// 定义属性
				data: {
					msg: "你好Vue",
					h3Html: "<h3>我需要HTML渲染展现</h3>",
					once: "我只能被渲染一次"
				}
			})
		</script>
	</body>
</html>

?页面结果：

修改属性值之后：

2 双向数据绑定

2.1 原理步骤

1.用户修改页面时,通过DOM的监听器感知用户的修改行为,之后通过虚拟DOM对象,第一时间更新Model中的属性.
2.当数据发生变化,由虚拟DOM根据数据绑定的规则,第一事件通知真实的DOM对象.至此页面数据发生变化.

2.2 格式

双向数据绑定: 实现了页面与数据的绑定. 页面变数据变 / 数据变页面变.

格式：v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<!-- 双向数据绑定 v-model
				1.数据端---页面
				2.页面-----数据
			   -->
			<input name="msg" v-model="msg"/><br>
			{{msg}}
			
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					msg: "数据随时修改"
				}
			})
		</script>	
	</body>
</html>

3 事件绑定

3.1 事件绑定

事件绑定 v-on

? ? ? ? 1.普通语法：v-on:click="函数/直接计算"

? ? ? ? 2.简化语法：v-on:可以简化为@

关于函数：如果函数没有参数的话，调用函数时可以不用加小括号()。

3.2 事件绑定案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<h3>数值：{{num}}</h3><br />
			<button v-on:click="num--">自减</button>
			<button @click="num++">自增</button>
			<!-- 函数没有参数可以省略括号 -->
			<button @click="addNum">加1</button>
			<button @click="xNum2">倍乘</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const App = new Vue({
				/* 指定区域 */
				el: "#app",
				// 定义属性
				data: {
					num: 100
				},
				methods: {
					addNum: function(){
						this.num++
					},
					// 函数简化形式
					xNum2(){
						this.num*=2
					}
				}
			})
		</script>
	</body>
</html>

3.3 结果显示

?点击事件：

4 按键触发事件

按键触发事件说明：用户通过输入数据，然后按下特殊的键位触发函数事件

4.1 语法

语法:
? ? ? ? 1.v-on:keydown="",按下触发
? ? ? ? 2.v-on:keyup="",弹起触发
? ? ? ? 3.v-on:keypress="",小键盘触发??????????????

常用按键：

????????.enter .tab
????????.delete (捕获“删除”和“退格”键)
????????.esc .space
????????.up .down .left .right

4.2 按键触发事件的案例

4.2.1 代码实现

需求：用户输入两个数字，输入完成后默认的运算方法是加法，如果用户按下了特殊键位，则实现对应的运算方法，如用户按下了←键位，则是使用乘法，并且对应的运算符+号变为*号。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键触发</title>
	</head>
	<body>
		<div id="app">
			<div id="">
				<input type="text" v-model="num1" v-on:keyup="addNum"/><br />
					<span>{{m}}</span><br />
				<input type="text" v-model="num2" v-on:keyup="addNum" v-on:keyup.up="addNum" v-on:keyup.down="subNum" v-on:keyup.left="xNum()" v-on:keyup.right="cNum()"/>
				<h3>结果:{{count}}</h3><br />
			</div>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const App = new Vue({
				/* 指定区域 */
				el: "#app",
				// 定义属性
				data: {
					m: "+",
					count: 0,
					num1: 0,
					num2: 0
				},
				methods: {
					addNum(){
						this.m= "+",
						this.count = parseInt(this.num1)+parseInt(this.num2)
					},
					subNum(){
						this.m= "-",
						this.count = parseInt(this.num1)-parseInt(this.num2)
					},
					xNum(){
						this.m= "*",
						this.count = parseInt(this.num1)*parseInt(this.num2)
					},
					cNum(){
						this.m= "/",
						this.count = parseInt(this.num1)/parseInt(this.num2)
					}
				}
			})
		</script>
	</body>
</html>

4.2.2?结果显示

4.3 v-on其它修饰符

4.3.1 .stop修饰符阻止冒泡事件

给事件加上.stop修饰符可以达到阻止冒泡事件的目的。

冒泡事件的概念：冒泡事件就是事件自下而上（自内而外）依次触发。简单来说在html里面就是假如标签内外都有事件，那么触发了标签最里面的事件后，标签外部的事件也会被触发

<div @click="num1++">
<!-- .stop停止冒泡 -->
<button @click="num1++">加1</button>
</div>

?如案例所示,button标签置于div标签之内,所以当点击button按钮的时候,会触发两个点击事件,会导致num+2,而不是+1,为了阻止此情况发生,则可以添加.stop修饰符来阻止冒泡事件.

<div @click="num1++">
<!-- .stop停止冒泡 -->
<button @click.stop="num1++">加1</button>
</div>

?4.3.2?.prevent修饰符阻止组件默认事件

给事件加上.prevent修饰符以达到禁止该组件的默认事件，比如在form里面的自带的submit提交按钮的默认事件就是向form的action属性发起请求

<div id="app">
  <form action="https://www.baidu.com">
    <input type="submit" value="提交">
  </form>
</div>

点击提交按钮就会向https://www.baidu.com发起请求

如果加上了.prevent修饰符后就会阻止该组件的默认事件了：

<div id="app">
  <form action="https://www.baidu.com">
    <!--阻止组件的默认事件，而使用自定义的事件-->
    <input type="submit" value="提交" @click.prevent="submit">
  </form>
</div>

这样点击按钮后就不会向action发起请求，而是执行用户自定义的submit方法，用户可以在这个方法里面自定义请求。

?4.3.3 .once修饰符只监听一次事件

只会触发第一次，避免重复触发

<div id="app">
  <!--加了.once修饰符后该按钮只会触发第一次，避免重复触发-->
  <button @click.once="btnClick">按钮</button>
</div>

?按钮只能点击一次,之后点击不会触发事件效果.

5 v-bind动态绑定

5.1 v-bind动态绑定属性

传统的img和a标签里的url都是直接写死的，但是开发中肯定不会写死，肯定是从服务器请求然后得到JSON字符串然后从中获取到对应的url存储到Model里面，这个时候就需要用到v-bind指令来将Model里面的url放到img或者a标签里，使得它们能够解析url。

<body>

<div id="app">
  <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      aHref: 'https://www.baidu.com',
      imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
    },
  });
</script>

</body>

5.2 v-bind动态绑定class(对象语法)

在vue里面可以实现动态绑定class，并且可以在class里面定义对象，对象里面采用key-value键值对的方式来确定这个属性是否生效（value必须是boolean类型），同时原来已有的class属性不会被覆盖，而是合并。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../webDemo/jquery-1.8.3.min.js"></script>
		<style>
			.red{
				background-color: red;
				width: 6.25rem;
				height: 6.25rem;
			}
			.blue{
				background-color: blue;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="url">百度</a>
			<div :class="{'red': flag1,'blue': flag2}">哈哈哈哈</div>
			<button @click="changeColor">切换</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const App = new Vue({
				el: "#app",
				data: {
					url: "http://baidu.com",
					colorClass: "red",
					flag1: true,
					flag2: false
				},
				methods: {
					changeColor() {
						this.flag1 = !this.flag1;
						this.flag2 = !this.flag2;
					}
				},
			});
		</script>
	</body>
</html>

效果展示:

5.3?v-bind动态绑定style(对象语法)?

v-bind指令也可以动态绑定style的样式：直接在style里利用属性名：属性值给style赋值,

假如value写死了的话就需要加上''单引号。也可以动态获取后端传的value：

<body>

<div id="app">
  <!--v-bind动态绑定style格式
  <p :style="{key(属性名):value(属性值)}"></p>-->
  <!--动态绑定下面的值-->
  <p :style="{'color':color,'fontSize':fontSize}">{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'Hello,Vue.js!',
      color: 'red',
      fontSize: '50px',
    },
  });
</script>

</body>

?5.4?v-bind的语法糖(简写)

常规写法:

<img v-bind:src="imgUrl" alt="">

语法糖:(直接将v-bind:替换成:)

?<img :src="imgUrl" alt="">

?6 computed计算属性

computed（计算好的，已经计算的）的属性就叫计算属性.要用computed计算属性的一个原因就是computed里面的属性是有缓存的，是可以提高运行效率的。而methods里的方法每调用一次就会执行一次,对于方法的重复调用效率就很低.

<body>
		<div id="app">
			<h3>数据展现:{{rev()}}</h3>
			<h3>数据展现:{{rev()}}</h3>
			<h3>数据展现:{{rev()}}</h3>
			<h3>数据计算:{{rever}}</h3>
			<h3>数据计算:{{rever}}</h3>
			<h3>数据计算:{{rever}}</h3>
			<input type="text" v-model="msg" />
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const App = new Vue({
				el: "#app",
				data: {
					msg: "acd",
					name: ""
				},
				methods: {
					rev(){
						console.log("方法执行")
						return this.msg.split("").reverse().join("")
						
					}
				},
				computed: {
					rever(){
						console.log("计算执行")
						return this.msg.split("").reverse().join("")
					}
				}
			})
		</script>
	</body>

效果显示:

7 v-for遍历对象里的元素

v-for不仅仅可以遍历数组、集合，还可以遍历对象中的属性,甚至还可以遍历出对象的属性名key,以及数组的下标index.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 遍历数组元素的内容与下标 -->
			<span v-for="(item,index) in array" v-text="index">~~{{item}}</span>
			<hr />
			<!-- 遍历数组里的对象的属性 -->
			<div v-for="user in users">
				<span v-text="user.id"></span>
				<span v-text="user.name"></span>
			</div>
			<hr />
			<!-- 遍历对象的属性值\属性\下标 -->
			<div v-for="(value,key,index) in user">
				<span>{{value}}~~~</span>
				<span>{{key}}~~~</span>
				<span v-text="index"></span>
			</div>
			<hr />
			<!-- 先遍历出数组里的对象,再遍历出对象里的属性下标/属性名/属性值 -->
			<div v-for="user in users">
				<span>{{user.id}}~~{{user.name}}</span>
				<div v-for="(value,key,index) in user">
					<span>"哈哈"{{index}}~~{{key}}~~{{value}}</span>
				</div>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const App = new Vue({
				el: "#app",
				data: {
					array: ["奥运","鸿星尔克","河南","金牌"],
					users: [{
						id: 100,
						name: "zzz"
					},{
						id: 101,
						name: "lll"
					}],
					user: {
						id: 111,
						name: "www",
						age: 20
					}
				}
			})
		</script>
	</body>
</html>

注意事项:这里的value只能在第一个参数位置，位置不能改变。

效果显示:

8 数组响应式方法

8.1 常用方法

1. push()：向尾部插入元素

        // 1.push：向尾部插入元素
        this.letters.push('e');//插入单个元素
        this.letters.push('e','x','a','m');//插入多个元素

2. pop()：从尾部移除元素

        // 2.pop：从尾部移除元素
        this.letters.pop();

3.?unshift()：向首部插入元素

        // 3.unshift：向首部插入元素
        this.letters.unshift('e');//插入单个元素
        this.letters.unshift('e','x','a','m');//插入多个元素

4.?shift()：从首部移除元素

        // 4.shift：从首部移除元素
        this.letters.shift();

5.?sort()：元素自动排序（按一定规则）

        // 5.sort：数组排序
        this.letters.sort();

6.?reverse()：元素反转

        // 6.reverse：数组反转
        this.letters.reverse();

7.?splice()：元素删除/插入/替换(重点)

splice方法有一个重载方法：

splice(start: number, deleteCount?: number): T[];
splice(start: number, deleteCount: number, ...items: T[]): T[];

start：指定元素开始的下标

deleteCount：指定要删除元素的个数

items：插入或者替换的多个元素

元素删除：

        //从数组下标为1的元素开始，删除2个元素,不传第三个参数
        this.letters.splice(1,2);

元素插入：（当第二个参数为0的时候代表插入元素）

        //在数组下标为1的元素后面插入多个元素
        this.letters.splice(1,0,'e','x','a','m');

元素替换：

        //在数组下标为1的元素后面的2个元素替换为多个元素
        this.letters.splice(1,2,'e','x','a','m');

其实我们可以理解成这三种操作实际上都是在对数组中的元素进行删除操作。当第二个参数有数字的时候代表要删除多少个元素，替换的时候我们也可以理解成先删掉元素再进行追加元素。当第二个参数为0的时候就代表不删除元素，然后直接进行追加元素。

**特别注意：**使用如下这种方法并不能响应式的改变数组元素：

this.letters[0]='example';

如果想要响应式的替换元素可以采用：

this.letters.splice(0,1,'example');

8.2 综合案例

8.2.1 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>数组操作</h1>
		<div id="app">
			输入框:<input type="text" v-model="msg" />
			<br><button @click="push">push</button>
					<button @click="pop">pop</button>
					<button @click="shift">shift</button>
					<button @click="unshift">unshift</button>
					<button @click="splice">splice</button><br>
					位置:<input type="number" v-model="index" /><br />
					长度:<input type="number" v-model="length" /><br />
			显示:<span v-for="value in array" align="center">
				{{value}}
			</span>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const App = new Vue({
				el: "#app",
				data: {
					array: ["a","b","c"],
					msg: "",
					index: null,
					length: null
				},
				methods: {
					push(){
						this.array.push(this.msg)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.msg)
					},
					splice(){
						this.array.splice(this.index,this.length,this.msg)
					}
				}
			})
		</script>
	</body>
</html>