離上一篇的for loop又隔了一段時間(擦汗),除了在思考這邊要說什麼以外,也是真的年底到了,忙了一堆不知道在忙什麼的事,不過我一直都沒有忘記我的教學還沒寫完……我想,應該也是我覺得我太忙了,所以我才每年都沒參加鐵人賽吧(搖頭)。
如果你會做網頁(我是指前端的部分),那你一定知道HTML一定要搭配一個叫CSS的東西才能讓版面變漂亮、變好看,問題是我如果我用了vue.js,我要怎麼改變我的配色?比方說要提醒的東西就要上紅色、警告的東西就要上黃色、只是一般普通訊息就要上綠色的這種紅綠燈訊息,我是要怎樣才能在同一個按鈕或同一個Div內透過vue.js的運算就做到更換的效果?
這個時候我就不得不來說一下v-bind這個東西了,v-bind是vue.js裡負責改變配色、大小等等所用的屬性,也就是說v-bind就是針對css而存在的屬性,而這樣的屬性會有什麼樣的屬性值呢?再講屬性值之前,我們要來認識一下v-bind的副屬性,也就是v-bind:style與v-bind:class!
如果你對css很熟,你一定會知道所謂的行內樣式style=”OOXX”,還有id與class樣式,當然由於id有不重複性,為了讓css可以更有效率,現在都會提倡大家用class,也因為此,所以只有v-bind:class,這個部分是比較特別的,可能稍微需要用一下大腦的記憶體。
首先我們先來看看v-bind:style怎麼用,其實用法還挺簡單的,屬性值裡面就直接寫行內樣式,但是樣式的數值,比方說顏色或文字大小,我們就可以設定在vue的data,這樣我們就可以直接帶進畫面,範例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>
<div id="app">
<div v-bind:style="{ color: myColor, fontSize: myFontSize + 'px' }">123</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myColor: 'red',
myFontSize: 30
}
});
</script>
</body>
</html>
如果你有跟著前面的教學一路學過來,我相信到這裡一定難不倒你,因為只是把data裡面的變數直接帶進去而已。當然我們現在我們在coding的時候一定要講求維護性,最好是不要改HTML只改CSS或是不要改HTML或CSS我們直接改js,所以我們換個比較好維護的寫法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>
<div id="app">
<div v-bind:style="myStyle">123</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myStyle: {
color: 'red',
fontSize: '30px'
}
}
});
</script>
</body>
</html>
是的,我們只要在v-bind:style裡面直接設定一個物件名稱,然後就可以在vue的data裡面直接透過物件去設定我們要屬性值,在這裡我們輸入的css是文字變紅並且文字變大成30px,簡單、明瞭、好維護!但是只能滿足我們基本需求,而且現在的網頁很少會用行內樣式啊!所以我們就來看看v-bind:class吧!
v-bind:class其實用法與寫法上當然就比剛剛的v-bind:style簡單,畢竟css部分我們都可以另外設定在css區域,日後要維護也是很容易,只要改css就好,不像剛剛好像把css混在js裡,當然看起來就會簡單很多,我們來看看範例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
<style>
.active{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: myCheck }">123</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myCheck: true
}
});
</script>
</body>
</html>
是的!在這個範例裡面我們很明顯的可以看到,使用v-bind:class,我們只要判斷這個class是不是要啟用就可以了,像我大括號裡面是寫active:check,其中active就是我們的class名稱,而myCheck則是我設定的變數名稱,我在vue的data裡面設定的ture,意思就是啟用這個class,所以當我們打開頁面的時候,你就會看到123這行div被套上了一個叫active的class。
咦?既然可以設定ture,那是不是也有false?那既然有ture跟false,那我是不是可以設定很多個class??當然可以!你可以設定一連串的class名稱都沒有問題,因為重點在於要啟用哪一個class對吧? 那要怎麼設定很多個class?我們簡單範例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
<style>
.active{
color:red;
font-size: 30px;
}
.normal{
color:green;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
myCheck: false,
myCheck2: true
}
});
</script>
</body>
</html>
看到範例有沒有覺得超簡單?只要在大括號裡面透過逗點連接,你就可以繼續輸入下一組class名稱跟判斷用的變數了,有沒有超簡單?你只要把myCheck與myCheck2的ture跟false對調,套在123這個div的class,就會對調囉!
本篇教學就到這邊,希望我能更快擠出時間寫下一篇教學(點頭)!
可能是我的程式基礎不好,
下面是我原來想要實現的效果
http://codepen.io/aforian/pen/OWLjqR?editors=1010
不知道有沒有更簡潔的實現方式可以指教?謝謝!
如果你已經實現你要的功能,我是覺得在初期把功能寫出來會比研究怎麼寫的精簡來的好,因為寫程式主要是為了未來維護或協作時可以快速入手,如果過度精簡反而會造成閱讀上的困難,所以我是覺得可以寫出來比寫的精簡重要多了。
如果真的說要建議的話:http://codepen.io/anon/pen/mRbpxd
我覺得你的h3的v-bind可以簡略成一個Object,這樣就可以不用寫這麼長,畢竟寫太長閱讀上也會有點困難。
感謝NOWILL用心編寫的教學文章,真的是可以快速上手~受益匪淺。
期待您的下一篇教學,另外附上7篇教學文章的練習範例 🙂
http://codepen.io/anon/pen/wgQwLV
“寫”active:check
謝謝~
感謝你的文章 膜拜ing 真的謝謝T T你寫得好好
您好
感謝您的教學
對新手而言的確很好入門
能否多描述、比較一下當沒有使用VUE時,造成低可維護、再利用性的情形
感恩
感謝您的留言,有時間我會再針對這點詳加描述一下
謝謝您的誇獎n(_ _)n 您的留言就是我最好的回饋
你好,無意間看到這個 blog 覺得你對於 vue 的教學寫得淺顯易懂,不知道還會不會有機會看到更多 vue 的文章呢?