指令

2017-08-09 本文已影响7人 Look_a_Look

定义

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

一些指令能接受一个参数，在指令后以冒号指明。
<a v-bind:href="url"></a>

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>

常用内置指令

v-html 指令把元素的内容替换成为属性值的HTML片段

v-if 指令将根据表达式的值的true/false来移除/插入元素
v-else 指令来表示 v-if 的“else 块
v-else-if 类似于 v-else，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后
　　Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。需添加一个具有唯一值的key属性来特殊标识
　　把一个<template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template>元素

　　<div v-if="type === 'A'">A</div>
　　<div v-else-if="type === 'B'"> B</div>
　　<div v-else-if="type === 'C'">C</div>
　　<div v-else> Not A/B/C</div>

v-show 是简单地切换元素的 CSS 属性 display，带有 v-show 的元素始终会被渲染并保留在 DOM 中
　　一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果在运行时条件不太可能改变，则使用 v-if 较好；如果需要非常频繁地切换，则使用 v-show 较好。

v-for 根据一组数组的选项列表进行渲染
　　也可以用 v-for 通过一个对象的属性来迭代
　　如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块
　　v-for会检测数组改变来刷新界面，但是通过索引改变数组或者直接改变数组长度并不会被检测到，需要使用Vue.set来更新数组
　　2.2.0+ 的版本里，当在组件中使用 v-for 时，key现在是必须的

　　<ul id="example-1">
　　  <li v-for="item in items">
　　    {{ item.message }}
　　  </li>
　　</ul>
　　<ul id="example-2">
　　  <li v-for="(item, index) in items">
　　    {{ parentMessage }} - {{ index }} - {{ item.message }}
　　  </li>
　　</ul>
　　<div v-for="(value, key, index) in object">
　　  {{ index }}. {{ key }} : {{ value }}
　　</div>
　　var example1 = new Vue({
　　  data: {
　　    items: [
　　      {message: 'Foo' },
　　      {message: 'Bar' }
　　    ],
　　    object: {
　　      firstName: 'John',
　　      lastName: 'Doe',
　　      age: 30
　　    }
　　  }
　　})
　　// Vue.set
　　Vue.set(example1.items, indexOfItem, newValue)

v-bind 指令被用来响应地更新 HTML 属性 v-bind: 可缩写为 :
　　我们可以传给** v-bind:class** 一个对象，以动态地切换 class
　　我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表
　　也可以直接绑定数据里的一个对象
　　我们也可以在这里绑定返回对象的计算属性

　　<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
　　
　　<div v-bind:class="[activeClass, errorClass]">
　　<div v-bind:class="classObject"></div>
　　data: {
　　  activeClass: 'active',
　　  errorClass: 'text-danger
　　  classObject: {
　　    active: true,
　　    'text-danger': false
　　  }
　　}
　　computed: {
　　  classObject: function () {
　　    return {
　　      active: this.isActive && !this.error,
　　      'text-danger': this.error && this.error.type === 'fatal',
　　    }
　　  }
　　}

v-bind:style也有类似加强功能

　　<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
　　<div v-bind:style="styleObject"></div>
　　data: {
　　  activeColor: 'red',
　　  fontSize: 30
　　  styleObject: {
　　    color: 'red',
　　    fontSize: '13px'
　　  }
　　}

v-on 指令，它用于监听 DOM 事件 v-on: 可缩写为 @ 。最常用的为@click
　　把特殊变量 $event 把它传入方法，访问原生 DOM 事件
　　通过由点(.)表示的指令后缀来调用事件修饰符，处理原生默认DOM 事件，例如.stop、.prevent、.capture、.self、.once，而且修饰符可以串联。.once 修饰符还能被用到自定义的组件事件上
　　v-on:keyup 在监听键盘事件时添加关键修饰符，可使用keyCode或者别名

　　<button v-on:click="counter += 1">增加 1</button>
　　<button v-on:click="greet">Greet</button>
　　<button v-on:click="greet('hi',$event)">Say hi</button>
　　<a v-on:click.stop="doThis"></a>  <!-- 阻止单击事件冒泡 -->
　　<input v-on:keyup.13="submit">  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
　　new Vue({
　　　　el: '#example-3',
　　　　methods: {
　　　　greet: function (message) {
　　　　　　alert(message)
　　　　}
　　})

v-model指令在表单控件元素上创建双向数据绑定
　　v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
　　在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替{{}}

<input type="checkbox" id="checkbox" v-model="checked"><!-- `checked` 为 true 或 false -->
<input type="radio" id="one" value="One" v-model="picked" value="a"><!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" id="one" value="One" v-model="picked" v-bind:value="a"><!-- 当选中时，vm.pick === vm.a -->
<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<input v-model.trim="msg">

指令

定义

常用内置指令

猜你喜欢

热点阅读