Vue.js从开始到入门（三）

（二）用Vue开发网页效果

1.内容绑定，事件绑定

v-text：

设置标签的文本值（textContent）

直接上代码，具体内容都在代码注释中。

		<div id="app">
			<!-- v-text 指令会覆盖h2标签中的任何内容，如第一个h2标签里的“小红”，就会被message所带的内容“小明所代替。” -->
			<h2 v-text="message">小红</h2>
			
			<!-- 这样写可以将message中的内容与h2标签中的内容拼接起来 -->
			<h2>{{message}}深圳</h2>
			
			<!-- v-text后边拼接表达式时，这么用 -->
			<h2 v-text="message+'!'"></h2>
			<h2>深圳{{message + "!"}}</h2>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"小明",
					info:"前端与移动教研"
				}
			})
		</script>

页面显示：

v-html：

设置标签的innerHTML
首先根据下边这段代码的页面效果看一下v-html和v-text的区别：

		<div id="app">
			<p v-html="content"></p>
			<p v-text="content"></p>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					// content:"小明"
					content:"<a href='http://www.baidu.com'>百度</a>"
				}
			})
		</script>

页面效果：

可以看出，当content的内容是一个链接时，二者的效果是完全不同的。点击页面效果中的 “百度”也会跳转到相应的链接。
tips

内容中有html结构会被解析为标签，而v-text指令无论内容是什么，只会解析为文本。解析文本使用v-text,解析html使用v-html。

v-on：

为元素绑定事件。

1. v-on:click：鼠标点击事件
2. v-on:mouseenter:鼠标悬停事件
3. v-on:dbclick:鼠标双击事件
4. 上述三种v-on指令都可以用 @ 来替换 “v-on:”

代码：

		<div id="app">
			<!-- 此处定义的是点击事件，用v-on:click实现 -->
			<input type="button" value="v-on指令" v-on:click="doIt" />
			<!-- 此处定义的是点击事件，用v-on的简写 @click 实现 -->
			<input type="button" value="v-on简写" @click="doIt" />
			<!-- 此处定义的是双击事件，用@dbclick实现 -->
			<input type="button" value="双击事件" @dblclick="doIt" />
			<!-- 每点击一次，就会调用一次changeFood，相应的，每次“西兰花”后边都会多一个“好好吃！！！” -->
			<h2 @click="changeFood">{{ food }}</h2>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					food:"西兰花"
				},
				//methods与data是平级的
				methods:{
					//定义一个方法  doIt
					doIt:function(){
						//定义一个弹出框，内容为 “做IT”
						alert("做IT");
					}
					changeFood:function(){
						this.food+="好好吃!!!"//得到data中的food关键字
					},
				},
			})
		</script>

页面效果：

这是点击三次 “西兰花” 之后的效果：

tips：

1.v-on指令的作用是：为元素绑定事件
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中
5.方法内部通过this关键字可以访问定义在data中的数据
## 计数器案例
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200905165513294.png#pic_center

计数器案例

1. data中定义数据，如：num=1
2. methods中添加两个方法：add（递增），sub（递减）
3. 使用v-text将num设置给span标签
4. 使用v-on将add，sub分别绑定给+，-按钮
5. 累加的逻辑：小于10累加，否则提示
6. 递减的逻辑：大于0递减，否则提示

代码如下：

<div id="app">
			<!-- 计数器功能区域 -->
			<div class="input-num">
				<button @click="sub">
					-
				</button>
				<span>{{ num }}</span>
				<button @click="add">
					+
				</button>
			</div>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//创建Vue实例
			var app = new Vue({
				el:"#app",
				data:{
					num:1
				},
				//methods与data是平级的
				methods:{
					add:function(){
						// console.log('add');
						if(this.num < 10){
							this.num++;
						}
						else{
							alert('别点啦，已经最大啦！');
						}
					},
					sub:function(){
						// console.log('sub');
						if(this.num > 0){
							this.num--;
						}
						else{
							alert('别点啦，已经最小啦！');
						}
					},
				},
					
			})
		</script>

页面显示：
小于0时：

大于0时：