Vue 本地应用目录
1. v-text 指令
- v-text 指令的作用时:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式
{{}}
可以替换指定内容 - 内部支持写表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
</head>
<body>
<div id="app">
<h2 v-text="message + '!' ">济南</h2>
<h2 v-text="info + '!' ">济南</h2>
<h2>{{ message + '!' }}济南</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello",
info: "Vue2"
}
})
</script>
</body>
</html>
运行结果:
2. v-html 指令
- v-html 指令的作用是:设置元素的 innerHTML
- 内容中有 HTML 结构会被解析为标签
- v-text 指令无论内容是什么,只会解析为文本
- 解析文本使用 v-text ,需要解析 HTML 结构使用 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
</head>
<body>
<div id="app">
<p v-html="message"></p>
<p v-text="message"></p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "<a href='https://cn.vuejs.org/'>Vue</a>"
}
})
</script>
</body>
</html>
运行结果:
3. v-on 指令
- v-on 指令的作用是:为元素绑定事件
- 事件名不需要写 on
- 指令可以简写为 @
- 绑定的方法定义在 methods 属性中
- 方法的内部通过 this 关键字可以访问定义在 data 中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{ food }}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "红烧肉"
},
methods: {
doIt: function () {
alert("Just do it");
},
changeFood: function () {
// console.log(this.food)
this.food += "好好吃!"
}
}
})
</script>
</body>
</html>
运行结果:
点击: