【Day01】實例, 模板 & 條件渲染

前言

看著官網複習，如果用詞若與臺灣不同請不吝告知，謝謝您！
這七天主要著重在複習，會寫我比較不熟的部分出來，所以可能有些會跳過，敬請見諒QQ

使用工具

因為是簡單練習，這裡不用Vue-cli建立專案。
方便選項：利用線上編輯器CodePen來測試。
這裡使用引入CDN，利用Console + Vue.js devtools觀看變化。

Vue實例

每個Vue應用都是通過用Vue函數創建一個新的Vue實例開始的。
創建實例時，可以傳入Options物件：

var vm = new Vue({
    el:'#app',
    data:{
        msg:'Hello'
    }
})

上面例子設定了兩個屬性: el和data 。

• el：Vue實例掛載的目標。這範例指的是只有id為app內的HTML元素才會被渲染到。
• data：要做響應的資料，當資料改變時，視圖會進行重渲染。

只有當實例被創建時就已經存在於data中的屬性才是響應式的。

響應式？j葛是什麼意思？我們用上面的例子來看看～

在console的地方修改msg會發生什麼變化？

▲ msg的值在畫面上更改了！！

如果新增一個屬性呢？

▲ 創建一個不存在data裡的屬性，而且也沒在模板中使用，並不會讓畫面更新。

console.log(vm) 看看結果

▲ 沒被掛載到el裡面

💡 如果需要一個之後才會用到的屬性，即使現在為空值或0，都應該先給它初始值。

作用域的重要性

$在Vue所有實例中都可用的屬性。可以避免和已被定義的數據、方法、計算屬性產生衝突。

在原型上定義msg，使其在每個Vue的實例中可用

Vue.prototype.$msg = 'Msg'

創建完後，$msg就在所有的Vue實例中可用了！（在beforeCreate也可以）

如果沒有$前綴會發生什麼衝突？以剛才的msg為例子我們測試看看

Vue.prototype.msg = 'Msg'
var vm = new Vue({
    el:'#app',
    data:{
        msg:'Hello'
    }

    beforeCreate: function () {
        console.log(`beforeCreate：${this.msg}`) // ?
    },

    created: function () {
        console.log(`Create：${this.msg}`) // ??
    }
})

▲ 結果出爐～如果沒用$前綴，會被實例創建後的data覆寫

一個Template只有一個根元素！

用引入方式練習就只在

<div id="app"> ... </div>

中寫東西，
但換成vue-cli後，是在template中寫，第一次踩雷就上手了😢😢

<template>
    <div class="col-md-6">
         ...
    </div>
    <div class="col-md-6">
         ...
    </div>
</template>

▲ Err：every component must have a single root element

<template>
    <div class="row">
        <div class="col-md-6">
          ...
        </div>
        <div class="col-md-6">
             ...
        </div>
    </div>
</template>

▲ 只有一個根元素就OK，whyyyyy？

好奇為什麼會這樣勒(*´･д･)?

找到了作者大大的親自回答

原來都是diff演算法的鍋R！
如此一來便解惑了為什麼會這樣～

diff是什麼？能吃嗎？
有時候我們修改了某個資料，如果直接渲染到真實DOM上會引起整個DOM樹的重繪和重排，
這樣渲染真實DOM的開銷是很大的。
diff就是可以只更新我們修改的那一小塊DOM而不要更新整個DOM。

想了解更多關於diff演算法可以參考詳解vue的diff算法 （中國網站）

模板

Directives 指令

在HTML上看到v-，他就是作為前綴的指令，像v-bind、v-on和v-for...等。
Mustache 語法（也就是{{ }}）不能直接作用在HTML屬性或方法上，所以需要Directives幫忙。

v-bind

HTML的屬性使用v-bind綁定。

v-bind 語法糖為 :屬性 = "xxx"

<span :title="msg">Hover Me! :)</span>

data: {
    msg: 'Hello >u<'
    },

▲ 滑過span後title出現了～

v-on

在像button之類的元素上綁定事件要使用v-on。

v-on 語法糖為 @事件 = "xxx"

<button @click="pop">Click me!</button>

methods: {
    pop() {
        alert('click!')
    }
}

▲ 點擊按鈕出現alert

修飾符

Vue提供的修飾符有很多種，像：事件修飾符和按鍵修飾符……等，到底什麼是修飾符呢？必須先了解DOM的事件傳遞機制。

📢 Kuro大大的重新認識 JavaScript講得很詳細✧◝(⁰▿⁰)◜✧，更推薦閱讀書！

舉例來說，如果要在js中阻止默認行為（像是a連結不跳轉、form的submit不重載頁面等），得在事件處理中用event.preventDefault()。Vue提供了修飾符，只需要這麼做：

<form @submit.prevent="onSubmit">...</form>

這樣就可以阻止表單送出後重載頁面了！超級方便derrrr啦ᕕ ( ᐛ ) ᕗ
只提了大概的功能，關於Vue的事件處理部分會在明天介紹～

關於修飾符詳細...

• 完整功能可以到官網閱讀查看～～
• segmentfault的這篇詳解修飾符個人也覺得不錯！

條件渲染

v-if

v-if的使用就像一般程式中的if...else if...else。

試著用if/else寫按鈕切換

<p v-if="show">you can see me!</p>
<p v-else> Change Now!</p>
<button @click="show = !show">Change Btn</button>

data: {
    show: true,
    },

▲ 做出來畫面如上

▲ 按下Change後畫面

🤔 比較一下，除了文字不一樣，還有哪裡不同嗎？

v-show

我們把上面的例子部分修改一下，其餘不要變動：

<p v-show="show">you can see me!</p>
<p v-show="!show"> Change Now!</p>

🤔 再看看這裡跟上面那個有什麼不一樣？

v-if 和 v-show 比較

根據上面的結果來看，我們做個表格來比較這兩者差別！

💡 如果要一直切換顯示的，應該用v-show；只顯示一次的用v-if比較好。

小小心得

初次寫文，若觀念或內容有誤請不吝指教，謝謝您(　ᐛ)パァ

首次參加寫作松，了解到寫一篇文章不容易：（
當選定主題後一直思考內容怎麼呈現比較好
希望這個平台能支援多一點Markdown語法><
js玩得潮爽derrrrr各種魔改版面
結果要被改掉惹QQQQQ

要邊看教學邊練習做 + 截圖到排版打文章……等，真的好累RRRR
以後會滿懷崇拜之心拜讀技術文章，真的太神了QQ
尤其是鐵人賽真的太強了！！覺得7天就有夠累的啊Orz

重新認識了Vue最基本的，一開始OK過關！
之後的元件那些比較困擾RRRR，傳遞資料每次都忘記
還剩6天，加油！(๑•̀ㅂ•́)و✧

📢參考文章

• Vue.js 官網
• Peter Chen 勇者鬥Vue龍
• Summer 條件渲染 v-if、v-show