本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于VUE模板指令使用的相关问题，指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
指令的概念
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：
-
内容渲染指令 v-text {{ }} v-html
-
属性绑定指令 v-bind =>
: -
事件绑定指令 v-on =>
@ -
双向绑定指令 v-model
-
条件渲染指令 v-if v-show
-
列表渲染指令 v-for
内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：
- v-text
- {{ }}
- v-html
区别：
-
v-text 指令会覆盖元素内默认值
-
vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式。不会覆盖元素中默认的文本内容。
-
v-text 指令和插值表达式只能渲染纯文本内容，可以把包含 HTML 标签的字符串渲染为页面的 HTML 元素
属性绑定指令 v-bind
如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令
由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）
代码案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-bind 属性绑定指令</title> <!-- 1.导入vue 的库文件，在window 全局就有了vue这个构造函数 --> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <!-- 3.vue 能控制下面这个div 帮我们把数据填充到div内部 --> <div id="app"> <input type="text" v-bind:placeholder="tips"> <hr> <img v-bind:src="photo" alt="" style="width: 150px;"> <hr> <div>tips翻转的结果是：{{ tips.split('').reverse().join('')}}</div> </div> <!-- 2.创建vue实例对象 --> <script> // 创建vue的实例对象 const vw = new Vue({ el: '#app', // data 对象就是要渲染到页面上的数据 data: { tips: "请输入内容", photo: "https://cdn.segmentfault.com/r-ce71be5c/static/logo-b.d865fc97.svg" } }) </script> </body> </html>
