iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
0
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 10

【D10 - Directives】今晚,我想對DOM做點甚麼?

前言

昨天講到了{{}}這個Vue的雙下巴之外,也提到了一些資料綁定 (Data Binding)的部分~ 但Vue可以綁定得遠遠不只頁面上的內容,Vue也可以直接影響以及渲染DOM本身!!

Directives

而我們稱這個叫做: Directives!,根據Vue官方上面寫的介紹:

If you have not used AngularJS before, you probably don’t know what a directive is.

直接開嗆Angular哈哈哈,官方也有講到另外一個重點: Directives 只能放在元素裡面,先看個例子~

<div v-text="'I Love ' + user.name"></div>
  • v 就是官方設定的一個default
  • text是用來告訴Vue這個directive是甚麼
  • user.name就是一個隨著vue instance做更動的東西

Argument

上面的 v-text坦白說比較少會用到~ 你也可能察覺不出來他的好處,因為畢竟data-binding也可以做到,這邊再舉一個例子

<div v-on="click : submitForm"> </div>

你可以看到 v-on 也是一個directive,他表達的意思是 當你按下button -> 就會觸發 submitForm這個method.


看看還能綁定些甚麼?

各位如果有看昨天提到的data binding,我其實有補充到一個 v-html,沒錯~他也是directive的一員,除此之外,我們還有幾個好夥伴:

  1. v-for
    這是一個可以拿來重複渲染元素的工具,假設今天我們有有一個list
    如果有稍微學過HTML,list 的架構就是

    <ul or ol>
        <li> 選項 </li>
    </ul or /ol>
    

    假設今天我們要跑遍所有items (items就是我們定義的data)

    data: {
      items: [
        { text: 'Hello' },
        { text: 'Love You' }
      ]
    }
    

    除了可以一個一個寫之外我們也可以用v-for去跑一遍items這個list

    <ul>
       <li v-for="item in items" :key="item.text">
            {{ item.text }}
       </li>
     </ul>
    

綁定Style

  1. v-bind
    這個東西可以讓我們拿來綁定attribute~ 因為attribute的綁定不適用雙下巴{{}},在tag裡面的話就要使用directive
    <div v-bind:class="{ active: isActive }"></div>
    
    然後我們在data上面定義 isActive是甚麼
    data: {
        isActive: true
    }
    
    這樣就代表
    <div class='active'> </div>
    

綁定條件

  1. v-if
    這個就跟你寫程式語言會碰到的假設if是一樣意思的,通常可拿來綁訂一個boolean,譬如今天 v-if='true' -> 就顯示甚麼這樣

    <div><v-if='condition'> show </div>
    
  2. v-show

綁定事件

  1. v-on
    剛剛稍微提到了他就是: 「當做了甚麼事情 -> 引發一個事件!!」
    <div>
      <button v-on:click="say('hi')">Say hi</button>
    </div>
    
    然後依樣記得要在script的地方定義~ 這邊不是放在data裡面了,而是要放在一個叫做 methods的地方,像是這樣
    export default {
       methods: {
        say: function (message) {
          alert(message)
        }
      }
    }
    

後記

好啦那Vue的基本概念就先講到今天為止啦~ 有了這些基本概念,最簡單的網頁開發也都可做到囉!! 至於還有其他document跟更多Vue的功能,也請各位到Vue官網自己搜尋~

明天開始我會開始進入project,然後從project中開始學習~ 畢竟所有的學習都是從問題產生的,所以我會帶各位走過你接下來開發會遇到的問題,並從中學習~
各位要繼續加油啊啊啊!!!!
/images/emoticon/emoticon58.gif


上一篇
【D9 - Vue的雙下巴】Vue模板語法 -- {{Mustache}}
下一篇
【D11 - 用Vue實作網頁】這世界都是Components組成的!?
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言