- 属性值的监听
- class属性的绑定
- style属性的绑定
- v-show指令
- v-if指令
- v-else-if指令
- v-for循环指令
- 遍历
- 事件对象
- 键盘事件
- 鼠标事件
1.属性值的监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
你的姓: <input type="text" name="" id="" value="" v-model="xing" />
<br>
你的名:<input type="text" name="" id="" value="" v-model="ming" />
<br>
<!-- 全名:<input type="text" name="" id="" value="" v-model="xing.concat(' ').concat(ming)" /> -->
全名:<input type="text" name="" id="" value="" v-model="fullname" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
xing:'',
ming:'',
fullname:''
},
//属性的监听
watch:{
//参数1,属性变化后的新值,参数2,属性变化之前的旧值
xing:function(newValue,oldValue){
console.log("xing属性的值:新值:"+newValue+"===旧值"+oldValue)
this.xing=newValue;
},
ming:function(newValue,oldValue){
console.log("名属性的值:新值:"+newValue+"===旧值"+oldValue)
this.fullname=this.xing.concat(' ').concat(newValue);
}
}
})
</script>
</html>
2.属性监听的第二种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
你的姓: <input type="text" name="" id="" value="" v-model="xing" />
<br>
你的名:<input type="text" name="" id="" value="" v-model="ming" />
<br>
<!-- 全名:<input type="text" name="" id="" value="" v-model="xing.concat(' ').concat(ming)" /> -->
全名:<input type="text" name="" id="" value="" v-model="fullname" />
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
data:{
msg:'hello',
xing:'',
ming:'',
fullname:''
}
})
//手动挂载模板
vm.$mount('#box');
//调用vue实例的全局方法,来进行属性值的监听。
vm.$watch('xing', function (newVal, oldVal) {
// 做点什么
console.log("xing属性的值:新值:"+newVal+"===旧值:"+oldVal)
})
vm.$watch('ming', function (newVal, oldVal) {
// 做点什么
console.log("ming属性的值:新值:"+newVal+"===旧值:"+oldVal)
})
//获取vue的管理的模板标签对象
var obj=vm.$el;
console.log(obj);
var msg=vm.$data.msg;
console.log(msg);
</script>
</html>
3.class属性的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aClass {
font-size: 30px;
color: red;
}
.bClass {
background-color: yellow;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 普通的写法,就是个class属性 -->
<h1 class="aClass">1111111111111111111111111111</h1>
<h1 class="aClass bClass">1111111111111111111111111111</h1>
<!-- vue的绑定class属性 注意 用单引号括起来 -->
<h1 v-bind:class="'aClass'">2222222222222222222222</h1>
<!-- vue绑定多个class属性的值,使用数组-->
<h1 v-bind:class="['aClass','bClass']">2222222222222222222222</h1>
<!-- vue 常用的绑定class属性的写法 使用对象
aClass:false 表示aClass不生效
bClass:true 表示bClass生效
-->
<h1 v-bind:class="{aClass:false,bClass:true}">333333333333333333333333333</h1>
<!-- 让true 和 false 可以定义成变量 -->
<h1 v-bind:class="{aClass:a,bClass:b}">4444444444444444444444444</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
a:true,
b:true
}
})
</script>
</html>
4.样式的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aClass {
font-size: 30px;
color: red;
background-color: yellow;
}
.bClass {
font-size: 30px;
color: blue;
background-color:palegreen;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 常用的写法-->
<h1 :class="{'aClass':aflag,'bClass':bflag}" @click="change()">一行文字222222222222222222222</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
aflag:true,
bflag:false
},
methods:{
change(){
this.aflag=!this.aflag;
this.bflag=!this.bflag;
}
}
})
</script>
</html>
5.style属性的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 普通的方式 -->
<h1 style="color: #FF0000;background: yellow;">111111111111111111111111111111</h1>
<!-- vue 绑定style属性的方式 -->
<h2 v-bind:style="{'color':'red','background-color':'blue'}">22222222222222</h2>
<!-- css属性的值,写成变量 -->
<h2 :style="{'color':mycolor,'background-color':mybgcolor}">33333333333333333333</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
mycolor:'#ff0000',
mybgcolor:'yellow'
}
})
</script>
</html>
6.切换样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!--绑定style属性 常用的写法 -->
<h1 :style="{'color':color,'background-color':bgcolor}" @click="change(flag=!flag)">222222222</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
flag:false,
color:'yellow',
bgcolor:'red'
},
methods:{
change(f){
/* if(this.flag){
this.color='blue',
this.bgcolor='pink'
}else{
this.color='yellow',
this.bgcolor='red'
}
this.flag=!this.flag; */
if(f){
this.color='blue',
this.bgcolor='pink'
}else{
this.color='yellow',
this.bgcolor='red'
}
}
}
})
</script>
</html>
7.v-show指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 200px;
background-color: #98FB98;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- v-show 可以控制元素的隐藏和显示,false 隐藏,true 显示
通过 display: none; 来做的
-->
<div id="d1" v-show="flag">
</div>
<button type="button" @click="hidden()">隐藏</button>
<button type="button" @click="show()">显示</button>
<button type="button" @click="toggle(flag=!flag)">切换</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
flag:true
},
methods:{
hidden(){
this.flag=false;
},
show(){
this.flag=true;
},
toggle(f){
this.flag=f;
}
}
})
</script>
</html>
8.v-if指令
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 200px;
background-color: #98FB98;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- v-if 可以控制元素的隐藏和显示,false 隐藏,true 显示
通过创建和销毁dom元素来实现的。
v-if 一开始就是false的话 不会预先创建dom元素
-->
<div id="d1" v-if="flag">
</div>
<button type="button" @click="hidden()">隐藏</button>
<button type="button" @click="show()">显示</button>
<button type="button" @click="toggle(flag=!flag)">切换</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
flag:true
},
methods:{
hidden(){
this.flag=false;
},
show(){
this.flag=true;
},
toggle(f){
this.flag=f;
}
}
})
/* v-if vs v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 */
</script>
</html>
9.v-else指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h1 v-if="flag">真的爱我</h1>
<h1 v-else>你不爱我</h1>
<button type="button" @click="change(flag=!flag)">切换</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
flag:true
},
methods:{
change(f){
this.flag=f;
}
}
})
</script>
</html>
10.v-else-if指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h1>请输入你的成绩 0---100 分</h1>
<input type="" name="" id="" value="" v-model="score" />
<h2 v-if="score>=0&&score<60">成绩不及格</h2>
<h2 v-else-if="score>=60&&score<70">成绩很差</h2>
<h2 v-else-if="score>=70&&score<80">成绩中等</h2>
<h2 v-else-if="score>=80&&score<90">成绩良好</h2>
<h2 v-else-if="score>=90&&score<=99">成绩优秀</h2>
<h2 v-else-if="score==100">成绩满分,很棒的!</h2>
<h2 v-else>成绩不合法</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
score:0
},
})
</script>
</html>
11.v-for循环指令
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute: 建议尽可能在使用 v-for 时提供 key attribute
(容器中的当前元素,元素的索引) in 容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul>
<!-- 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,
从而重用和重新排序现有元素,
你需要为每项提供一个唯一 key attribute:
建议尽可能在使用 v-for 时提供 key attribute
-->
<!-- (容器中的当前元素,元素的索引) in 容器 -->
<li v-for="(ele,index) in arr" :key="index">
{{index}}----{{ele}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
arr:[10,20,30,40,50,60,70,80,90,100]
}
})
</script>
</html>
12.遍历json对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul>
<!-- (值,键,键值对索引) in json对象 -->
<li v-for="(value,key,index) in obj" :key="key">
{{key}}---{{value}}---{{index}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
obj:{
'username':'张三',
'age':23,
'sex':'男'
}
}
})
</script>
</html>
13.遍历对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul>
<!-- (值,键,键值对索引) in json对象 -->
<li v-for="(obj,index) in arr" :key="index">
{{obj.username}}---{{obj.age}}---{{obj.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'hello',
arr: [{
'username': '张三',
'age': 23,
'sex': '男'
}, {
'username': '李四',
'age': 24,
'sex': '女'
}, {
'username': '王五',
'age': 25,
'sex': '男'
}]
}
})
</script>
</html>
14.v-if和v-for不建议在同一元素上同时使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul>
<!-- 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,
从而重用和重新排序现有元素,
你需要为每项提供一个唯一 key attribute:
建议尽可能在使用 v-for 时提供 key attribute
-->
<!-- (容器中的当前元素,元素的索引) in 容器 -->
<!-- 注意我们不推荐在同一元素上使用 v-if 和 v-for -->
<li v-for="(ele,index) in arr" :key="index" v-if="index%2==0">
{{index}}----{{ele}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
arr:[10,20,30,40,50,60,70,80,90,100]
}
})
</script>
</html>
15.案例演示(数组修改删除怎么触发视图更新)
数组更新检测
变更方法
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="(obj,index) in jsonArr" :key="index">
<b>姓名:</b>{{obj.name}}----<b>年龄:</b>{{obj.age}}---<b>性别:</b>{{obj.sex}}
<a href="#" @click="delObj(index,obj.name)">删除</a>----<a href="#" @click="update(index)">修改</a>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
obj: {
"name": "老沈",
"age": 1,
"sex": "男"
},
jsonArr: [{
"name": "张三",
"age": 100,
"sex": "女"
}, {
"name": "李四",
"age": 200,
"sex": "男"
}, {
'name': '王五',
'age': 300,
'sex': '男'
}]
},
methods: {
//根据元素的索引来删除。
delObj(index,name) {
if(confirm("确认删【"+name+"】除吗?")){
this.jsonArr.splice(index,1);
}
},
//根据索引来修改元素
update(index){
this.jsonArr[index]=this.obj;
console.log(this.jsonArr);
//当你调用 reverse() 这个方法,数组元素发生变化,会触发视图的更新。
this.jsonArr.reverse().reverse();
//当你调用 splice() 这个方法,数组元素发生变化,会触发视图的更新。
//this.jsonArr.splice(index,1,this.obj);
}
}
})
/*
数组更新检测
变更方法
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
*/
</script>
</html>
16.json对象增加属性或者删除属性怎么触发视图的更新
对json对象中,原来有的属性,进行修改,可以触发视图更新
使用vue提供的方法,对json对象中的属性,进行添加和删除操作,可以触发视图的更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="(value,key,index) in obj" :key="index">{{key}}-------{{value}}</li>
</ul>
<button type="button" @click="update()">给json对象中增加属性或删除属性要触发视图更新</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
obj: {
"name": "老沈",
"age": 1,
"sex": "男"
}
},
methods:{
update(){
//对json对象中,原来有的属性,进行修改,可以触发视图更新
// this.obj.name="老王";
// this.obj.age=10;
// this.obj.sex="女";
//给JOSN对象增加或删除属性,这样做,json对象中的属性发生变化了,但是触发不了视图的更新
// this.obj.sal=8888;
// delete this.obj.age;
// console.log(this.obj);
//使用vue提供的方法,对json对象中的属性,进行添加和删除操作,可以触发视图的更新
this.$set(this.obj,'sal','8888888');
this.$delete(this.obj,'age');
}
}
})
</script>
</html>
17.案例练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<center>
<h1>添加学生</h1>
姓名:<input type="text" name="" id="" value="" v-model="name" />
年龄:<input type="text" name="" id="" value="" v-model="age" />
<button type="button" @click="addEle()">添加学生</button>
<h3>学生信息表</h3>
<table border="1" cellspacing="0" cellpadding="" width="60%">
<tr>
<th width="30px"><input type="checkbox" id="" value="" /></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr align="center" v-for="(obj,index) in jsonArr" :key="index">
<td width="30px"><input type="checkbox" id="" value="" /></td>
<td>{{index+1}}</td>
<td>{{obj.name}} <a href="#">修改</a></td>
<td>{{obj.age}} <a href="#">修改</a></td>
<td><a href="#">删除</a></td>
</tr>
<tr align="center">
<td colspan="4"><a href="#" @click="delAll()">全部删除</a>
<a href="#">删除所选</a>
</td>
</tr>
</table>
</center>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
name:'',
age:'',
jsonArr: []
},
methods:{
addEle(){
//获取表单填的数据,添加到数组中
var name=this.name;
var age=this.age;
if(!name||!age){ //空串转为false
alert("姓名或年龄不能为空")
return;
}
//封装为json对象
var jsonObj={'name':name,'age':age};
//添加到数组中
this.jsonArr.push(jsonObj);
//清空一下表单数据
this.name='';
this.age='';
},
delAll(){
if(confirm("确认删除全部吗?")){
this.jsonArr=[];
}
}
}
})
</script>
</html>
18.事件对象
vue传递事件对象 $event
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- vue传递事件对象 $event
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:
-->
<button type="button" @click="change($event)">一个按钮</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
change(e){
//alert(e.type);
e.target.style.background="red";
}
}
})
</script>
</html>
19.使用事件对象阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<div id="wai" @click="wai($event)">
<button @click="nei($event)" type="button">按钮</button>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
wai(e){
//调用事件对象中的方法,来阻止冒泡
e.stopPropagation();
alert("外")
},
nei(e){
e.stopPropagation();
alert("内")
}
}
})
</script>
</html>
20.使用vue的方式阻止事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的 -->。
<!-- stop 事件修饰 stop 可以阻止冒泡 -->
<div id="wai" @click.stop="wai()">
<button @click.stop="nei()" type="button">按钮</button>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
wai(){
alert("外")
},
nei(){
alert("内")
}
}
})
</script>
</html>
21.阻止元素默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 阻止a标签默认跳转页面的行为 -->
<a href="http://www.163.com" @click="intoPage($event)">进入网易</a>
<!-- 阻止表单默认的同步提交行为 -->
<form action="123.html" method="get" @submit="tijiao($event)">
<input type="text" name="username" id="" value="" />
<input type="submit" value="提交表单"/>
</form>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
intoPage(e){
//调用事件对象的方法,来阻止元素的more行为
e.preventDefault();
alert("执行点击事件");
},
tijiao(e){
e.preventDefault();
alert("异步提交");
}
}
})
</script>
</html>
22.使用vue的方式阻止元素的默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 阻止a标签默认跳转页面的行为
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
-->
<a href="http://www.163.com" @click.prevent="intoPage()">进入网易</a>
<!-- 阻止表单默认的同步提交行为 -->
<form action="123.html" method="get" @submit.prevent="tijiao()">
<input type="text" name="username" id="" value="" />
<input type="submit" value="提交表单"/>
</form>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
intoPage(){
alert("执行点击事件");
},
tijiao(){
alert("异步提交");
}
}
})
</script>
</html>
23.让事件执行一次
.once 事件修饰符,让事件只执行一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- .once 事件修饰符,让事件只执行一次 -->
<button type="button" @click.once="show()">一个按钮</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
show(){
alert("弹出一次");
}
}
})
</script>
</html>
24.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<input type="text" name="" id="" value="" @keypress="show($event)"/>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
show(e){
//使用事件对象来获取键码进行判断,但是太繁琐
if(e.keyCode==13){
alert("开始搜索");
}
}
}
})
</script>
</html>
25.键盘事件vue的方式来监听某个键
按键修饰符
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
使用 keyCode attribute 也是允许的:
<input v-on:keyup.13="submit">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 按键修饰符
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
使用 keyCode attribute 也是允许的:
<input v-on:keyup.13="submit">
-->
<input type="text" name="" id="" value="" @keypress.enter="show($event)" />
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'hello'
},
methods: {
show() {
alert("开始搜索");
}
}
})
</script>
</html>
26.鼠标事件的按键修饰符
2.2.0 新增
.left
.right
.middle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 鼠标按钮修饰符
2.2.0 新增
.left
.right
.middle -->
<button type="button" @mousedown.left="show($event)">一个按钮</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
show(e){
/* //e.button==0 0 1 2
if(e.button==0){
alert("鼠标按下");
} */
alert("鼠标按下");
}
}
})
</script>
</html>