目录
上篇文章我们介绍了这章所学习的内容,这一节我们学习第一个指令:v-text
一、v-text指令语法介绍
v-text 这个指令的作用是:把数据设置给标签的文本值,也就是textContent这个属性
那么怎么使用它呢?首先我们准备被Vue实例挂载的div标签
接下来在div标签中内部添加一个标签,比如说 h2标签,如下图:
准备工作到这已经搞定,那么如何使用 v-text指令呢?
首先我们为它添加一个 v-text指令,其实就是一个属性,写的位置是标签的内部,
然后为它设置一个具体的数据属性,如:"message",
那么这个message数据属性从哪里来呢?它需要定义在data中
最终解析完毕以后,它会把data中message的值,直接替换给 h2标签的内部
但是这么做有一个缺点就是:无论 h2 标签内部有什么内容,它全部会被替换掉。
二、插值表达式
如果我只想要设置替换部分的内容,可以使用另外一种写法,
使用两个大括号的方式,在标签的内部进行设置,而这种写法也叫做插值表达式
官方提供的示例代码就是使用的这种写法,使用这种写法只有双大括号内部的值会被替换,
其他内容原封不动的被保留。
支持写表达式、单引号和双引号的使用
如果我们还想涉及到一些逻辑代码,它还支持写表达式,
我们来写个字符串的拼接,如:拼接一个感叹号
在插值表达式里面,我们单引号或者双引号都可以使用,因为两边并没有引号,
但是如果是我们的 v-text 指令行内的这种写法,两边因为已经用了双引号,
所以内部我们就只能使用单引号了。
三、实例代码测试
到这语法我们已经演示完毕,下面我们进行代码验证
1、v-text指令使用
(1)实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01_v-text指令使用</title>
</head>
<body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!-- 无论是message数据属性,还是info都可以,名字随自己定义,只要一一对应即可 -->
<h2 v-text="message"></h2>
<h2 v-text="info"></h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好程序员!",
info: "来自中国的"
}
})
</script>
</body>
</html>
(2)效果展示
无论是message数据属性,还是info都可以,名字随自己定义,只要一一对应即可
2、插值表达式_部分替换
(1)实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02_插值表达式_部分替换</title>
</head>
<body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2 v-text="message">哈哈哈</h2>
<h2 v-text="info">哈哈哈</h2>
<h2>{{info}}哈哈哈</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好程序员!",
info: "来自中国的"
}
})
</script>
</body>
</html>
(2)效果展示
你会发现前面两个的"哈哈哈",都被替换掉了,第三行插值表达式的没有被替换
3、v-text指令结合表达式_单双引号
(1)实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>03_v-text指令结合表达式_单双引号</title>
</head>
<body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2 v-text="message+"?""></h2>
<h2 v-text="message+'?'"></h2>
<h2 v-text="info+'?'"></h2>
<h2>{{info+'?'}}</h2>
<h2>{{info+"?"}}</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好程序员!",
info: "来自中国的"
}
})
</script>
</body>
</html>
(2)效果展示
v-text指令结合表达式,我们这里演示最简单的字符串拼接,如下图:
至于第一行显示不出来,是因为单双引号的使用问题
在插值表达式里面,我们单引号或者双引号都可以使用,因为两边并没有引号,
但是如果是我们的 v-text 指令行内的这种写法,两边因为已经用了双引号,所以内部我们就只能使用单引号了。
所以第一行显示不出来,其他行的显示正常