Vue 常用指令
发布时间：2023-03-31 14:17:55 所属栏目：教程 来源：
导读：指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用
|
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 Vue 指令是带有 v- 前缀的特殊 attribute，它的值是一个表达式，指令帮助我们操作 DOM，当表达式的值发生改变时更新渲染 DOM。 接下来我们将逐个介绍各个指令的含义和使用方式。 v-text是元素的 InnerText 属性，它的作用和之前我们使用的 {{}} 一样，用于数据绑定： <!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>Document</title> </head> <body> <div id="app"> <div v-text="message"></div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: "Hello!" }, }) </script> </html> 代码解释： 在 HTML 代码第 2 行，我们使用了 v-text 指令，它绑定 message 值，会将 message 的值动态插入 <div> 标签内。 v-html是元素的 innerHTML，它用于绑定一段 html 标签： <!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>Document</title> </head> <body> <div id="app"> <div v-html="message"></div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: "<div>您好，我是小慕！</div>", } }) </script> </html> 代码解释： 在 HTML 代码第 2 行，我们使用了 v-html 指令，它绑定 message 值，会将 html 元素插入 <div> 标签内。 v-bind用于给元素的属性赋值。v-bind后面是 ：属性名=[变量名]。例如:v-bind:title="message"： <!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>Document</title> </head> <body> <div id="app"> <div v-bind:title="title"> 鼠标悬停查看消息！ </div> <div> <a v-bind:href="href">网</a> </div> <div> <img v-bind:src="src"/> </div> <div> <button v-bind:disabled="disabled">禁用按钮</button> </div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { title: "您好，我是小慕，欢迎来到网！希望你可以在网学到更多的东西！", href: 'https://www.jb51.cc/', src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676-360-202.png', disabled: true } }) </script> </html> 代码解释： 在 HTML 代码第 2 行，我们使用了 v-bind 指令给 div 标签的 title 属性赋值。 在 HTML 代码第 6 行，我们使用了 v-bind 指令给 a 标签的 href 属性赋值。 在 HTML 代码第 9 行，我们使用了 v-bind 指令给 img 标签的 src 属性赋值。 在 HTML 代码第 12 行，我们使用了 v-bind 指令给 bitton 标签的 disabled 属性赋值。 vue 还提供了指令 v-bind 的简写方式，可以直接通过:属性名的方式。例如在上述例子中我们可以改写成： <!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>Document</title> </head> <body> <div id="app"> <div :title="title"> 鼠标悬停查看消息！ </div> <div> <a :href="href">网</a> </div> <div> <img :src="src"/> </div> <div> <button :disabled="disabled">禁用按钮</button> </div> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { title: "您好，我是小慕，欢迎来到网！希望你可以在网学到更多的东西！", href: 'https://www.jb51.cc/', src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676-360-202.png', disabled: true } }) </script> </html> v-for 用于列表的循环渲染。基本语法：v-for="item in data"，data 可以是数组或者对象，接下来我们介绍对两种数据类型的循环。 当我们对数组进行循环的时候，item 表示数组中具体的某一项： <!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>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item in music">{{item.name}}</li> </ul> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data() { return { // 要循环的数组 music: [ { name: '青花瓷' }, { name: '阳光总在风雨后' }, { name: '十年' } ] } } }) </script> </html> 代码解释： 在 JS 代码第 6-10 行，我们定义了数组 music。 在 HTML 第 3 行，我们使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将 name 插入到 <li> 标签内。 页面展现结果： 当我们对数组进行循环的时候，item 表示对象中某一属性的值： <!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>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item in obj">{{item}}</li> </ul> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data() { return { obj: { name: '句号', age: , sex: '男' } } } }) </script> </html> 代码解释： 在 JS 代码第 5-9 行，我们定义了对象 obj； 在 HTML 第 3 行，我们使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将属性的值插入到 <li> 标签内。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
