目錄
1 v-on 指令
v-on 指令用來監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼
1.1 v-on:click
v-on:click 是用來點擊事件的指令，可以和 button 標籤一起使用，看一下案例：
- 使用v-on:click綁定fun函數
- 通過 methods 方法編寫方法體
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('twoStar')">點擊</button> <!--v-on:click指令綁定fun1函數-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"oneStar"
},
methods:{ //methods（方法）表示一個具體的操作, 主要寫 業務邏輯
fun1:function (msg) { //方法體
this.message=msg;
}
}
});
</script>
</html>
點擊後message的值改變
1.2 v-on:keydown
v-on:keydown 指令表示鍵盤按下事件，這裏做一個案例：讓鍵盤只有按下 0~9 纔有效，其他按鍵均無效
- 創建text，用來鍵盤輸入顯示，綁定函數並傳入 event 參數
- 創建方法體
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--創建text，用來鍵盤輸入顯示，綁定函數並傳入 event 參數-->
<input type="text" v-on:keydown="fun2($event)">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
//方法體
fun2:function (event) {
var keyCode = event.keyCode; //定義按鍵事件
if(keyCode < 48 || keyCode > 57){ //判斷按鍵值
event.preventDefault(); //按鍵不生效
}
}
}
});
</script>
</html>
只有在text中輸入 0~9 數字才生效
1.3 v-on:mouseover
v-on:mouseover 指令表示鼠標移動到某個文件域事件，案例：在一個文件域上模擬鼠標移動和阻止事件傳播
- 在div上創建一個textarea區域
- 設置鼠標懸停事件
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)">文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠標懸停在div上");
},
fun2:function (event) {
alert("鼠標懸停在textarea上");
event.stopPropagation();
}
}
});
</script>
</html>
1.4 事件修飾符
在 Vue.js 中，提供了事件修飾符來處理 DOM 事件細節，通過由點(.)表示的指令後綴來調用修飾符，常用的事件如下：
- .stop：觸發停止事件
- .prevent：觸發阻止事件
- .capture：捕獲事件
- .self：觸發自己的事件
- .once：只執行一次事件
這裏演示 prevent 阻止事件，先創建提交到百度的表單，然後阻止其跳轉
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:事件修飾符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent action="http://www.baidu.com" method="get">
<input type="submit" value="提交">
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app"
});
</script>
</html>
1.5 按鍵修飾符
按鍵修飾符是獲取按下鍵盤的事件，Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符，全部的按鍵別名如下：
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
以 .enter 爲例
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:按鍵修飾符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keydown.enter="fun($event)">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun:function () {
alert("按下了enter鍵")
}
}
});
</script>
</html>
2 v-text 、v-html、v-blind
2.1 v-text 與 v-html
- v-text：顯示原文本
- v-html：以標籤內容顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text與v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div> <!--顯示文本-->
<div v-html="message"></div> <!--顯示標籤內容-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>oneStar</h1>"
}
});
</script>
</html>
2.2 v-blind
在前面使用插值表達式的時候，都是在標籤內部寫插值表達式，如果要給標籤的屬性賦值，綁定插值表達式，那就要用到 v-blind 指令
來看案例：在設置HTML文本字體顏色的時候，可以使用 v-blind 來綁定顏色
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-blind</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">派大星</font>
<font size="5" :color="ys2">海綿寶寶</font>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green",
}
});
</script>
</html>
3 v-model
可以使用 v-model 指令給 value 屬性賦值，比如給 form 表單中的 value 賦值：
<!DOCTYPE html>
<html xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
用戶：<input type="text" name="username" v-model="user.username"><br>
密碼：<input type="text" name="password" v-model="user.password"><br>
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"oneStar",
password:"123"
}
}
});
</script>
</html>
4 v-for
v-for 指令是用來循環遍歷的，相當於 for 循環，這裏演示遍歷數組、遍歷對象、遍歷對象數組
4.1 遍歷數組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷數組</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(arr,index) in arrs">{{arr +" : "+ index}}</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arrs:[1,2,3,4]
}
});
</script>
</html>
4.2 遍歷對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in person">{{key + " : " + value}}</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
person:{
name:"oneStar",
age:18
}
}
});
</script>
</html>
4.3 遍歷對象數組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序號</td>
<td>姓名</td>
<td>年齡</td>
</tr>
<tr v-for="(person,index) in persons">
<td>{{index}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
persons:[
{name:"oneStar",age:18},
{name:"twoStar",age:19},
{name:"threeStar",age:20}
]
}
});
</script>
</html>
5 v-if 與 v-show
- v-if 是根據表達式的值來決定是否渲染元素
- v-show是根據表達式的值來切換元素的display css屬性
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-if與v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-if="flag">派大星</div>
<div v-show="flag">海綿寶寶</div>
<button v-on:click="change">轉換</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false,
},
methods:{
change:function () {
this.flag = !this.flag;
}
}
});
</script>
</html>
點擊轉換能將上面的文字影藏和顯示
