Vue 指令v-bind和v-on
阿新 • • 發佈：2018-12-02
Vue2 指令v-bind和v-on
從這篇文章開始，總結一下Vue中的指令。這篇文章總結v-bind和v-on指令。
（1）v-bind
v-bind的基本用法是動態更新HTML元素上的屬性，如id，class，href，src等。
下面以class為例：
1.v-bind可以用來動態切換class
物件語法
<style>
.left{
color:red;
}
</style>
<body>
<div id="app">
<div v-bind:class="{left:isleft}" 上面的程式碼中，類left存在與否取決於isleft的值，如果isleft的值為true，則類left存在，div中的字型顏色為紅色，渲染結果為：
<div class="left">你好！</ 當點選了文字部分之後，isleft的值變為false，類left不再存在，因而此時的“你好！”顏色是黑色，渲染結果為：
<div class>你好！</div>
<div>點選此處改變isleft的值</div>
普通class可以和v-bind:class共存：
<div id="app">
<div class="up" v-bind:class="{left:isleft}">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message:"你好！",
isleft: true
},
})
</script>
渲染之後的結果為：
<div class="up left">你好！</div>
繫結的資料物件也可以定義在data中：
<div id="app">
<div v-bind:class="className">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message:"你好！",
className:{
left:true
},
},
})
</script>
渲染結果為：
<div class="left">你好！</div>
繫結的資料物件還可以是計算屬性：
<div id="app">
<div v-bind:class="className">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
left: true,
right: false,
up: false,
down: true,
},
computed: {
className: function () {
return {
left: this.left && this.down,
right: this.right && this.up
}
}
}
})
</script>
渲染結果為：
<div class="left">你好！</div>
除了計算屬性，也可以繫結一個類似計算屬性的方法。
陣列語法
我們還可以把一個數組傳給v-bind:class
<div id="app">
<div v-bind:class="[classLeft,classRight]">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
classLeft:"left",
classRight:"right"
},
})
</script>
渲染結果為：
<div class="left right">你好！</div>
也可以使用三元表示式：
<div id="app">
<div v-bind:class="[is?classLeft:classRight]">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
is:true,
classLeft:"left",
classRight:"right"
},
})
</script>
渲染結果為：
<div class="left">你好！</div>
可以在陣列語法中使用物件語法：
<div id="app">
<div v-bind:class="[{left:is},classRight]">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
is: true,
classRight: "right"
},
})
</script>
渲染結果為：
<div class="left right">你好！</div>
2.v-bind可以用來繫結內聯樣式
<div id="app">
<!--物件語法1-->
<div v-bind:style="{color:Color,fontSize:fontSize+'px'}">{{message}}</div>
<!--物件語法2-->
<div v-bind:style="style">{{message}}</div>
<!--陣列語法-->
<div v-bind:style="[style,style1]">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
Color: "red",
fontSize: 30,
style:{
color:"red",
fontSize:"30px"
},
style1:{
width:"30px",
height:"30px"
}
},
})
</script>
還可以為style繫結一個計算屬性：
<div id="app">
<div v-bind:style="style">{{message}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
},
computed:{
style:function(){
return {
color:"red",
fontSize:"30px"
}
}
}
})
</script>
多重值
可以為 style 繫結中的屬性提供一個包含多個值的陣列，常用於提供多個帶字首的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
這樣寫只會渲染陣列中最後一個被瀏覽器支援的值。在本例中，如果瀏覽器支援不帶瀏覽器字首的 flexbox，那麼就只會渲染 display: flex。
3.v-bind語法糖
Vue.js為v-bind提供了語法糖，也就是縮寫：
<div v-bind:class="a"></div>
<div :class="a"></div>
上面兩種寫法是等價的，也就是說，可以省略v-bind，直接寫:
（2）v-on：
在上一篇文章《Vue 方法與計算屬性》中提到過v-on指令的用法，這裡不再贅述，補充一下前面沒有提到過的。
v-on後面可以加事件修飾符（.）來指出一個指令以特殊的方式繫結。
1.事件修飾符
.stop
.prevent
.capture
.self
.once
.passive
.stop 阻止事件冒泡
<div id="app">
<div v-on:click="do0">
<div v-on:click.stop="do1">點選這裡</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
},
methods: {
do0: function () {
console.log("這是外層div")
},
do1: function () {
console.log("這是內層div")
}
}
})
</script>
點選文字部分時，只會觸發do1方法。阻止事件冒泡，不會觸發do0事件。
.prevent 提交時不再過載頁面
<div id="app">
<form v-on:submit.prevent>
<input type="text" name="username" ><br/>
<input type="submit" name="" value="提交">
</form>
</div>
<script>
window.onload = function() {
alert('頁面載入 執行了 window.onload');
};
</script>
.capture 當元素髮生冒泡時，先觸發帶有該修飾符的元素繫結的事件
<div id="app">
<div v-on:click.capture="do0">0
<div v-on:click="do1">1
<div v-on:click="do2">2
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
},
methods: {
do0: function () {
console.log("0")
},
do1: function () {
console.log("1")
},
do2:function(){
console.log("2")
}
}
})
</script>
當點選了“2”之後，依次輸出：0，2，1。點選了“2”之後先觸發帶有.capture修飾符的元素繫結的事件do0，之後是事件冒泡的過程，由內到外依次觸發do2、do1事件。
更為複雜的例子：
<div id="app">
<div id="a0" v-on:click.capture="doq">a0
<div id="a1" v-on:click="doq">a1
<div id="a2" v-on:click.capture="doq">a2
<div id="a3" v-on:click="doq">a3
<div id="a4" v-on:click="doq">a4
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
},
methods: {
doq: function () {
let id= event.currentTarget.id;
console.log(id);
//a0
//a2
//a4
//a3
//a1
},
}
})
</script>
在點選時，先從外到內觸發具有.capture修飾符的元素上的事件，之後是事件冒泡的過程，也就是剩下的元素的事件由內到外觸發。
上面是點選a4之後輸出的結果：a0、a2、a4、a3、a1
如果點選a3，依次輸出的結果為：a0、a2、a3、a1
如果點選a2，依次輸出的結果為：a0、a2、a1
如果點選a1，依次輸出的結果為：a0、a1
.self 只當事件在該元素本身（而不是子元素）觸發時才執行相應的操作
<div id="app">
<div v-on:click="do1">這是1
<div v-on:click.self="do2">這是2
<div v-on:click="do3">這是3
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
},
methods: {
do1: function () {
console.log("1")
},
do2: function () {
console.log("2")