vue-learning:2 - template - directive

Posted webxu20180730

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-learning:2 - template - directive相关的知识,希望对你有一定的参考价值。

指令 directive

在上一节我们知道,VUE的template模板通过VUE指令API实现与页面的视图层联系。所以本节将聚集在实现视图层交互的VUE指令系统directive的基础使用。

我们先回顾下,原生html元素的一个结构包含哪些内容?

<button id="example" class="example" style="display:none" disabled onclick="handleClick"> content </button>
html元素包括:
    标签:开始标签 <button>  结束标签 </button>
    特性及值: id="example"   class="example"   style="display:none"   
                disabled (值类型为布尔值时,出现为true,元素中没有则为false)
    属性及值: display:none
    事件绑定: onclick="handleClick"
    内容: content

template中HTML元素写法与原生完全一样。不同的是当需要vue去控制元素某些部位的值时需要采用vue指令去绑定该值。

<button v-if="true" id="example" v-bind:class="{example:true}" v-bind:style="[baseStyle]" v-bind:disabled="true" v-on:click.stop="handleClick">{{ content }}</button>

所以我们根据html的元素结构来学习对应的vue指令

在上面的这个例子,指令有四种形态,如v-ifv-bind:disabledv-on:click.stop{{ }}

  • 不带参数指令,一般控制着整个html元素的显示,如v-if / v-show根据值真假控制元素的可见和不可见,v-for 用于循环列表元素的批量生成。
  • 带参数的指令v-bind绑定HMTL元素的特性,控制着该特性的表现,如disabled值为真,则disabled特性生效,按钮禁用。
  • 带参数和事件修饰符的指令v-on:click.stop,事件修饰符只出现在事件绑定指令v-on上。

disabled称为指令v-bind的参数,
click称为指令v-on的参数,stop称为指令v-on的事件修饰符。
{{ }}插值,严格上不算VUE标准指令,我归结在一起也是方便自己记忆而已。

所以对vue指令的可以总结为以下几类:

  1. 绑定元素内容的指令:{{}}-输出字符串文本作为内容的插值, v-html - 输出DOM节点作为内容的指令
  2. 绑定元素显示的指令:v-if/elsev-showv-for
  3. 绑定元素特性的指令:v-bind 特性名称作为指令的参数
  4. 绑定元素事件的指令:v-on 事件名作为指令参数,及其相关修饰符
  5. 表单元素实现值双向绑定的指令:v-model

后面,我们学习每一个指令的具体知识点。

以上是关于vue-learning:2 - template - directive的主要内容,如果未能解决你的问题,请参考以下文章

vue-learning:7-template-v-bind-with-class-and-style

vue-learning:38 - router - 前端路由的发展

vue-learning:37 - router - 目录

vue-learning:24 - component - 目录

vue-learning:22 - js - directives

vue-learning:17- js - methods