2020-2-27 seo達人
1.v-on ：可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼
（1）v-on:click綁定點擊事件
<!DOCTYPE html>
<html>
<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('test')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:'#app',
data:{
message:'hello vue'
},
methods:{
fun1:function (msg) {
this.message=msg;
}
}
});
</script>
</html>
(2)v-on:keydown事件會在用戶按下一個鍵盤按鍵時發(fā)生
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
傳統(tǒng)JS：<input type="text" οnkeydοwn="showKeyCode()"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
/ $event 它是vue中的事件對象 和我們傳統(tǒng)js的event對象是一樣的 /
fun:function(event){
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
}
}
});
//傳統(tǒng)js的鍵盤按下事件
function showKeyCode(){
//event對象和我們的document對象以及window對象是一樣的，可以不用定義直接使用
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode == 13){
// alert("你按的是回車");
// }
}
</script>
</html>
（3）v-on:mouseover 當鼠標指針位于元素上方時,會發(fā)生 mouseover 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">這是一個文件域</textarea>
</div>
<!--<div οnmοuseοver="divmouseover()" id="div">
<textarea οnmοuseοver="textareamouseover()">這是一個文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/*
@事件名稱 就是 v-on:事件名稱的簡寫方式
@mouseover它就等同于v-on:mouseover
/
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標懸停在div上了");
},
fun2:function(event){
alert("鼠標懸停在textarea上了");
event.stopPropagation();
}
}
});
//傳統(tǒng)的js方式
function divmouseover(){
alert("鼠標移動到了div上了");
}
function textareamouseover(){
alert("鼠標移動到了textarea上了");
event.stopPropagation();
}
</script>
</html>
(4).Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節(jié)，如：event.preventDefault() 或 event.stopPropagation()。注意:該方法將通知 Web 瀏覽器不要執(zhí)行與事件關聯(lián)的默認動作(如果存在這樣的動作)
Vue.js通過由點(.)表示的指令后綴來調用修飾符。
.stop
.prevent
.capture
.self
.once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修飾符</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itheima.com" method="post" >
<input type="submit" value="提交">
</form>
<!--<form action="http://www.itheima.com" method="post" οnsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
<hr/>
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop="fun2($event)">這是一個文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標懸停在div上了");
},
fun2:function(event){
alert("鼠標懸停在textarea上了");
}
}
});
//傳統(tǒng)js方式
function checkForm(){
alert(1);
//表單驗證必須有一個明確的boolean類型返回值
//在應用驗證方法時必須加上 return 方法名稱
return false;
}
</script>
</html>
2.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 id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//傳統(tǒng)js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
（2）v-bind 插值語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind的使用</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
//插值表達式不能用于html標簽的屬性取值
//要想給html標簽的屬性設置變量的值，需要使用v-bind
//v-bind也可以簡化寫法 直接使用:
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
</html>
（3）v-model
<!DOCTYPE html>
<html>
<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/>
<!-- v-model替換原來的value屬性的值，用value獲取不到-->
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>
（4）v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷數(shù)組</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
<!--index是索引的意思，用插值表達式輸出 -->
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
</html>
<!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="(key,value) in product ">{{value}}===={{key}} </li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
product:{
id:1,
name:"筆記本電腦",
price:5000
}
}
})
</script>
</html>
<!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>
<td>價格</td>
</tr>
<tr v-for="(product,index) in products ">
<td>{{index}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{ id:1,name:"筆記本電腦",price:5000 },
{ id:2,name:"手機",price:3000 },
{ id:3,name:"電視",price:4000 }
]
}
})
</script>
</html>
3.v-if與v-show
v-if是根據(jù)表達式的值來決定是否渲染元素
v-show是根據(jù)表達式的值來切換元素的display css屬性
<!DOCTYPE html>
<html>
<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">
<span v-if="flag">傳智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切換</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
</html>