vue.js起步式（二）

按键修饰符

在监听键盘事件时，我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符：

记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：

全部的按键别名：

enter
tab
delete
esc
space
up
down
left
right

1.0.8+： 支持单字母按键别名。

1.0.17+： 可以自定义按键别名：

// 可以使用 @keyup.f1
Vue.directive("on").keyCodes.f1 = 112

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了传统理念 “separation of concern”。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。

(1)Text:

Message is: {{ message }}




(2)Multiline text:

Multiline message is:
{{ message }}




(3)Checkbox:

3-1.单个勾选框，逻辑值：


{{ checked }}

3-2.多个勾选框，绑定到同一个数组：


Jack

John

Mike


Checked names: {{ checkedNames | json }}

new Vue({
  el: "...",
  data: {
    checkedNames: []
  }
})

(4)Radio:


One



Two


Picked: {{ picked }}

(5)Select

5-1.单选：


  A
  B
  C

Selected: {{ selected }}

5-2.多选（绑定到一个数组）：


  A
  B
  C



Selected: {{ selected | json }}

5-3.动态选项，用 v-for 渲染：


  
    {{ option.text }}
  

Selected: {{ selected }}

new Vue({
  el: "...",
  data: {
    selected: "A",
    options: [
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" }
    ]
  }
})

绑定 value

对于单选按钮，勾选框及选择框选项，v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：

  




  ABC

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

1.Checkbox



// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

2.Radio



// 当选中时
vm.pick === vm.a

3.Select Options


  
  123


// 当选中时
typeof vm.selected // -> "object"
vm.selected.number // -> 123

参数特性
1.lazy

在默认情况下，v-model 在input 事件中同步输入框值与数据，可以添加一个特性 lazy，从而改到在 change 事件中同步：

2.number

如果想自动将用户的输入转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个特性 number：

3.debounce

debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

注意 debounce 参数不会延迟 input 事件：它延迟“写入”底层数据。因此在使用 debounce 时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件，应当使用 debounce 过滤器。

通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。

为了应用过渡效果，需要在目标元素上使用 transition 特性：

transition 特性可以与下面资源一起用：

v-if
v-show
v-for （只在插入和删除时触发，使用 vue-animated-list 插件）
动态组件 （介绍见组件）
在组件的根节点上，并且被 Vue 实例 DOM 方法（如 vm.$appendTo(el)）触发。

当插入或删除带有过渡的元素时，Vue 将：

尝试以 ID "my-transition" 查找 JavaScript 过渡钩子对象——通过 Vue.transition(id, hooks) 或 transitions 选项注册。如果找到了，将在过渡的不同阶段调用相应的钩子。

自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。

如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。

CSS 过渡
示例:

典型的 CSS 过渡像这样：

hello

然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

你可以在同一元素上通过动态绑定实现不同的过渡：

hello

new Vue({
  el: "...",
  data: {
    show: false,
    transitionName: "fade"
  }
})

另外，可以提供 JavaScript 钩子:

Vue.transition("expand", {

  beforeEnter: function (el) {
    el.textContent = "beforeEnter"
  },
  enter: function (el) {
    el.textContent = "enter"
  },
  afterEnter: function (el) {
    el.textContent = "afterEnter"
  },
  enterCancelled: function (el) {
    // handle cancellation
  },

  beforeLeave: function (el) {
    el.textContent = "beforeLeave"
  },
  leave: function (el) {
    el.textContent = "leave"
  },
  afterLeave: function (el) {
    el.textContent = "afterLeave"
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
})

过渡的 CSS 类名

类名的添加和切换取决于 transition 特性的值。比如 transition="fade"，会有三个 CSS 类名：

.fade-transition 始终保留在元素上。

.fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。

.fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。

如果 transition 特性没有值，类名默认是 .v-transition, .v-enter 和 .v-leave。
自定义过渡类名

1.0.14 新增

我们可以在过渡的 JavaScript 定义中声明自定义的 CSS 过渡类名。这些自定义类名会覆盖默认的类名。当需要和第三方的 CSS 动画库，比如 Animate.css 配合时会非常有用：

Watch me bounce

Vue.transition("bounce", {
  enterClass: "bounceInLeft",
  leaveClass: "bounceOutRight"
})

显式声明 CSS 过渡类型

1.0.14 新增

Vue.js 需要给过渡元素添加事件侦听器来侦听过渡何时结束。基于所使用的 CSS，该事件要么是 transitionend，要么是 animationend。如果你只使用了两者中的一种，那么 Vue.js 将能够根据生效的 CSS 规则自动推测出对应的事件类型。但是，有些情况下一个元素可能需要同时带有两种类型的动画。比如你可能希望让 Vue 来触发一个 CSS animation，同时该元素在鼠标悬浮时又有 CSS transition 效果。这样的情况下，你需要显式地声明你希望 Vue 处理的动画类型 (animation 或是 transition)：

Vue.transition("bounce", {
  // 该过渡效果将只侦听 `animationend` 事件
  type: "animation"
})

过渡流程详解

当 show 属性改变时，Vue.js 将相应地插入或删除

如果 show 变为 false，Vue.js 将：
    调用 beforeLeave 钩子；
    添加 v-leave 类名到元素上以触发过渡；
    调用 leave 钩子；
    等待过渡结束（监听 transitionend 事件）；
    从 DOM 中删除元素并删除 v-leave 类名；
    调用 afterLeave 钩子。

如果 show 变为 true，Vue.js 将：
    调用 beforeEnter 钩子；
    添加 v-enter 类名到元素上；
    把它插入 DOM；
    调用 enter 钩子；
    强制一次 CSS 布局，让 v-enter 确实生效。然后删除 v-enter 类名，以触发过渡，回到元素的原始状态；
    等待过渡结束；
    调用 afterEnter 钩子。

enter: function (el) {
  // 没有第二个参数
  // 由 CSS transitionend 事件决定过渡何时结束
}

vs.

enter: function (el, done) {
  // 有第二个参数
  // 过渡只有在调用 `done` 时结束
}

Look at me!

.bounce-transition {
  display: inline-block; /* 否则 scale 动画不起作用 */
}
.bounce-enter {
  animation: bounce-in .5s;
}
.bounce-leave {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

Vue.transition("fade", {
  css: false,
  enter: function (el, done) {
    // 元素已被插入 DOM
    // 在动画结束后调用 done
    $(el)
      .css("opacity", 0)
      .animate({ opacity: 1 }, 1000, done)
  },
  enterCancelled: function (el) {
    $(el).stop()
  },
  leave: function (el, done) {
    // 与 enter 相同
    $(el).animate({ opacity: 0 }, 1000, done)
  },
  leaveCancelled: function (el) {
    $(el).stop()
  }
})

Vue.transition("stagger", {
  stagger: function (index) {
    // 每个过渡项目增加 50ms 延时
    // 但是最大延时限制为 300ms
    return Math.min(300, index * 50)
  }
})