Vue实例中的数据、事件和方法

最新推荐文章于 2022-04-19 15:51:00 发布

原创最新推荐文章于 2022-04-19 15:51:00 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了Vue.js的基本使用方法，包括插值表达式的应用、不同类型的文本绑定方式(v-text与v-html)以及事件绑定(v-on)的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据

vue 插值表达式: {{变量名}}

除了插值表达式，可以改变dom之外，Vue 还提供类一些指令，操作dom.

例如：v-text(会进行一次转义，相比与v-html), v-html

<!DOCTYPE html>
<html>
<head>
	<title>vueTest</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<h1>hello {{msg}}</h1>
		<h2>number is {{number}}</h2>
		<h2 v-text="number"></h2>
		<h2 v-html="number"></h2>
		<div v-text="content"></div>
		<div v-html="content"></div>
		
	</div>

	<script >
		new Vue({
			el: "#root",
			data: {
				msg: "world",
				number: 12345,
				content: "<strong>hello</strong>"
			}
		})
	</script>
</body>
</html>

事件

Vue 给一个标签绑定事件

Vue 模版指令： v-on:事件名称 , v-on: 可以简写为“@”

<!DOCTYPE html>
<html>
<head>
	<title>vueTest</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div @click="handleClick">{{msg}}</div>
		<!-- <div v-on:click="handleClick">{{msg}}</div> -->
		
	</div>

	<script >
		new Vue({
			el: "#root",
			data: {
				msg: "hello"
			},
			methods: {
				handleClick: function(){
					this.msg = "world";
				}
			}
		})
	</script>
</body>
</html>