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>1234567891011121314 通常，我们使用一个方法，调用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>123456789101112131415161718192021 事件的修饰符：
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>123456789101112131415161718192021 单选按钮
<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>12345678910111213141516171819202122 复选框
<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>1234567891011121314151617181920212223242526 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>12345678910111213141516171819202122 修饰符：
.lazy
在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步
.number
将用户输入的值，自动转换为number类型
.trim
自动过滤输入两端的空格
回顾：
监听事件：v-on （两种方法）
表单的使用 v-model
作业：
## 修饰符：
.lazy
在默认的情况下，v-model在input事件中同步输入框的值与数据，如果输入.lazy，转变在change事件中同步
.number
将用户输入的值，自动转换为number类型
.trim
自动过滤输入两端的空格
## 回顾：
监听事件：v-on （两种方法）
表单的使用 v-model
修饰符
## 作业：
1、事件监听两种方法熟练掌握
2、输入框的使用 ![Java小案例——随机数猜测随机数猜测[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)