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>
<!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>举报
腾讯云开发者
