快速入门Vue第一天：Vue本地应用 v-on,v-html,v-text...

本文链接：https://blog.youkuaiyun.com/a597934448/article/details/107073240

文章目录

- 本地应用

本地应用

即通过Vue实现常见的网页效果。学习Vue指令，以案例巩固知识点，Vue指令是指v-开头的一组特殊语法。

1、v-text指令

设置标签的文本值（textContent）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3 v-text="message">被替换了</h3>
			<h3>{{message}}差值表达式写法</h3>
			
			<h3 v-text="message+'!'">被替换了</h3>
			<h3>{{message+'！！！'}}差值表达式写法</h3>
			
			</div>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"Text",
			}
		})
	</script>
	</body>
</html>

效果如图：
v-text效果图

v-text指令的作用是：设置标签的内容（textContent）。
默认写法会替换全部的内容，使用差值表达式{{}}可以替换指定内容。
内部支持表达式。

2、v-html

设置标签的innerHtml。

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

效果如图：
v-html效果

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

3、v-on

会元素绑定事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>点击一下加一个感叹号</p>
			<input type="button" value="v-on指令" v-on:click="changeName">
			<input type="button" value="v-on简写" @click="changeName">
			<p v-text="Name"></p>
			</div>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				Name:"程序员",
			},
			methods:{
				changeName:function(){
					console.log(this.Name)
					this.Name+="!"
				}
			}
		})
	</script>
	</body>
</html>