6. 指令

作者: 论宅 | 来源:发表于2019-05-29 01:13 被阅读0次

指令(Directives)是带有v-前缀的特殊特性。其值的预期值是【单个表达式(v-for例外)】,如

v-if
v-bind

参数

v:bind 用于响应式更新属性

<a v-bind:href="url">click</a>

这里href是参数,告知v-bind指令将该元素的href特性与表达式url的值绑定。

v-on 指令用于监听dom事件

<a v-on:click="functionName"></a>

如名称所示,这里的参数是监听的事件名称。

动态参数

如果你不知道将要赋予值的名称,你也可以用js表达式作为指令的参数。

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

如果上述的值都在后台中赋予了正确的值,name最终可能会解析成这样——

<a v-bind:href="baidu.com"></a>
< a v-on:focus="focusFun"></a>

动态赋值解析结果应该是一个字符串,异常情况下为null,强行设置为null可以被显性的用于移除绑定,而其他非字符串类型的值都会触发警告。
【动态参数表达式有一些语法约束,因为某些字符,例如空格和引号,放在 HTML 特性名里是无效的。同样,在 DOM 中使用模板时你需要回避大写键名。】

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通方法是不需要引号和空格参数的表达式或者使用计算属性代替。
另外,使用模板的时候,需要注意浏览器特性会将属性全部转变为小写:

<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

以“.”指明的特殊后缀,用于支出一个指令应该以特殊方式绑定,如:
.prevent会告诉v-on调用事件的时候触发event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

相关文章

  • 6. 指令

    指令(Directives)是带有v-前缀的特殊特性。其值的预期值是【单个表达式(v-for例外)】,如 参数 v...

  • 6.汇编-修改EIP的指令

    6.汇编-修改EIP的指令 EIP寄存器 EIP寄存器表示CPU下次执行的位置 JMP指令 JMP指令相当于给EI...

  • 九:vue.js基础(2)

    1.表单输入绑定 2.Vue实例_生命周期 3.过渡. 4.动画 5.过滤器 6.内置指令 7.自定义指令

  • Ⅱ.Redis进阶

    1. String 2. Hash 3. list(栈,队列) 4. set,zset 5. 高级指令 6. re...

  • 6.自定义指令directives

    1.定义全局指令在main.js中声明全局指令 在元素中使用自定义指令 2.局部指令直接在当前组件中添加direc...

  • 3.Vue第三章

    1.vue模板渲染 2.v-text和v-html区别: 3.表达式 4.列表渲染 5.事件绑定 总结: 6.指令...

  • 6. AngularJS中的指令 ng-include

  • Objective-C总结----6.预编译指令

    Objective-C编程语言中含有一个预处理器,用于在编译前处理源文件。 预处理器语言预处理器指令宏展开 预处理...

  • Linux常用指令

    linux常用指令: 1.文件管理2.目录管理3.用户管理4.权限管理5.文件搜索6.内容搜索7.压缩包管理8.网...

  • MIPS指令集与简要分析

    R格式指令 基本格式 指令 算数类指令 逻辑类指令 位移类指令 跳转指令 I格式指令 基本格式 指令 算数指令 逻...

网友评论

      本文标题:6. 指令

      本文链接:https://www.haomeiwen.com/subject/fhmstctx.html