事件处理
监听事件：用v-on 来监听DOM事件，并在触发时执行一些JS语句
然而有很多操作逻辑很复杂，就不能把大量语句写在v-on指令中了，需要在v-on后面接一个方法名
直接接js操作
<div id="demo">
<p>已经按了{{counter}}次</p>
<button v-on:click="counter++">点击</button>
</div>
接方法名
<div id="demo2">
<button v-on:click="great">Greet</button>
</div>
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
<button v-on:click="say('hi')">Say hi</button>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
添加事件监听器时使用事件捕获模式
即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>
只当在 event.target 是当前元素自身时触发处理函数
即事件不是从内部元素触发的
<div v-on:click.self="doThat">...</div>
按键修饰符
按键别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
使用 v-on 有几个好处：
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
表单输入绑定
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。其实是语法糖！
表单输入绑定用的时候再看
组件基础
简单的组件案例
<div id="demo">
<item></item>>
</div>
<script>
Vue.component('item',{
data:function(){
return {
count:0
}
},
template:`<button v-on:click="count++">你已经点了{{count}}次</button>`
})
new Vue({
el:'#demo'
})
</script>
因为组件是可以复用的Vue实例，所以与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等，仅有的例外是像el只有根实例才有
组件的复用
<div id="demo">
<item></item>>
<item></item>>
<item></item>>
</div>
点击按钮时，每个组件都会维护自己的count，因为每用一次组件就会有一个新的实例被创建
为什么组件的data必须是一个函数？
data: function () {
return {
count: 0
}
}
因为这样返回的是不同的对象，每个实例可以维护一份被返回对象的独立的拷贝，不这样的话，他们其实还是指向的同一个对象，牵一发动全身
通过prop向子组件传递数据
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
<uesprops title="hehe"></uesprops>
<uesprops title="xixi"></uesprops>
<uesprops title="haha"></uesprops>
Vue.component('uesprops', {
props: ['title'],
template: `<h2>{{title}}</h2>`
})
好像组件命名不允许有大写字母
用 v-bind 来动态传递 prop。一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的
<li is="uesprops"
v-for="item in posts"
v-bind:title="item.title"
>
</li>
Vue.component('uesprops', {
props: ['title'],
template: `<h2>{{title}}</h2>`
})
new Vue({
el: '#demo',
data: {
posts: [{
id: 1,
title: 'My journey with Vue'
},
{
id: 2,
title: 'Blogging with Vue'
},
{
id: 3,
title: 'Why Vue is so fun'
}
]
}
})
单个根元素
当你遇到这个问题的时候
every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
有的时候组件愈来愈复杂，为每个相关的信息定义一个 prop 会变得很麻烦：像这样
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.content"
v-bind:publishedAt="post.publishedAt"
v-bind:comments="post.comments"
></blog-post>
需要重构一下这个组件,props直接接收一个对象
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
通过事件向父组件发送消息
<div v-bind:style="{fontSize:fontsize+'em'}">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge="fontsize+=0.1"
监听enlarge事件，如果触发了，就执行后面的js语句或者方法
来处理父组件里的fontsize属性
>
</blog-post>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge')" >变大吧</button>
监听点击事件，如果监听到了点击，就用$emit（）触发enlarge事件
</div>
`
})
new Vue({
el: '#demo',
data: {
fontsize:1,
posts: [{
id: 1,
title: 'My journey with Vue',
},
{
id: 2,
title: 'Blogging with Vue',
},
{
id: 3,
title: 'Why Vue is so fun',
}
]
}
})
使用事件抛出值
即$emit()的第二个参数可以用$event访问到这个被抛出的值
<button v-on:click="$emit('enlarge',0.1)" >变大吧</button>
<div v-bind:style="{fontSize:fontsize+'em'}">
<blog-post v-on:enlarge="fontsize+=$event">
</blog-post>
如果事件处理函数是一个方法，那么$event 将成为函数的第一个参数
<blog-post v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge='enlargeText'>
</blog-post>
methods: {
enlargeText:function(x){
this.fontsize +=x
}
}
组件上使用v-model
<input v-model="searchText">
等价于：
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
