好的
今天來努力補下昨天後面的兩個...

• Vue的基本語法1： Interpolations(插值) ，作數據綁定
  不同的插法不同的效果(笑)：
  • 3. Attributes (屬性綁定、單向綁定)
       「 v-bind 」這方法跟 “Mustache”语法 一樣，是最常見常用的方式
       因為 “Mustache”语法 不能作用在Html的attribute上，所以 將將～ 就靠它了
       直接來個例子吧

        <p v-bind:id="myId"></p>
    

        myId = 'myParagraph';
    

    融合～～～↓

        <p id="myParagraph"></p>
    

    簡單吧～
    來附附個畫面
    

    

    
    !!
    哎唷 有沒有看到又紅又橘的框框
    寫法不同
    但效果一樣
    沒錯!!!!
    「 v-bind:id 」跟「 :id 」都是一樣做屬性綁定(單向綁定)的，
    所以「 v-bind: 」的縮寫為「 : 」

    !!兄台留步!!
    以為這樣就沒了!?
    別急，魔鬼藏在細節裡
    官方文件說了

    In the case of boolean attributes, where their mere existence implies true, v-bind works a little differently. In this example:

       <button v-bind:disabled="isButtonDisabled">Button</button>
    

    If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered element.

    Attributes

    直接上個畫面吧
    

  • 4. Using JavaScript Expressions (JavaScript表達式)
       來吧～
       這最後的插法，簡單來說
       Javascript的加減法，就是一種表達式
       ...!?(蛤)

        var sum = 1 + 2;
    

    老師：「來～同學，sum是多少～」
    同學們心不甘情不願：「 3 」~~
    老師：「...」
    老師：「好棒唷 答對了～」
    對! 就是這樣
    咦!? 但我這值想在畫面顯示而已，還用一個sum變數存起來??
    將將～
    vue支援這樣的寫法，直～～接寫在「 所有數據的綁定 」都支持
    來個官方例子

        {{ number + 1 }}
    
        {{ ok ? 'YES' : 'NO' }}
    
        {{ message.split('').reverse().join('') }}
    
        <div v-bind:id="'list-' + id"></div>
    

    厲害吧～
    

    
    !!兄台再留步!!
    魔鬼又藏在細節裡
    官方文件又說了

    These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain one single expression, so the following will NOT work:

       <!-- this is a statement, not an expression: -->
       {{ var a = 1 }}
    
       <!-- flow control won't work either, use ternary expressions -->
       {{ if (ok) { return message } }}
    

    Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date. You should not attempt to access user defined globals in template expressions.

    Using JavaScript Expressions

    上...算了
    各位自己試吧～哈

將將～快樂時光總是過得特別快
今天要先來加班下了...

明天續續～