Vue入门（三）Vue指令之内容和事件绑定

程序员文章站 2022-05-15 13:46:34

...

前言

本章讲解Vue的相关指令的学习，包括了内容绑定和事件绑定

方法

1.内容绑定之v-text

该指令的作用在于设置标签的文本值，相当于前面所看到的设值表达式（双大括号），但是也有些许不同。

应用实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title>Vue指令</title>
	</head>
	<body>
		<div id="app">
		  <h2 v-text="message"></h2>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
		</script>
	</body>
</html>

运行结果：

Vue入门（三）Vue指令之内容和事件绑定

相信大家已经发现了，这个不是和前面的插值表达式是一样的吗？到底它们有什么不同呢？

当我们使用v-text属性进行设值的话，上面示例中的h2标签之前不管有什么内容都将被替换掉，如果要想部分的显示，那么我们还是要使用插值表达式的，请看下面的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title>Vue指令</title>
	</head>
	<body>
		<div id="app">
		  <h2 v-text="message">I Love You!</h2>
		  <h2>{{message}} I Love You!</h2>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
		</script>
	</body>
</html>

运行结果如下：

Vue入门（三）Vue指令之内容和事件绑定

当然了，无论是v-text指令还是插值表达式，都是支持一些基本的js操作的，比如字符串的拼接，请看下面示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title>Vue指令</title>
	</head>
	<body>
		<div id="app">
		  <h2 v-text="message + ' I Love You!'"></h2>
		  <h2>{{message + " I Love You!"}}</h2>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
		</script>
	</body>
</html>

运行结果如下：

Vue入门（三）Vue指令之内容和事件绑定

2.内容绑定之v-html

该指令的作用在于设置标签的innerHTML，相信学过jq的同学应该不陌生，它的作用在于可以将文本解析为html的方式进行一个显示，这也是它和v-text的本质区别。

应用实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title>Vue指令</title>
	</head>
	<body>
		<div id="app">
		  <h2 v-html="message"></h2>
		  <h2>{{message}}</h2>
		  <h2 v-html="info"></h2>
		  <h2>{{info}}</h2>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!',
				info:'<a href="http://www.baidu.com">百度一下</a>'
			  }
			})
		</script>
	</body>
</html>

显示结果如下：

Vue入门（三）Vue指令之内容和事件绑定

我们发现，当显示基本内容的时候，v-text和v-html显示的效果其实是一样的。但是一旦显示html，那么v-html会将其解析为html语句进行显示，例如上面的百度一下。

3.事件绑定之v-on

该指令的作用在于为元素绑定常见的事件，如单击、双击、鼠标移入移出等，触发的方法绑定在vue实例的methods中

应用实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title>Vue指令</title>
	</head>
	<body>
		<div id="app">
		  <input type="button" value="事件绑定" v-on:click="text"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  },
			  methods:{
				  text:function(){
					  alert(this.message);
				  }
			  }
			})
		</script>
	</body>
</html>

运行结果如下：

当我们点击事件绑定按钮的时候，将出发text事件的方法，弹出message的值！

Vue入门（三）Vue指令之内容和事件绑定

当然了，每次我们为元素绑定事件的时候都需要写这个v-on:事件名比较繁琐，vue给我们提供了一个简便的写法，那就是@:事件名，请看如下示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title>Vue指令</title>
	</head>
	<body>
		<div id="app">
		  <input type="button" value="事件绑定" @click="text"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  },
			  methods:{
				  text:function(){
					  alert(this.message);
				  }
			  }
			})
		</script>
	</body>
</html>

这样可以和v-on:达到同样的效果！

Vue入门（三）Vue指令之内容和事件绑定

前言

方法

1.内容绑定之v-text

2.内容绑定之v-html

3.事件绑定之v-on

Vue学习之路8-v-on指令学习简单事件绑定之属性

Vue学习之路7-v-on指令学习之简单事件绑定