超緊繃!30天Vue.js學習日記 指令V集合!

大家好,我今天要帶來的是:指令(directives)的介紹,在vue中,指令帶有 v- 的前綴特性,其功能為:

表達式的值改變,將其影響,響應式的作用在DOM上。

就像是這樣:

<div id="app1">
<p v-if="seen">金銀財寶</p>
</div>
<script>
var app = new Vue({
el:'#app1',
data:{
seen:false
}
})
</script>

• v-if

其實這個指令就像是我們在寫程式時常常接觸到if條件式,在範例中我們把條件設為seen,因此當seen=ture時,段落標籤p的內容才會被印出來,因為這邊的範例將seen的預設值設為false,所以將範例打好之後,我們用chrome打開來,會發現什麼都沒有,這時我們只要在console中輸入:

app.seen:true

我們就可以看到金銀財寶了XD

當然,除了if,條件渲染還少不了else-if以及else囉!

<p v-if="seen">如果沒有我還有千千萬萬個我 </p>

<p v-else-if="!seen">如果沒有我應該還有千千萬萬個我吧(?) </p>

<p v-else>如果沒有我…就沒有然後了阿!! </p>

• v-bind

主要用於動態綁定DOM中的元素屬性,而元素屬性的值是由我們定義出來的instance中的data所提供。

接著,在vue官網中還有提到部分指令是能夠將收參數的,那這樣有什麼好處呢?
以v-bind為例,這樣子我們就能夠動態的更新html屬性:

<div id="app2">
<a v-bind:href="url">google</a>
</div>
<script>
var app2 = new Vue({
  el: '#app2',//綁定id
  data: {//id為app2的<div>的data
     url: 'http://google.com'
  }
})
</script>

• v-on

這個指令主要用於事件綁定(換言之:監聽DOM事件)

這邊先不廢話,我們一樣上範例:

<div id="app3">
<a v-bind:href="url" v-on:click="show">前往指定網址</a>
</div>
<script>
var app3 = new Vue({
	el: '#app3', 
	data: {
		url: 'http://google.com'
	},
	methods: {
		show: function (){
			alert('Hello World');
			return false;
		}
	}
})
</script>

在範例中,我們同時使用了兩個指令,v-bind會將<a>的href屬性設置成我們在<script>內定義的app3實例中data的url。
v-on則是監聽了click事件,當我們點擊超連結後,v-on會回調我們在methods中所定義的function(show)。

由於v-bind以及v-on指令在實作中會頻繁的使用到,因此開發團隊非常的貼心,針對了這兩個指令做出縮寫的式子:

<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

<a v-bind:click="doSomething">...</a>
<a :click="doSomething">...</a>

在今天的最後,要介紹的是修飾符:

修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式绑定。例如: .prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

event.preventDefault()
https://developer.mozilla.org/zh-TW/docs/Web/API/Event/preventDefault

今天的範例下載:

https://drive.google.com/open?id=1uvxO9IsVdOvqyKXZrNqlq6EgyVEpybDL

突然發現光是介紹3個指令就用掉一天了XDD,明天的文章也會用來介紹指令,
今天的教學就到這邊,我們明天見~~