Vue基礎知識系列(二)Vue指令集合
一、插值表達式(mastach語法)、v-text、v-html、v-cloak
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<!--{{}} 這個是插值表達式，使用v-cloak，再給定一個display：none,能夠解決在F12-Network-slow3G 下{{}}出現閃爍的問題-->
<div id="app">
<p v-cloak>{{msg}}</p>
<!--v-text 後面跟data，能夠不使用插值表達式 同時v-text是沒有閃爍的問題的-->
<!--v-text會覆蓋元素中本來的內容，可是插值表達式 只會替換本身的佔位符，不會把 整個元素的內容所有清空-->
<h4 v-text="msg2"></h4>
<div v-html="msg2"></div>
<!--v-bind: 是Vue中提供的用於綁定屬性的命令-->
<input type="button" value="按鈕" v-bind:title="mytitle" v-on:click="show1">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "123",
msg2:"<h1>這是一個很大的h1</h1>",
mytitle:"這是一個本身定義的title"
},
methods: {
show1:function () {
alert("Hello")
}
}
})
</script>
複製代碼
腳下留心
插值表達式{{}}和v-text，v-html，v-cloak的區別
- {{}}大括號的方法叫作插值法，也就是Mustache讀做mastchi，這是最經常使用的。插值表達式是Vue中最廣泛的寫法，用法。插值表達式 只會替換本身的佔位符，不會把 整個元素的內容所有清空
- v-text後面跟data，直接給屬性，是沒有閃爍的問題會覆蓋元素中本來的內容，可是插值表達式 只會替換本身的佔位符，不會把 整個元素的內容所有清空。v-text用的不是特別靈活
- v-html：至關於帶標籤的，可是服務器有時候直接給咱們返回帶標籤的數據，若是咱們想要展現的話，會帶標籤，咱們不要標籤，直接用v-html，去掉標籤進行解析v-html=""
- v-cloak +插值表達式{{}}的寫法，會有閃爍問題，直接給【v-cloak】一個display：none 就行了
二、v-bind和v-on的用法
-
v-bind是Vue提供的屬性綁定機制，簡寫爲 :html
常見的狀況是，src屬性，若是直接給src一個圖片的連接地址，那麼會把src後面的當成一個字符串處理。vue
<div id="app"> <input type="text" v-model="msg"> <p>Hello{{msg}}</p> <img src="imgUrl" alt=""></div>//這種會當作字符串處理，想要引用，必須使用v-bind屬性綁定機制 <img :src="imgUrl" alt=""></div> <script> const vm = new Vue({ el: '#app', data: { msg: 'Vue...', imgUrl: 'https://pics1.baidu.com/feed/e824b899a9014c08235e06b0789f460d7af4f4a3.jpeg?token=b81b371198390d35dfca4c7701405c49&s=B481B557D08F5EEE084DB46B03003070' } }) </script> 複製代碼 -
v-on是Vue提供的事件綁定機制，常見的有click，dbclick，mouseover，mouseout，mouseenter，mouseleave等；可是要在後面加一個methods 能夠參考下面代碼塊數組
<body> <div id="app"> <p>{{msg}}</p> <input type="button" value="按鈕" v-bind:title="mytitle" v-on:click="show"> </div> <script> var vm = new Vue({ el: "#app", data: { msg: "123" }, methods: { show:function () { alert("Hello") } } }) </script> 複製代碼
三、事件修飾符--.stop、.prevent、.capture 、.self、.once
- .stop：阻止事件冒泡行爲：從內到外有多個事件，當你點擊最裏面的盒子的時候，它的事件會觸發，會繼續一次冒泡到最外面的盒子的事件，這樣的行爲叫作冒泡
- .prevent：阻止事件的默認行爲：事件自己有一個行爲，可是經過點擊等事件，還會有其餘事件
- .capture：添加事件監聽器時使用事件捕獲模式
- .self：只觸發本身的事件
- .once：數據只能使用一次。直接在想要使用一次的標籤裏面寫上v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修飾符</title>
<script src="lib/vue-2.4.0.js"></script>
<style>
#app {
width: 100%;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<!--stop阻止事件冒泡-->
<!--<div @click="divHanlder">
<input type="button" id="inner" value="inner按鈕" @click.stop="btnHanlder">
</div>-->
<!--prevent 阻止事件的默認行爲-->
<a href="http://www.baidu.com" @click="linkClick">有問題，先百度</a>
</div>
<script>
var vm =new Vue ({
el:"#app",
data:{},
methods:{
divHanlder(){
console.log("這是出發了div的事件");
},
btnHanlder(){
console.log("這是出發了btn的事件");
},
linkClick (){
console.log("有問題，先百度")
}
}
})
</script>
</body>
</html>
複製代碼
腳下留心
- 注意事件修飾符的位置，修飾誰，就放到哪裏
四、v-model 的數據雙向綁定
<body>
<div id="app"> <!--v-bind 能夠實現屬性的綁定，可是綁定數據是單向的，這裏可使用v-model進行數據的雙向綁定--> <h4>{{msg}}</h4> <input type="text" style="width: 100%;" v-model="msg"> </div> <script> var vm=new Vue({ el:"#app", data:{ msg:"v-model實現數據的雙向綁定" } }) </script> 複製代碼
腳下留心
- v-bind 能夠實現屬性的綁定，可是綁定數據是單向的；這裏可使用v-model進行數據的雙向綁定
- v-model 後面沒有: 號，直接跟的等號來進行數據的雙向綁定
- 數據的雙向綁定：在V層也能夠修改數據，普通的v-bind綁定數據只能經過修改M層的數據才能夠修改數據，v-model能夠在V層修改數據，同時M層數據也會獲得相應的修改，這就是數據的雙向綁定
- 注意v-bind 和v-model的區別
案例--簡易計算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡易計算器</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="clac">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
result: 0,
opt: "-"
},
methods: {
clac() { //計算器算術方法
// 邏輯
switch (this.opt) {
case "+":
this.result=parseInt(this.n1)+parseInt(this.n2)
break;
case "-":
this.result=parseInt(this.n1)-parseInt(this.n2)
break;
case "*":
this.result=parseInt(this.n1)*parseInt(this.n2)
break;
case "/":
this.result=parseInt(this.n1)/parseInt(this.n2)
break;
}
}
}
})
</script>
</body>
</html>
複製代碼
五、Vue中使用樣式
使用class樣式
- 數組：使用v-bind進行數據綁定，屬性須要使用單引號來引發來
- 數組中使用嵌套對象的方式來代替三元表達式，三元表達式代碼不易讀
- 直接使用對象，屬性名能夠帶引號，也能夠不帶引號
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中的樣式操做-class</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<style>
.thin {
font-style: italic;
}
.active {
color: red;
}
</style>
<body>
<div id="app">
<!--第一種使用方式，直接傳遞一個數組，注意：這裏的class須要使用v-bind進行單向的數據綁定，下面的：就是使用的v-bind的縮寫，數組裏面的class須要使用單引號-->
<!--<h1 :class="['thin']">這是一個很大的h1，很大很大，大到你沒法想象</h1>-->
<!--在數組中使用對象來帶起三元表達式，提升代碼的可讀性-->
<!--<h1 :class="['thin',{'active':flag}]">這是一個很大的h1，很大很大，大到你沒法想象</h1>-->
<!--在爲class使用v-bind綁定對象的時候，對象的屬性是類名，在這種狀況下屬性也就是類名，能夠帶引號，也能夠不帶引號；屬性的值是個標識符-->
<h1 :class="{'thin':true,'active':true}">這是一個很大的h1，很大很大，大到你沒法想象</h1>
</div>
<script>
var vm=new Vue ({
el:"#app",
data:{
flag:true
},
methods:{
}
})
</script>
</body>
</html>
複製代碼
使用內聯樣式
- 直接在元素上經過 :style的形式，書寫樣式對象
<h1 :style="{'color':'green','font-weight':'700'}">這是一個很大的h1，很大很大，大到你沒法想象</h1>
複製代碼
- 將樣式對象，定義到data中，並直接引用到 :style中
<h1 :style="objStyle">這是一個很大的h1，很大很大，大到你沒法想象</h1>
var vm=new Vue ({
el:"#app",
data:{
objStyle:{'color':'red','font-weight':'400'}
},
methods:{
}
})
複製代碼
- 在 :style中經過數組，引用多個data上的樣式對象 這個和上面 :style經過數組引用一個方法同樣，只是多增長了對象，對象之間使用逗號隔開
腳下留心
經過數組的方式添加多個對象，不能使用{}，須要使用[]服務器
<h1 :style="[objStyle1,objStyle2]">這是一個很大的h1，很大很大，大到你沒法想象</h1>
<script>
var vm=new Vue ({
el:"#app",
data:{
objStyle:{'color':'red','font-weight':'400'},
objStyle1:{'color':'red','font-weight':'400'},
objStyle2:{'font-size':"12px"}
},
methods:{
}
})
</script>
複製代碼
五、v-for和key屬性
- 循環普通數組
<div id="app">
<p v-for="item in list">{{item}}</p>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
list:[1,2,3,4,5,6,7,8]
},
methods:{
}
})
</script>
複製代碼
- 循環複雜數組
<div id="app">
<p v-for="usr in list">ID:{{usr.id}}---名字:{{usr.name}}</p>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
list:[
{id:1,name:"zs1"},
{id:2,name:"zs2"},
{id:3,name:"zs3"},
{id:4,name:"zs4"},
{id:5,name:"zs5"},
{id:6,name:"zs6"},
{id:7,name:"zs7"}
]
},
methods:{
}
})
</script>
複製代碼
- 循環對象
<div id="app">
<p v-for="(val,key,i) in user">值是：{{val}}---鍵是：{{key}}，索引：{{i}}</p>
</div>
<script>
var vm =new Vue ({
el:'#app',
data:{
user:{
id:1,
name:'託尼',
gender:'男'
}
},
methods:{
}
})
</script>
複製代碼
- 迭代數字
<div id="app">
<p v-for="qqq in 10">這是第{{qqq}}次循環</p>
</div>
<script>
var vm =new Vue ({
el:'#app',
data:{
},
methods:{
}
})
</script>
複製代碼
腳下留心
- in 後面能夠放普通數組，數組對象，對象，還能夠放數字，數字是從1開始的
- v-for 迭代數字的時候，in後面的數字，起始位置是從1開始的，和索引不同，索引是從0開始的
六、v-if和v-show
- v-if 每次都會刪除元素，而後從新建立元素
- v-show 每次不會從新進行DOM的刪除和建立操做，只是切換屬性，將display設置成none
- v-if 有較高的切換性能；v-show 有較高的初始渲染消耗。若是涉及到元素的頻繁切換，最好不要使用v-if，使用v-show
<div id="app">
<!-- v-if 每次都會刪除元素，而後從新建立元素 v-show 每次不會從新進行DOM的刪除和建立操做，只是切換屬性，將display設置成none v-if 有較高的切換性能，v-show 有較高的初始渲染消耗，若是涉及到元素的頻繁切換，最好不要使用v-if，使用v-show --> <input type="button" value="toggle" @click="flag=!flag"> <h3 v-if="flag">這是一個v-if控制的元素</h3> <h3 v-show="flag">這是一個v-show控制的元素</h3> </div> <script> var vm = new Vue({ el: '#app', data: { flag: true }, methods: { // toggle() { // this.flag = !this.flag // } } }) </script> 複製代碼
相關文章
- 1. VUE系列二：vue基礎
- 2. Vue基礎指令集錦
- 3. vue系列之二 指令
- 4. Vue基礎知識系列(一)Vue的基本認識
- 5. Vue系列（一） -- 基礎知識
- 6. Vue基礎指令
- 7. C#基礎知識系列十(集合)
- 8. VUE基礎知識
- 9. Vue基礎知識
- 10. vue基礎知識
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • Docker 清理命令
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. VUE系列二：vue基礎
- 2. Vue基礎指令集錦
- 3. vue系列之二 指令
- 4. Vue基礎知識系列(一)Vue的基本認識
- 5. Vue系列（一） -- 基礎知識
- 6. Vue基礎指令
- 7. C#基礎知識系列十(集合)
- 8. VUE基礎知識
- 9. Vue基礎知識
- 10. vue基礎知識