vue 学习总结笔记（二）

一、事件处理

1.监听事件：
	v-on指令监听DOM事件
2.事件处理方法
	a.在触发时运行一些简单的javascript代码
		<button v-on:click="counter += 1">Add 1</button>
	b.接收一个需要调用的方法名称
		<button v-on:click="greet">Greet</button>
	c.在内联javascript语句中调用方法
		<button v-on:click="say('what')">Say what</button>
	d.在内联语句处理器中访问原始的DOM事件，可以用特殊变量$event把它传入方法
		<button v-on:click="warn('Form cannot be submitted yet.,'$event)">Submit</button>
3.事件修饰符：
	.stop - 调用event.stopPropagation()
	.prevent - 调用event.preeventDefault()
	.capture - 添加事件侦听器时使用capture模式
	.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
	.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
	.native - 监听组件根元素的原生事件
	.once - 只触发一次回调
	.passive - 以{passive:true}模式添加侦听器
	注： 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
	按键修饰符别名:
		.enter
		.tab
		.delete (捕获“删除”和“退格”键)
		.esc
		.space
		.up
		.down
		.left
		.right
	实例
	<!-- 方法处理器 -->
	<button v-on:click="doThis"></button>
	
	<!-- 内联语句 -->
	<button v-on:click="doThat('hello', $event)"></button>
	
	<!-- 缩写 -->
	<button @click="doThis"></button>
	
	<!-- 停止冒泡 -->
	<button @click.stop="doThis"></button>
	
	<!-- 阻止默认行为 -->
	<button @click.prevent="doThis"></button>
	
	<!-- 阻止默认行为，没有表达式 -->
	<form @submit.prevent></form>
	
	<!--  串联修饰符 -->
	<button @click.stop.prevent="doThis"></button>
	
	<!-- 键修饰符，键别名 -->
	<input @keyup.enter="onEnter">
	
	<!-- 键修饰符，键代码 -->
	<input @keyup.13="onEnter">
	
	<!-- 点击回调只会触发一次 -->
	<button v-on:click.once="doThis"></button>	

二、表单输入绑定

1.基础用法：v-model指令
	a.v-model 指令在表单input和textarea元素上创建双向数据绑定。
	b.v-model 会忽略所有的表单元素的value，checked，selected特性的初始值，
		而总是将vue示例的数据作为数据来源，所以初始值应该声明到data中。
	c.对于需要使用输入法（如：中文，日文等）的语言，v-model不会再输入法组合文字过程中得到更新。
	如果要处理这个过程，需要使用input事件。
2.复选框
	a.单个复选框：选中与不选中获取true和false，会忽略checkbox本身的value值
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label>
		new Vue({
		  el: '#example-2',
		  data: {
		    checked: false //值是true或false
		  }
		})
	b.多个复选框，绑定到同一个数组，选中获取一个数组，包含被选中的复选框的value
	<div id='example-3'>
	  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	  <label for="jack">Jack</label>
	  <input type="checkbox" id="john" value="John" v-model="checkedNames">
	  <label for="john">John</label>
	  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	  <label for="mike">Mike</label>
	  <br>
	  <span>Checked names: {{ checkedNames }}</span>
	</div>	
	new Vue({
	  el: '#example-3',
	  data: {
	    checkedNames: [] // 值是"Jack"，"John"或"Mike"
	  }
	})
3.单选框：获取选中的value值
	<div id="example-4">
	    <input type="radio" id="one"  value="One" v-model="picked">
	    <label for="one">One</label>
	    <br>
	    <input type="radio" id="two" value="Two" v-model="picked">
	    <label for="two">Two</label>
	    <br>
	    <span>Picked: {{ picked }}</span>
   </div>
   new Vue({
	    el: '#example-4',
	    data: {
	        picked: 'One' //表示默认选中第一个radio,若为空则都不选中
	    }
	})
4.select下拉选择框：
	若option有value值，选中时获取的是value值，若无，则获取option的text；多选获的一个被选中的值组成的数组。
	<div id="example-5">
	    <select v-model="selected" multiple="multiple">
	        <option disabled value="">请选择</option>
	        <option >A</option>
	        <option >B</option>
	        <option >C</option>
	    </select>     
	    <span>Selected: {{ selected }}</span>
	</div>
	new Vue({
	    el: '#example-5',
	    data: {
	        selected: ''
	    }
	})
	注： 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
5. 修饰符：
	 a. .lazy: 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。添加 lazy 修饰符，从而转变为使用 change 事件进行同步
	 <!-- 在“change”时而非“input”时更新 -->
	 <input v-model.lazy="msg" >
	b. .number: 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串
	c. .trim: 自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符