VueJS第2天 初阅API（初识MarkDown）

指令是带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为

v-bind --> 数据绑定

v-for --> 循环

v-if --> 判断

v-on --> 事件监听

v-model --> 双向绑定

v-once --> 一次性插值

v-html --> 输出html

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

一些指令能够接收一个“参数”，在指令名称之后以冒号表示

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

<a v-on:click="doSomething">...</a>

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

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

v-bind缩写

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

<a :href="url">...</a>

v-on 缩写

<a v-on:click="doSomething">...</a>

<a @click="doSomething">...</a>

计算属性

如果你不希望有缓存，请用方法来替代。

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

对象语法

v-bind:class ---> 动态地切换 class

active 这个 class 存在与否将取决于数据属性 isActive 是否为真值
v-bind:class 指令也可以与普通的 class 属性共存
可以绑定对象

`<div v-bind:class="classObject"></div>`    

    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }

可以绑定返回对象的计算属性

<div v-bind:class="classObject"></div>  

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

把一个数组传给 v-bind:class

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}  

三元表达式  

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

对象语法

v-bind:style

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

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>