指令

浏览 22

课文

接下来我们将会学习 Vue.js 的指令和模板语法。 一个**指令**是一个*特殊的记号*,它会告诉 Vue 应该对DOM元素做什么特殊处理。 在 Vue.js 中,指令是以 HTML 元素为前缀的 HTML 属性形式。 指令的目的是将 HTML 元素绑定到 Vue 实例上面,这样可以让 Vue 对这个 DOM 元素进行更改。 在更改元素的过程中,可能会用到一些其他的资源,可能包括 Vue 实例中的数据、方法和其他元素。 通用指令语法如下所示: ```html <element prefix-directiveId="[argument:] expression [| filters...]"> </element> ``` 我们将在本课中解释上述代码的第 2 行中的所有内容,包括**前缀(prefix)**、**指令 ID(direactiveId)**、**参数(grgument)**、**表达式(expression)**和**过滤器(filters)**。 # v- 前缀 所有 Vue 指令都是以 v- 开头的。 v- 前缀后面紧跟着的是指令 ID。指令 ID 包括 if、on、ref、show、pre、bind 和 html。 通过将 v- 前缀与指令 ID 结合起来,就可以生成完整的指令。例如 v-if、v-html 等。 指令的可执行示例如下所示: ```js new Vue({ el: '#app', template: `<div> <h1>Vue.js Application</h1> <p v-if="visible"> I am visible because the visible variable is true! </p> </div> `, data: { visible: true } }) ``` 你可以在上面的代码示例中尝试将变量 visible 更改为 false,并重新运行应用程序来观察运行结果的变化。 修改之后,第 6 行的 p 元素将不会出现在 HTML 中。 # 指令参数 一些指令需要额外的参数来告诉指令要做什么。 这些属性会跟在指令的 : 之后。 例如,v-bind 指令需要一个额外的参数,例如我们需要用 v-bind 将 Vue 实例上的 url 属性绑定到元素的 href 上面。 ```jsx <a v-bind:href="url"> ... </a> ``` 在上面的例子中,v-bind 指令后面的 href 会将 Vue 实例上的 url 属性绑定到 a 元素的 href 属性上面。 # 表达式 **表达式**必须返回一个变量。因为指令是通过一个实际的变量来决定元素的外观或行为的。 在上面显示的示例中,url 是一个变量。该值将绑定到 a 元素的 href 属性上。 # 过滤器 过滤器的主要作用是实现文本格式化。 它通常与 v-bind 和插值表达式一起使用。 它的语法是将它放在表达式末尾的管道符号 (|) 之后。 过滤器接受一个格式化的参数,通常是一段文本。 | 前面的表达式会作为参数传递给过滤器。 过滤器的一个可执行示例如下所示: ```js new Vue({ el: '#app', template: `<div> <p> 名字 {{name}} 一共有 <b>{{name | lettersCount}}</b> 个字 </p> </div> `, data: { name: '张三' }, filters : { lettersCount : function(value) { return value.length; } } }) ``` 在上面的示例中,过滤器 lettersCount 将 name 用作参数并返回其随后显示的字母数,而不是显示 name 的实际值。 # 自定义指令 Vue.js 也允许你定义自己的指令。 当执行某种类型的格式化或启用应用程序中常见的某种行为时,这些自定义指令会很有用。 下面是定义自定义指令的语法: ```js Vue.directive('directiveName', { bind(element, binding, v_node) { // 你要做的事情 } }) ``` directiveName 是你的指令命名,可以取任何你想要的名称。 注意 bind 函数的 element、binding 和 v_node 参数。 bind 函数是执行指令和处理指令的核心部分,它需要上述的三个参数。 ### element 它是将要进行修改的元素。 ### binding binding 是传递给自定义指令的所有参数。 例如,如果参数 color:green 像这样传递 myDirective = "{color: 'green'}",那么 binding 将包含属性 binding.value.color,它的值是 green。 ### v_node VNODE 是 Vue 中 Virtual Node 的缩写。 Vue 的虚拟 DOM 是包含 VNodes 的树。 它也会传递给 bind 函数,以便 bind 函数可以访问元素的虚拟 DOM。 可以运行下面提供的示例来查看如何定义和使用自定义指令: ```js Vue.directive("textStyle",{ bind(element,binding, v_node) { element.style.color=binding.value.color; element.style.fontSize = "35px"; } }); new Vue({ el: '#app', template: `<div> <p v-textStyle = "{color:'red'}">这段内容的样式是通过自定义指令来实现的。</p> </div> ` }); ``` 在上面的例子中,我们定义了 textStyle 指令,并将 color 传递给它。 在 bind 函数中,我们根据传递的 color 参数更新了元素的样式。 注意:必须在创建 Vue 实例之前定义自定义指令,否则将会不起作用!

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1