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

数据

  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>