Vue.js 入门参考手册

下文中的 <tag> 只是示例，实际可替换为<div> <p> 等有效标签。

语法 & 指令

• <tag v-html="rawHtml"></tag>，将标签内容直接替换成 rawHtml，不做模板解析
• <tag v-bind:xxx=""></tag> 可简写成 <tag :xxx=""></tag>
• <tag v-on:event=""></tag> 可简写成 <tag @event=""></tag>
• 监听事件内联写法 <tag @event="trigger('some text'[, $event])"></tag>
• 事件修饰符 .stop .prevent .capture .self .once，修饰符可串联着写
• 键值修饰符 <input @keyup.enter="submit">，包括 .enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta，同样可使用串联写法，并且可通过 Vue.config.keyCodes.f1 = 112 类似写法配置
• 鼠标按钮修饰符 left right middle
• 绑定 Class
  • 对象语法 <tag v-bind:class="{active: isActive, 'text-danger': hasError}"></tag>
  • 数组语法 <tag v-bind:class="[activeClass, errorClass]"></tag>
• 绑定 Style
  • 对象语法 <tag v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}"></tag>
  • 数组语法 <tag v-bind:style="[baseStyles, overridingStyles]"></tag>
• v-if、v-else-if、v-else
• v-show
• v-for="(item, [index]) in array"、v-for="(value, [key, [index]]) in object"、v-for="n in 10"，考虑是否需要 key
• 数组的 push() pop() shift() unshift() splice() sort() reverse() 会触发视图更新
• 修改数组中某位置的值 Vue.set(vm.items, indexOfItem, newValue)
• 修改对象中某键值的值 Vue.set(vm.userProfile, 'age', 27)
• v-model 用于表单，传说中的双向绑定，它会忽略表单控件自身的值（e.g. value checked selected etc.），而去 Vue 实例寻找具体的值代替
• v-model 修饰符 .lazy(在 "change" 而不是 "input" 中更新) .number .trim

组件 & 实例

• Vue 实例基本结构
  • template
  • data 必须是函数，该函数返回一个对象
  • props 通常是一个字符串数组，也可以是一个对象，引入校验机制
  • methods，对象
  • components，对象，可结合动态组件使用
  • 生命周期的钩子函数
• Props 校验

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

• 父子组件间事件传递 $on $emit
• 子组件更新父组件的值，使用 .sync 修饰符，详见使用方法
• 动态组件 <component> :is <keep-alive>
• 静态组件可以使用 <tag v-once></tag.> 将渲染结果缓存起，降低开销

过渡 & 动画

• 过渡 <transition name="example">，需要结合特定的类名使用
• 过渡模式 <transition name="fade" mode="default | out-in | out-in">
  • default 进入和离开同时发生
  • out-in 当前元素先进行过渡，完成之后新元素过渡进入
  • in-out 新元素先进行过渡，完成之后当前元素过渡离开