vue事件处理器
事件处理的时候，v-on,监听DOM事件，在运行的时候运行js的代码。
事件监听：v-on
<body> <div id="app"> <button v-on:click="counter+=1">点我</button> <p>这个按钮被点击了{{counter}}次</p> </div> <script> var vm = new Vue({ el:'#app', data:{ counter:0 } }) </script> </body>
通常，我们使用一个方法，调用js的方法，我们还可以使用v-on接受一个定义的方法：
<body> <div id="app"> <!--greet时我们定义的方法--> <button v-on:click="greet">点我</button> </div> <script> var vm = new Vue({ el:'#app', data:{ name:'vue.js' }, //method对象中定义方法 methods:{ greet:function(){ alert('hello'+this.name) } } }) </script> </body>
事件的修饰符：
v-on指令缩写@ （v-on:click == @click）
处理DOM事件细节，vue通过（.）表示的指令后缀来调用修饰符
.stop <a @click.stop=“doThis”> 阻止单击事件冒泡
.prevent <a @submit.prevent=“onsubmit”> 提交事件不再重载页面
.capture 添加事件侦听器的时候使用事件捕获模式
.self 在该元素本身触发时（不是子元素）触发回调
.once click事件只能点击一次 （2.14版本新增）
按键修饰符
vue允许v-on在监听键盘事件的时候，添加按键修饰符
v-on:keyCode @keyUP
.enter
.tab
.up
.left
.alt
.mate
vue.js表单
我们早介绍表单的时候，首先回顾一下双向绑定
v-model指令在表单元素上创建双向数据绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgBMtgXf-1604129049371)(C:\Users\DELL\AppData\Local\Temp\1564625799276.png)]
v-model会根据控件类型自动的选取正确的方法更新元素
输入框
<body> <div id="app"> <p>input元素</p> <input v-model="message"> <p>消息{{message}}</p> <p>textarea 元素</p> <textarea v-model="message2"></textarea> <p style="white-space: pre">{{message2}}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ message:'亲爱的，热爱的', message2:'古诗词' } }) </script> </body>
单选按钮
<body> <div id="app"> <input type="radio" id="runoob" value="林志玲" v-model="picked"> <!--label可以把光标转移到对应的元素上--> <label for="runoob">林志玲</label> <br> <input type="radio" id="google" value="迪丽热巴" v-model="picked"> <label for="google">迪丽热巴</label> <br> <span>选中值为: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : '空' } }) </script> </body>
复选框
<body> <div id="app"> <p>单个复选框</p> <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{checked}}</label> <p>多个复选框</p> <input type="checkbox" id="a" v-model="checkedName" value="方天画戟"/> <label for="a">方天画戟</label> <input type="checkbox" id="b" v-model="checkedName" value="青龙偃月"/> <label for="b">青龙偃月</label> <input type="checkbox" id="c" v-model="checkedName" value="丈八蛇矛"/> <label for="c">丈八蛇矛</label> <span>最终选定的而武器：{{checkedName}}</span> </div> <script> new Vue({ el:'#app', data:{ checked:true, checkedName:[] } }) </script> </body>
select列表
<body> <div id="app"> <select v-model="selected" name="fruit"> <option value="">选择人物</option> <option value="亚瑟">战士</option> <option value="靳柯">刺客</option> </select> <div id="output"> 选择的人物是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script> </body>
修饰符：
.lazy
在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步
.number
将用户输入的值，自动转换为number类型
.trim
自动过滤输入两端的空格
回顾：
监听事件：v-on （两种方法）
表单的使用 v-model
修饰符
作业：
1、事件监听两种方法熟练掌握
## 修饰符： .lazy 在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步 .number 将用户输入的值，自动转换为number类型 .trim 自动过滤输入两端的空格 ## 回顾： 监听事件：v-on （两种方法） 表单的使用 v-model 修饰符 ## 作业： 1、事件监听两种方法熟练掌握 2、输入框的使用
