v-html和v-text
專門用來渲染標籤內容的 在一定程度上可以避免 mustache語法 在加載緩慢時閃爍問題
v-html="變量"
v-text="變量"
如果標籤本身有內容 那麼加載完成後 會被覆蓋 顯示變量所指向的內容
如果使用mustache語法渲染 那麼會出現閃爍問題
要使用這兩個指令渲染
哪怕加載緩慢時 沒有渲染出來 標籤頁不會顯示
v-html和v-text區別:
v-html會識別標籤並渲染
v-text 不會識別標籤和渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-html="msg">我是h1原本的內容</h1>
<h2 v-text="qq">我是原本h2的內容</h2>
<!--mustache語法是 雙大括號 那麼如果頁面加載緩慢 vue半天沒有加載出來
那麼就會出現頁面好多個大括號的效果
用戶體驗很不好
-->
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
// msg:"我是msg內容",
msg:"<a href='#'>我是標籤內容</a>",
// qq:"我是qq內容",
qq:"<em>我是qq內容</em>"
}
});
</script>
</body>
</html>
v-cloak
如果我就想使用mustache語法 如何防止花括號閃爍問題?
使用v-cloak 指令
使用步驟:
1.在渲染mustache語法的標籤上面添加v-cloak指令
<標籤 v-cloak>{{msg}}</標籤>
2.在css裏面添加一個屬性選擇器(css3)
[v-cloak]{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!--<h1>{{msg}}</h1>-->
<!--用c-cloak來預防 花括號閃爍問題-->
<h1 v-cloak >{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
// msg:"我是msg內容",
msg:"<a href='#'>我是標籤內容</a>",
// qq:"我是qq內容",
qq:"<em>我是qq內容</em>"
}
});
</script>
</body>
</html>
v-model專門用來 替換輸入框的value屬性
使輸入框具有雙向數據綁定的效果
<input type="text" v-model="變量"> 此時 輸入框不能再寫value屬性
已經被v-model替換 相當於把value換成用變量渲染
多行文本框 也可以使用v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-html="msg"></h1>
<input type="text" v-model="msg">
<br>
<!--多行文本框 也可以使用v-model-->
<textarea v-model="msg" name="" id="" cols="30" rows="10"></textarea>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
}
});
</script>
</body>
</html>
template標籤
* 在vue中 template標籤受vue加載
* 在頁面渲染完成後 這個標籤不存在
* 但是在寫代碼期間 這個標籤可以作爲一個父元素
* 配合指令 可以一次控制多個元素
*
*
* 可以跟template配合的指令:
* v-if v-else v-for
*
* v-show不支持template標籤
*
* v-show也沒有v-else
*
* v-html/v-text不支持template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<template v-if="boo">
<div>我是div部分</div>
<div>我也是div</div>
<div>我跟上面一樣</div>
</template>
<template v-else>
<span>我是span部分</span>
<span>我也是span</span>
<span>哈哈</span>
</template>
<template v-for="(item,index) in arr">
<div>{{item}}</div>
<div>{{item}}</div>
<div>{{item}}</div>
<hr>
</template>-->
<!--v-show不能在template上面-->
<!-- <template v-show="boo">
<div>我是div</div>
</template>-->
<!--v-html和v-text不能在template上面-->
<!--<template v-html="msg">
我是哈哈
</template>-->
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
boo:true,
arr:["張飛","張菲菲","飛飛"],
msg:"我是普通文本"
}
});
</script>
</body>
</html>
通過v-on指令綁定事件
* 步驟:
* 1.在標籤上面 v-on:事件名稱="驅動函數名稱"
*
* 2.在vue中 跟data同級的位置定義methods:{}
*
* 3.在methds的大括號裏面 定義事件的驅動函數
* methods:{
* 驅動函數1:function(){
*
* },
* 驅動函數2:()=>{
*
* },
* es6推出一種 在大括號裏面定義函數的格式簡化寫法
* 驅動函數3(){
*
* }
* }
*
* v-on指令綁定事件的簡化寫法:
* @事件名稱="驅動函數"
*
* es6推出的:
* var per={
* name:"小砌牆",
* show(){
*
* },
* walk(){
* }
* }
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<p>
<input type="text" v-model="msg">
</p>
<!--紅色不用管 如果有強迫症 就 alt+enter 自動ws給添加一個命名空間(沒什麼用)-->
<button v-on:click="show">我是按鈕</button>
<button v-on:click="change">切換顯示隱藏</button>
<button @click="show">簡化寫法的綁定事件</button>
<button @click="gettext">獲取輸入框內容</button>
<button @click="chuan(3)">給事件傳參</button>
<div id="box" v-show="boo"></div>
</div>
<script src="js/vue.js"></script>
<script>
/*var per={
name:"小砌牆",
show(){ //是針對 函數名:function(){} 的簡化寫法
console.log("請不要秀",this);//是當前per對象
},
walk(){
console.log("走兩步",this);//是當前per對象
}
}
per.show();
per.walk();*/
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
boo:true
},
methods:{
show(){
// alert("你點我幹嘛?")
// 調用當前vue中data裏面的變量
this.msg="哈哈哈";//this指的是當前vue對象
//要想再事件驅動函數裏面 調用data的變量 記得一定要加this !!!!!
},
change(){
this.boo=!this.boo;
},
gettext(){
alert("輸入框的內容是:"+this.msg);
},
chuan(a){
alert(a)
}
}
});
</script>
</body>
</html>
vue中的event對象
@事件名稱="事件驅動函數($event)" 固定必須這樣獲取
如果想要給事件傳參數
1.不需要event的情況下
@事件名稱="驅動函數(參數1,參數2,...)"
在驅動函數裏面用形參接收穫取就好
2.如果需要event還需要傳參的情況下,一般都把event寫到 參數列表第一個
@事件名稱="驅動函數($event,參數1,參數2...)"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="show($event)">獲取事件對象</button>
<button @click="demo($event,2,3)">事件對象和參數一起傳</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
},
methods:{
show(e){
console.log(e);
},
demo(e,a,b){
console.log(e,a,b);
}
}
});
</script>
</body>
</html>
事件修飾符
官網地址 https://cn.vuejs.org/v2/guide/events.html
就是在原有事件的後面添加一個修飾符 用作限定:
格式:
@事件名稱.修飾符="驅動函數"
修飾符可以串聯
<a v-on:click.stop.prevent="doThat"></a>
按鍵碼:
@keydown.鍵盤碼
@keydown.up(單詞)
這兩種都可以觸發
<p>
測試按鍵碼(無修飾符):<input type="text" @keydown="show($event)">
</p>
<p>
<!--測試按鍵碼(事件修飾符):<input type="text" @keydown.enter="demo()">-->
<!--測試按鍵碼(事件修飾符):<input type="text" @keydown.up="demo()">-->
<!--測試按鍵碼(事件修飾符):<input type="text" @keydown.k="demo()">-->
<!--測試按鍵碼(事件修飾符):<input type="text" @keydown.space="demo()">-->
<!--測試按鍵碼(事件修飾符):<input type="text" @keydown.plus="demo()">-->
測試按鍵碼(事件修飾符):<input type="text" @keydown.107="demo()">
</p>
事件修飾符解決默認事件
@contextmenu.prevent="test"
<div id="box" @contextmenu.prevent="test"> </div>
事件修飾符解決事件冒泡
@click.stop="inner"
<div id="inner" @click.stop="inner"></div> </div>
只觸發一次的事件修飾符
@click.once="hehe"
<div id="kox" @click.once="hehe">
我只能點一次
</div>
<div v-on:click.self="doThat">...</div>