Vue事件
v-on绑定事件，简写@，
要拿到事件对象，可以直接在methods里写函数传形参，如：
事件对象如果有自定义参数，一定要用$event显示出来，否则第一个参数默认为事件对象。
如果单传一个event，那是一个实参，并没有赋值，所以不行，加上$符就会去寻找Vue内置的event对象。
如果有自定义参数，一定要用$event显示出来，若没有，函数第一个形参就是事件对象e,
上面形参如果不用$enent时，则在vue中找不到event对象，是undefined。
（通常规范下：$event会放在最后一个形参，对应的methods里的函数方法也会在最后一个形参放e）
事件修饰符
v-on:click.stop='click(1)'----------------就可以完成阻止事件冒泡
v-on:click.prevent='iptClick'------------阻止默认事件
v-on:click.capture='catchClick'---------阻止事件捕获
.self表示你触发的这个事件必须是我自己
.once只绑定一次事件
系统键:
.ctrl
.alt
.shift
.meta
(在Mac系统键盘上，meta对应command键，在windows系统键盘meta对应windows徽标键)，在Sun操作系统键盘上，meta对应实心宝石键。在其他特定键盘上，尤其在MIT 和Lisp机器的键盘，以及其后续产品，如knight键盘、space-cadet键盘，meta被标记为'META'.在symbolics键盘上，meta被标记为'META'或者'Meta'。
事件修饰符是可以链式调用的
<input type='text' @keyup.enter='add'/>
即为input框绑定了一个按下enter触发的事件
v-model能实时拿到表单中的值，如：
.trim()能清除前后的空格
文本表单：
<input type='text' v-model='username' @input='inputHandle'>
<textarea v-model='message'></textarea>
复选框：
<input type='checkbox' v-model='checked'>---//这里的checked放布尔值
<label>我已阅读此协议</label>
多选框：
<div>请选择你的爱好：</div>
<input type='checkbox' v-model='favArr'>
<label>读书</label>
<input type='checkbox' v-model='favArr'>
<label>编程</label>
<input type='checkbox' v-model='favArr'>
<label>跑步</label>
<input type='checkbox' v-model='favArr'>
<label>打游戏</label>
--------这样就选一个就会全部选中，如何让他们关联呢？
给每个checkbox里加上value值
<div>请选择你的爱好：</div>
<input type='checkbox' value='1' v-model='favArr'>
<label>读书</label>
<input type='checkbox' value='1' v-model='favArr'>
<label>编程</label>
<input type='checkbox' value='1' v-model='favArr'>
<label>跑步</label>
<input type='checkbox' value='1' v-model='favArr'>
<label>打游戏</label>
data里命名一个 favArr 里面放一个空数组。
favArr=[1]-------表示选中value为1的值，一定要和value匹配
favArr.push(2)------1 2一起选中
一般value值写数字，因为从接口中调出来的经常有数组，
favList:[
{id:1 , label:'读书'},
{id:2 , label:'编程'},
{id:3 , label:'跑步'},
{id:4 , label:'打游戏'}
]-----------用v-for循环渲染到页面中
<span>请选择你的爱好
<div v-for='item in favList'>
<input type='checkbox' :value='item.id' v-model='favArr'>
<label v-text='item.label'></label>
</div>
</span>
下拉选框：
<!--下拉框-->
<div id="app">
<select v-model="selected">
<option value="A被选">A</option>
<option value="B被选">B</option>
<option value="C被选">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
下拉选框的多选：
多选就是要给select加上一个multiple属性(按住ctrl键)
单选框：
<!--单选按钮-->
<div id="app">
<input type="radio" id="small" value="small_value" v-model="picked">
<label for="small">small</label>
<br>
<input type="radio" id="big" value="big_value" v-model="picked">
<label for="big">big</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
复选框：
<!--复选框-->
<div id="app">
<input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
<label for="one">选项一</label>
<input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
<label for="two">选项二</label>
<input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
<label for="three">选项三</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
表单修饰符:
都可以链式调用
v-model.number='aaa'--------把一个数字的字符串转成number类型。
v-model.trim='bbb'----------去掉开头和结尾的空格
v-model.lazy='ccc'------------等你输完之后再去改变(失去焦点)，不会输一次内容触发一次
只有表单和事件有修饰符
在Vue视图里，用data变量不需要加this，this仅在methods方法里写函数时调用声明值需要用到。
变异方法---------改变原数组的数组方法splice，push，pop等等
非变异方法-------不改变原数组组的方法concat，split等等
vue实例，也叫vue组件，
生命周期
钩子函数：
errorCaptured组件有bug触发
$destroyed-----手动销毁
在created和before create之间做了很多处理
（注入和响应式处理），声明式变量遍历，进行响应式处理，挂载当前组件实例对象上。
beforemount mounted之间先找el挂载的组件，然后触发beforemount，发生了替换，创建了虚拟dom（json文件），从而替换被挂载页面中的那些vue指令 (mounted意为挂载)
beforeUpdate updated中间进行了Diff运算，找出虚拟dom中变化的最小节点，把真实的DOM操作更新在页面中，(在值更新完成触发beforeUpdate，在视图更新响应完成后触发updated)
也是比较特殊的两个可以触发多次的钩子函数
bedestoryed destoryed把响应式里的监听器移除，并把各个组件的事件绑定，响应式的变量（通常在这两者之间去销毁定时器）
调接口放在created 或者mounted里调，mounted里调接口更多
