Kenny 的 vue 学习之路（二）

模板语法

在DOM中是用模板时，需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转化为小写。

语法缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

Class 与 Style 绑定

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}
<style type="text/css">
  	.active {color: red;}
</style>

条件渲染

注意，v-show 不支持 元素，也不支持 v-else。

数组更新检测

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。所以 Vue 对数组的方法进行重新包装，对于重新包装过的方法是可以进行检测的，当然不可能对所有的情况进行重写处理。 对于这些没有被检测到的变更，需要根据Vue提供的一些通用方法进行处理，这样就可以将这些变更纳入Vue的系统中进行处理了。参考 如何追踪变化

事件处理

事件修饰符

在时间处理程序中调用 event.preventDefault() 或 event.stopPropagation是常见的额需求。尽管我们可以在方法中轻松实现这点，但是更好的方式是：方法只有纯粹的数据逻辑，二不是去处理DOM时间细节。为此，Vue.js为 v-on 提供了 时间修饰符，修饰符是由点开头的指令后缀来表示。

• .stop 阻止单击事件继续传播
• .prevent 阻止默认事件
• .capture 添加事件监听，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
• .self 只有当 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的

表单输出绑定

通过 v-model 属性可以双向绑定数据