Vue 指令系列文章：
《Vue插值：双大括号标签、v-text、v-html、v-bind 指令》
《Vue指令：v-cloak、v-once、v-pre 指令》
《Vue条件判断：v-if、v-else、v-else-if、v-show 指令》
《Vue循环遍历：v-for 指令》
《Vue事件处理：v-on 指令》
《Vue表单元素绑定：v-model 指令》
《Vue动态绑定：文本框、单选按钮、下拉列表、多选按钮》
《Vue动态添加或删除DOM元素：购物车实例》
创建应用程序实例后，需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动进行更新。这样就无须手动获取 DOM 的值，使代码更加简洁，提高了开发效率。
1、双大括号标签：文本插值
1.1 基本形式
文本插值是数据绑定最基本的形式，使用的是双大括号{{ }}标签。它会自动将绑定的事件实时显示出来。
【实例】使用的是双大括号{{ }}标签，将文本插入到HTML标签中。
<body> <div id="app"> <h3>{{title}}</h3> <p>用户ID：{{userInfo.userId}}</p> <p>用户名称：{{userInfo.userName}}</p> <p>博客信息：{{userInfo.blogName}}</p> <p>博客地址：{{userInfo.blogUrl}}</p> </div> </body> <!-- 引入 Vue 框架 --> <script src="../js/vue.global.js"></script> <script type="text/javascript"> // 使用 Vue.createApp 函数创建一个应用程序实例 const vueApp = Vue.createApp({ //数据 data() { return { title: "使用双大括号{{ }}表达式，实现文本插值", userInfo: { userId: 1, userName: "pan_junbiao的博客", blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" } } } //使用 mount() 方法，装载应用程序实例的根组件 }).mount('#app'); </script>
执行结果：
1.2 使用表达式
在双大括号{{ }}标签中进行数据绑定时，标签中可以是一个 JavaScript 表达式。这个表达式可以是常量或者变量，也可以是常量、变量、运算符组合而成的式子。表达式的值是其运算后的结果。例如：在双大括号{{ }}标签中使用表达式，代码如下：
<!-- 表达式：计算 --> <p>{{ num1 * num2}}</p> <!-- 表达式：字符串大写函数 --> <p>{{ str.toUpperCase() }}</p> <!-- 表达式：自定义的方法 --> <p>{{ calculator(num1,num2) }}</p>
【实例】在双大括号{{ }}标签中，使用 JavaScript 表达式。
<body> <div id="app"> <h3>{{title}}</h3> <p>博客信息：{{userInfo.blogName}}</p> <p>博客地址：{{userInfo.blogUrl}}</p> <!-- 表达式：计算 --> <p>{{ num1 * num2}}</p> <!-- 表达式：字符串截取函数 --> <p>{{ userInfo.blogName.substr(7) }}</p> <!-- 表达式：自定义方法 --> <p>{{ calculator(num1,num2) }}</p> </div> </body> <!-- 引入 Vue 框架 --> <script src="../js/vue.global.js"></script> <script type="text/javascript"> // 使用 Vue.createApp 函数创建一个应用程序实例 const vueApp = Vue.createApp({ //数据 data() { return { title: "在双大括号{{ }}标签中，使用 JavaScript 表达式", userInfo: { blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" }, num1: 10, num2: 20 } }, //方法 methods: { calculator: function (a, b) { return a + b; } } //使用 mount() 方法，装载应用程序实例的根组件 }).mount('#app'); </script>
执行结果：
1.3 解决页面闪烁问题
使用双大括号{{ }}标签进行数据绑定时，有时会因为页面加载延时，而产生闪烁问题。
解决方法：可以使用 v-cloak 指令。
v-cloak 指令可以隐藏未编译的 Mustache 标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到 Mustache 标签，然后看到编译后的数据。
详细解决方法，请浏览本博客的文章：《Vue的 v-cloak 指令：解决页面闪烁问题》
2、v-text 指令：文本插值
v-text 指令用于 HTML 的文本插值，实现的效果与双大括号{{ }}标签类似。语法格式如下：
<p v-text="message"></p>
同样的在 v-text 指令中也支持使用 JavaScript 表达式。代码如下：
<!-- 表达式：计算 --> <p v-text="num1 * num2"></p> <!-- 表达式：字符串大写函数 --> <p v-text="str.toUpperCase()"></p> <!-- 表达式：自定义方法 --> <p v-text="calculator(num1,num2)"></p>
【实例】使用 v-text 指令和表达式，为 HTML 标签绑定数据。
<body> <div id="app"> <h3 v-text="title"></h3> <p v-text="userInfo.blogName"></p> <p v-text="userInfo.blogUrl"></p> <!-- 表达式：计算 --> <p v-text="num1 * num2"></p> <!-- 表达式：字符串截取函数 --> <p v-text="userInfo.blogName.substr(7)"></p> <!-- 表达式：自定义方法 --> <p v-text="calculator(num1,num2)"></p> </div> </body> <!-- 引入 Vue 框架 --> <script src="../js/vue.global.js"></script> <script type="text/javascript"> // 使用 Vue.createApp 函数创建一个应用程序实例 const vueApp = Vue.createApp({ //数据 data() { return { title: "使用 v-text 指令和表达式", userInfo: { blogName: "您好，欢迎访问 pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao" }, num1: 10, num2: 20 } }, //方法 methods: { calculator: function (a, b) { return a + b; } } //使用 mount() 方法，装载应用程序实例的根组件 }).mount('#app'); </script>
执行结果：
3、v-html 指令：插入HTML文本
如果要输出真正的 HTML 内容，需要使用 v-html 指令。语法格式如下：
<p v-html="message"></p>
【实例】使用 v-html 指令，输出 HTML 内容。
<body> <div id="app"> <p v-html="title"></p> <p v-html="blogName"></p> <p v-html="blogUrl"></p> </div> </body> <!-- 引入 Vue 框架 --> <script src="../js/vue.global.js"></script> <script type="text/javascript"> // 使用 Vue.createApp 函数创建一个应用程序实例 const vueApp = Vue.createApp({ //数据 data() { return { title: "<h3>使用 v-html 指令，输出 HTML 内容</h3>", blogName: "<h3 style='color:red'>您好，欢迎访问 pan_junbiao的博客</h3>", blogUrl: "<h3 style='color:blue'>https://blog.csdn.net/pan_junbiao</h3>" } } //使用 mount() 方法，装载应用程序实例的根组件 }).mount('#app'); </script>
执行结果：
输入的 HTML 文档：
<p><h3>使用 v-html 指令，输出 HTML 内容</h3></p> <p><h3 style="color:red">您好，欢迎访问 pan_junbiao的博客</h3></p> <p><h3 style="color:blue">https://blog.csdn.net/pan_junbiao</h3></p>
4、v-bind 指令：绑定属性
4.1 固定属性
双大括号{{ }}标签不能应用在 HTML 属性中。如果要为 HTML 元素绑定属性，则不能直接使用文本插值的方式，而需要使用 v-bind 指令对属性进行绑定。
为 HTML 元素绑定属性的操作比较频繁。为了防止经常使用 v-bind 指令带来的烦琐，Vue.js 为该指令提供了一种简写形式“:”。
例如，为“pan_junbiao的博客”超链接设置URL和样式的完整格式如下：
<a v-bind:href="blogUrl" v-bind:class="{myLink:value}">pan_junbiao的博客</a>
简写形式如下：
<a :href="blogUrl" :class="{myLink:value}">pan_junbiao的博客</a>
【实例】使用 v-bind 指令，为超链接绑定URL和样式属性。
<style type="text/css"> .myLink { text-decoration: none; /* 文本取消下划线 */ cursor: pointer; /* 鼠标光标为手型*/ color: #0066ff; font-size: 26px; } </style> <body> <div id="app"> 请点击博客链接：<a v-bind:href="blogUrl" v-bind:title="blogName" v-bind:class="{myLink:value}">{{blogName}}</a> </div> </body> <!-- 引入 Vue 框架 --> <script src="../js/vue.global.js"></script> <script type="text/javascript"> // 使用 Vue.createApp 函数创建一个应用程序实例 const vueApp = Vue.createApp({ //数据 data() { return { blogName: "pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao", value: true } } //使用 mount() 方法，装载应用程序实例的根组件 }).mount('#app'); </script>
执行结果：
4.2 动态属性
从 Vue 2.6.0 版本开始，指令的参数可以是动态参数，即将中括号括起来的表达式作为指令的参数。如法如下：
指令:[表达式]
使用动态属性的示例代码如下：
<img v-bind:[attr]="imageSrc">
【实例】使用 v-bind 指令和动态属性，为超链接绑定URL和样式属性。
<style type="text/css"> .myLink { text-decoration: none; /* 文本取消下划线 */ cursor: pointer; /* 鼠标光标为手型*/ color: #0066ff; font-size: 26px; } </style> <body> <div id="app"> 请点击博客链接：<a v-bind:[attr1]="blogUrl" v-bind:[attr2]="blogName" v-bind:[attr3]="{myLink:value}">{{blogName}}</a> </div> </body> <!-- 引入 Vue 框架 --> <script src="../js/vue.global.js"></script> <script type="text/javascript"> // 使用 Vue.createApp 函数创建一个应用程序实例 const vueApp = Vue.createApp({ //数据 data() { return { blogName: "pan_junbiao的博客", blogUrl: "https://blog.csdn.net/pan_junbiao", value: true, attr1:'href', attr2:'title', attr3:'class' } } //使用 mount() 方法，装载应用程序实例的根组件 }).mount('#app'); </script>
