vue — 事件处理
什么是事件
用户操作页面的一些行为或者是浏览器自己的一些行为被称之为事件。
绑定（监听）事件
事件监听(绑定)通过： v-on 指令：v-on
这个按钮被点击了 {
{ counter }} 次。
方法处理器
可以用v-on指令监听DOM事件。
//绑定了一个单击事件处理器到一个方法greet
我们绑定了⼀个单击事件处理器到⼀个⽅法 greet。下⾯在 Vue 实例中定义这个⽅法：
内联语句处理器
new Vue({ el: '#example-2', methods: { say: function (msg) { alert(msg) } }}); 有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
methods: { say: function (msg, event) { // 现在我们可以访问原生事件对象 event.preventDefault() }}; 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
.prevent和.stop，让方法是纯粹的数据逻辑而不处理DOM事件细节。
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
实例：
Do something
vue — 表单输入绑定
基础语法
可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
checkbox
单个勾选框，逻辑值：
//显示勾选状态，false或true
多个勾选框，绑定到同一个数组：
Checked names: { { checkedNames | json }}new Vue({ el: '...', data: { checkedNames: [] }}) radio
Picked: { { picked }} var vm = new Vue({ el : "#app", data:{ picked:'' }}) select
单选：
Selected: { { selected }} 多选（绑定到一个数组）：
Selected: { { selected | json }} 绑定value
对于单选按钮，勾选框及选择框选项，v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
checkbox
// 当选中时vm.toggle === vm.a// 当没有选中时vm.toggle === vm.b
radio
// 当选中时vm.pick === vm.a
select options
// 当选中时typeof vm.selected // -> 'object'vm.selected.number // -> 123
修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
vue — 组件通信
组件可以扩展HTML元素，封装可重用的代码，在较高的层面上，组件是自定义元素，vue.js的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：
模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。
方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。
私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以
1 . 创建一个组件构造器：
var MyComponent = Vue.extend({ //选项}) 2.将构造器用做组件，用Vue.component(tag,constructor)注册：
Vue.component('my-component',MyComponent) 3.在父实例的模块中以自定义元素<my-component>的形式使用：
例子：
// 定义var MyComponent = Vue.extend({ template: '
渲染为：
A custom component!
组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。可以用实例选项 replace 决定是否替换。
Props
使用props传递数据
组件实例的作用域是孤立的，可以使用props把数组传给子组件，props是组件数据的一个字段，期望从父组件传下来，子组件需要显式地用props选项声明props：
Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '{ { msg }}'}) 然后向它传入一个普通字符串：
动态props
用v-bind绑定动态props到父组件的数据，每当父组件的数据变化时，也会传导给子组件：
//
props绑定类型
prop默认是单向绑定，当父组件的属性变化时，将传导给子组件，但是反过来不会，这是为了防止子组件无意修改了父组件的状态，可以使用.sync或.once绑定修饰符显式地强制双向或单次绑定：
如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。
父子组件通信
父链
子组件可以用this.$parent访问它的父组件，根实例的后代可以用this.$root访问它，父组件有一个数组this.$children，包含它所有的子元素
自定义事件
Vue实例实现了一个自定义事件接口，用于在组件树中通信，这个事件系统独立于原生DOM事件，用法也不同，每一个Vue实例都是一个事件触发器：
使用 $on() 监听事件；
使用 $emit() 在它上面触发事件；
使用 $dispatch() 派发事件，事件沿着父链冒泡；
-
使用 $broadcast() 广播事件，事件向下传导给所有的后代。
不同于 DOM 事件，Vue 事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回 true。
// 注册子组件// 将当前消息派发出去Vue.component('child', { template: '#child-template', data: function () { return { msg: 'hello' } }, methods: { notify: function () { if (this.msg.trim()) { this.$dispatch('child-msg', this.msg) this.msg = '' } } }}) // 初始化父组件// 将收到消息时将事件推入一个数组var parent = new Vue({ el: '#events-example', data: { messages: [] }, // 在创建实例时 `events` 选项简单地调用 `$on` events: { 'child-msg': function (msg) { // 事件回调内的 `this` 自动绑定到注册它的实例上 this.messages.push(msg) } }})Messages: {
{ messages | json }}
使用v-on绑定自定义事件
在模板中子组件用到的地方声明事件处理器，为此子组件可以用v-on监听自定义事件：
<child v-on:child-msg="handleIt"></child>
当子组件触发了 "child-msg" 事件，父组件的 handleIt 方法将被调用。所有影响父组件状态的代码放到父组件的 handleIt 方法中；子组件只关注触发事件。
子组件索引
使用v-ref为子组件指定一个索引ID，可以直接访问子组件
var parent = new Vue({ el: '#parent' })// 访问子组件var child = parent.$refs.profile
使用Slot分发内容
内容分发：混合父组件的内容与子组件自己的模板的方式，使用特殊的元素作为原始内容的插槽。
编译作用域
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。 绑定子组件内的指令到一个组件的根节点：
Vue.component('child-component', { // 有效，因为是在正确的作用域内 template: ' Child ', data: function () { return { someChildProperty: true } }}) 类似地，分发内容是在父组件作用域内编译。
单个slot
父组件的内容将被抛弃，除非子组件模板包含，如果子组件模板只有一个没有特性的slot，父组件的整个内容将插到slot所在的地方并替换它。 标签的内容视为回退内容。回退内容在子组件的作用域内编译，当宿主元素为空并且没有内容供插入时显示这个回退内容。 假定 my-component 组件有下面模板：
This is my component!
如果没有分发内容则显示我。
父组件模板：
This is some original content
This is some more original content
渲染结果：
This is my component!
This is some original content
This is some more original content
具名slot
元素可以用一个特殊特性name配置如何分发内容，多个slot可以有不同的名字，具名slot将匹配内容片段中有对应slot特性的元素。 仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的回退插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。 …… ( 待更新 )