Vue.js前端开发基础及项目化应用（微课版）最新章节_古凌岚著

2.2 单向绑定

数据绑定分为单向和双向两种，其中单向绑定指的是数据改变会带动视图更新，但视图改变不会影响数据；双向绑定则是指数据与视图相互影响。Vue提供的单向绑定指令较多，表2-1中列出了常用的单向绑定指令。本节主要介绍用于单向绑定的插值表达式、v-text、v-htm和v-bind指令的用法，其余单向绑定指令会在后续小节逐一讲解。

微课视频

表2-1　常用的单向绑定指令

1. 插值表达式

前面我们已了解到插值表达式不是指令，但它也可用于单向绑定。插值表达式用于引用响应式数据，其语法为{{JavaScript表达式}}，通常该表达式为响应式数据。

下面通过一个例子来演示使用插值表达式实现单向绑定的过程。

【例2-2】 插值表达式应用示例。

（1）创建2-2.html文件，程序代码如下：

<head>
　　　　　　<meta charset="utf-8">
　　　　　　<title>第一个Vue应用程序</title>
　　　　　　<!--引入Vue库文件-->
　　　　　　<script src="https://unpkg.com/vue@next"></script>
　　　</head>
　　　<body>
　　　　　<!--挂载点-->
　　　　　< div id="app">
　　　　　　学生：{{student.name}}
　　　　　</div>
　　　</body>
　　　<script type="text/j avascript">
　　　　　　const RootComponent = { //创建根组件
　　　　　　　data () {
　　　　　　　　return {
　　　　　　　　　student: {
　　　　　　　　　　name:'zhangsan',
　　　　　　　　　　email:'zs@qq.com'
 　　　　　　　}
　　　　　　}
　　　　}
　　}
　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　vueApp.mount("#app") //挂载处理
</script>

（2）运行程序，在浏览器页面上会显示信息“学生：zhangsan”。

（3）代码分析如下。

① HTML代码中head元素中引入了Vue库文件，这是Vue应用程序编写与运行的前提，本单元～单元9的示例中均会编写同样的代码段，之后的示例中将不再重复列出。

② JavaScript代码中data选项定义了student对象及其name和email属性。HTML代码中插值表达式{{student.name}}引用了student对象的name属性，表达式执行结果为该属性值。也就是说，student对象name属性值的变化会引起id为app的div元素内容的变化。

2. v-text

v-text指令通过其表达式引用响应式数据，并将该数据渲染到指定DOM元素中。v-text的作用与插值表达式的是类似的，区别在于它会直接替换DOM元素的整个内容，在渲染数据较多或网速过慢的情况下，不会出现插值闪烁现象，因而渲染效果会更好。v-text指令语法为v-text="JavaScript表达式"，其中v-text为DOM元素的新属性，JavaScript表达式通常是响应式数据。

下面通过一个例子演示v-text指令的具体应用方法。

【例2-3】 v-text应用示例。

（1）创建2-3.html文件，程序代码如下：

<body>
　　　　　　<!--挂载点-->
　　　　　　<div id="app">
　　　　　　　<span v-text="message"></span>
　　　　　　</div>
　　　　</body>
　　　<script type="text/j avascript">
　　　　　const RootComponent = { //创建根组件
　　　　　　data () {
　　　　　　　return {
　　　　　　　　message: '<h3>This is HTML content</h3>'
　　　　　　　}
　　　　　}
　　　}
　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　vueApp.mount("#app") //挂载处理
　</script>

（2）运行程序，浏览器页面上显示信息“<h3>This is HTML content</h3>”。

（3）代码分析：HTML代码中v-text指令为span元素的新属性，该属性引用了JavaScript代码中data选项定义的message字符串，并将message中的内容直接填充到span元素中。

3. v-html

v-html指令通过其表达式引用响应式数据，将该数据作为HTML代码，并在解析后将其渲染到DOM元素中。v-html指令语法为v-html="JavaScript表达式"，其中v-html为DOM元素的新属性，JavaScript表达式与v-text中的类同。

下面通过一个例子来演示使用v-html指令实现单向绑定的过程。

【例2-4】 v-html应用示例。

（1）创建2-4.html文件，程序代码如下：

<body>
　　　　　<!--挂载点-->
　　　　　<div id="app">
　　　　　　<span v-html="message"></span>
　　　　　</div>
　　　　</body>
　　　　<script type="text/j avascript">
　　　　　　　const RootComponent = { //创建根组件
　　　　　　　data () {
　　　　　　　　return {
　　　　　　　　　　message: "<h3>This is HTML content</h3>"
　　　　　　　　}
　　　　　　　}
　　　　　}
　　　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　　　vueApp.mount("#app") //挂载处理
　　</script>

（2）运行程序，浏览器页面上显示信息“This is HTML content”，且字体为h3标题样式。

（3）代码分析：HTML代码中v-html为span元素的新属性，该属性引用了JavaScript代码中data选项定义的message字符串，其中的HTML代码被浏览器解析后填充到span元素中。

4. v-bind

v-bind指令用于绑定DOM元素的任意属性，通过引用响应式数据控制该属性的变化。v-bind指令语法为v-bind:属性名= "JavaScript表达式"，其中“v-bind:”可简写为“:”，属性名为DOM元素的属性名，JavaScript表达式与v-text中的类同。

下面通过两个例子来演示使用v-bind指令绑定常见属性的方法。

【例2-5】 使用v-bind绑定HTML链接（a）、图像（img）元素属性的示例。

（1）创建2-5.html文件，程序代码如下：

<body>
　　　　　　<!--挂载点-->
　　　　　　<div id="app">
　　　　　　　　<a v-bind:href="url">Vue官网</a><br/>
　　　　　　　　<img v-bind:src="path"/>
　　　　　</div>
　　　</body>
　　<script type="text/j avascript">
　　　const RootComponent = { //创建根组件
　　　　data () {
　　　　　return {
　　　　　　url: 'https://cn.vuej s.org/',
　　　　　　path: './vueIcon.ico'
　　　　　}
　　　　}
　　}
　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　vueApp.mount("#app") //挂载处理
　　</script>

（2）运行程序，浏览器页面上显示“Vue官网”链接以及Vue图标。当单击链接时，页面跳转至Vue官网主页面。

（3）代码分析如下。

① HTML代码中v-bind:href="url"表示v-bind绑定的是href属性，url是JavaScript代码中data选项定义的数据，该语句可使得a元素的跳转目标由url来指定。在实际开发中，我们可以利用v-bind绑定href属性动态地设置链接地址。

② 类似地，v-bind:src="path"表示v-bind绑定的是src属性，path是data选项定义的数据，该语句可使得img元素中的图片源由path属性来指定。在实际开发中，图片通常源于请求返回的数据，利用v-bind就可以按照返回数据设置不同图片的路径。

【例2-6】 v-bind绑定class属性的示例。（1）创建2-6.html文件，程序代码如下：

　<body>
　　　　<!--挂载点-->
　　　　<div id="app">
　　　　　　<h4 class="gray thin">未采用v-bind绑定样式</h4>
　　　　　　<h4 v-bind:class="{gray:true, thin:isActive}">1.使用对象进行v-bind绑定样式
　　　　　　</h4>
　　　　　　<h4 v-bind:class="['gray', 'thin']">2.使用数组进行v-bind绑定样式</h4>
　　　　　　<h4 v-bind:class="['gray', {'thin': isActive}]">3.在数组中嵌入对象进行v-bind
　　　　　　绑定样式</h4>
　　　　　　<h4 v-bind:class="['gray', isActive?'thin':'']">4.在数组中使用三元表达式进行
　　　　　　v-bind绑定样式</h4>
　　　</div>
　　　</body>
　　　<script type="text/j avascript">
　　　　　　const RootComponent = { //创建根组件
　　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　isActive: false
　　　　　　　}
　　　　　}
　　　}
　　　const vueApp = Vue.createApp(RootComponent) //创建Vue应用实例
　　　vueApp.mount("#app") //挂载处理
　　</script>
　　<style>
　　　. gray{
　　　　　color: rgb(209, 206, 206);
　　}
　　. thin{
　　　　font-weight: 200;
　　}
</style>

（2）运行程序，浏览器页面上显示的运行结果如图2-4所示。

图2-4　例2-6运行结果

（3）代码分析：这里展示了v-bind绑定class属性的4种方式。首先明确data选项定义的isActive值为false，然后对照图2-4和图2-5来分析代码：方式1使用对象进行绑定，语句v-bind:class="{gray:true, thin:isActive}"中，{gray:true, thin:isActive}对象的每个属性都是一个class，属性值是布尔表达式的执行结果，为true时当前class生效，因此，这条语句的执行结果是仅class为gray的样式类生效；方式2使用数组进行绑定，每个数组元素都是class，默认有效；如果需要动态设置，可以通过嵌入对象来实现，也就是方式3；还可以采用三元表达式，即方式4。总之，v-bind采用布尔类型值来控制某个class是否生效。

图2-5　经浏览器解析后的HTML页面结构