1. v-on
- v-on:click(@click)
- v-on:keydown(@keydown)
- v-on:keyup(@keyup)
- v-on:mousedown(@mousedown)
- v-on:mouseover(@mouseover)
(1)v-on注册点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="vue1026.js"></script>
</head>
<body>
<div id="app">
{{name}}
<button v-on:click="change">点击改变视图显示</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"liy"
},
methods:{
change:function(){
this.name += "-yang"
}
}
});
</script>
</html>
(2)v-on注册鼠标键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="submit">提交</button>
<div>
<span>v-on:click可简化为@click，其他事件同理将前缀v-on:简化为@</span>
<button @click="submit">提交</button>
</div>
<input type="text" placeholder="v-on:keydown" v-on:keydown="kd">
<input type="text" placeholder=" @keydown" @keydown="kd">
<input type="text" placeholder=" @keyup" @keyup="kp">
<input type="text" placeholder=" @mousedown" @mousedown="md">
<input type="text" placeholder=" @mouseover" @mouseover="mo">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
},
methods:{
submit:function(){
alert("触发了click事件：点击了提交按钮");
},
kd:function(){
alert("触发了keydown事件：点击了键盘按键");
},
kp:function(){
alert("触发了keyup事件：点击了键盘按键");
},
md:function(){
alert("触发了mousedown事件：鼠标按下");
},
mo:function(){
alert("触发了mouseover事件：鼠标经过");
}
}
});
</script>
</html>
拓展：事件修饰符及冒泡事件
- 事件修饰符：
- 冒泡事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- type="submit"的按钮，点击时会自动提交表单，在表单上加@submit事件并用事件修饰符prevent来阻止表单默认提交事件 -->
<form @submit.prevent action="http://www.baidu.com" method="get">
<input type="text" id="username" v-model="user.uname">
<input type="password" id="pwd" v-model="user.upwd">
<input type="submit" @click="formSubmit" value="表单提交">
</form>
<!-- 多个div中都注册了事件，则可能导致冒泡，可使用事件修饰符stop(v-on:**.stop或@**.stop)来避免冒泡，如：@click.stop -->
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
user:{
uname:"",
upwd:""
}
},
methods:{
formSubmit:function(){
alert("自定义表单提交事件：" + "username=" + this.user.uname + "," + "password=" + this.user.upwd);
}
}
});
</script>
</html>
2. v-text 和 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{tip}}</div>
<span v-text="name"></span>
<div v-html="name"></div>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
tip:"为了展示差值表达式闪烁问题暂时将vue.js脚本导入页面下方（即不在head位置处导入）",
name:"<h1>两者都可解决差值表达式闪值问题(网速足够慢时)，但两者在解析标签时有区别</h1>"
}
});
</script>
</html>
**备注**： v-text 和 v-html 都可解决差值表达式闪值问题。
3. v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<span v-cloak>{{name}}</span>
</div>
</body>
<script type="text/javascript" src="vue1026.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"利用v-cloak和css规则[v-cloak]{display: none}也能解决差值表达式闪值问题"
}
});
</script>
</html>
**备注**：利用v-cloak和css规则[v-cloak]{display: none}也能解决差值表达式闪值问题。
4. v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<input type="text" value="{{name}}">
<input type="text" v-bind:value="name">
<input type="text" :value="name">
<a v-bind="{href:'http://itcast.cn/index/'+id}">跳转</a>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"liy",
id:1
}
});
</script>
</html>
5. v-model 和双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- value属性只能将数据变化同步到视图 -->
<input type="text" :value="name">
<!-- v-model系统指令能够实现双向数据绑定，即不仅能将数据变化同步到视图，还能将视图上的变化同步到数据 -->
<input type="text" v-model="phone">
<!-- 表单提交默认方法是get可省略不写，action="#"代表提交到当前页面 -->
<form action="#">
<input type="text" id="username" v-model="user.uname">
<input type="password" id="pwd" v-model="user.upwd">
<input type="button" v-on:click="submit" value="注册">
</form>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"liy",
phone:"123456",
user:{
uname:"",
upwd:""
}
},
methods:{
submit:function(){
alert("username=" + this.user.uname + "," + "password=" + this.user.upwd);
console.log("username=" + this.user.uname + "," + "password=" + this.user.upwd);
}
}
});
</script>
</html>
6. v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue221.js"></script>
</head>
<body>
<div id="app">
<span>列表</span>
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
<li>{{list[3]}}</li>
</ul>
<span>遍历数组</span>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<!-- 在Vue2.0中数组的索引和值的顺序为v-for="(值,索引) in array"，而在Vue1.0中顺序相反。 -->
<ul>
<li v-for="(item,index) in list" :key="index">{{index}}-{{item}}</li>
</ul>
<span>遍历对象</span>
<ul>
<li v-for="item in user">{{item}}</li>
</ul>
<!-- 在Vue2.0中是v-for="(属性值,属性名,索引) in object",而在Vue1.0中顺序相反。 -->
<ul>
<li v-for="(item,key,index) in user">{{index}}：{{key}}：{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:["火龙果","龙眼","猕猴桃","樱桃"],
user:{
name:"liy",
phone:"123456"
}
}
});
</script>
</html>
7. v-if 和 v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<div>
<span>v-if和v-show都能实现元素的隐藏和显示，但v-if是将元素添加到dom或从dom移除，而v-show是通过为元素添加或移除{display:none}属性来实现隐藏和显示</span>
</div>
<button v-on:click="showOrHidden">显示隐藏切换</button>
<div v-if="isShow">我有一头小毛驴</div>
<div v-show="isShow">我又有一头小毛驴</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
showOrHidden:function(){
this.isShow = !this.isShow;
}
}
});
</script>
</html>
网友评论