事件、表单与组件

1.事件绑定 v-on:click="方法名" 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。事件修饰符，可以串联，注意顺序：.stop阻止单击事件继续传播 .prevent提交事件不再重载页面 .capture添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 .self只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的 .once点击事件将只会触发一次 .passive Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符，滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成，这其中包含 `event.preventDefault()` 的情况，这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

2.按键修饰符 v-on

3.表单 v-model v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked property 和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件，推荐提供一个值为空的禁用选项。与v-for结合动态渲染选项。多选的data应该使用数组。

修饰符 .lazy在“change”时而非“input”时更新 .number自动将用户的输入值转为数值类型 .trim自动过滤用户输入的首尾空白字符

4.组件在template模板里,全局注册，每个组件必须只有一个根元素，可以将模板的内容包裹在一个父元素内

Vue.component('button-counter', {

data: function(){ //一个组件的 data 选项必须是一个函数

return { count: 0 } },

props: ['title'], //Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})

组件的重构，让v-bind:post="post" props:['post']

组建通信，父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件v-on:enlarge-text="postFontSize += 0.1",子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件<button v-on:click="$emit('enlarge-text')">,可以使用 $emit 的第二个参数来抛出一个值<button v-on:click="$emit('enlarge-text', 0.1)">，父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值v-on:enlarge-text="onEnlargeText"，那么这个值将会作为第一个参数传入这个方法：methods: {onEnlargeText:function(enlargeAmount){this.postFontSize += enlargeAmount }}

组件上使用v-model（暂时跳过）<slot></slot>插槽

动态组件可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

<component v-bind:is="currentTabComponent"></component>,is在有严格限制的标签内可以使用，字符串 (例如：template: '...')

单文件组件 (.vue) <script type="text/x-template">没有限制

5.局部注册 var ComponentA = { /* ... */ } components: { 'component-a': ComponentA}

6.单文件组件

import ComponentA from './ComponentA'

import ComponentC from './ComponentC'

export default {

components: {

ComponentA,

ComponentC

// ...}