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


前言

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


使用工具

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


Vue實例

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

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

上面例子設定了兩個屬性: eldata

  • el:Vue實例掛載的目標。這範例指的是只有idapp內的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>

<small><font color="#aaa">▲ Err:every component must have a single root element</font></small>

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

<small><font color="#aaa">▲ 只有一個根元素就OK,whyyyyy?</font></small>

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

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


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

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

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


模板

Directives 指令

在HTML上看到v-,他就是作為前綴的指令,像v-bindv-onv-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-if v-show
渲染 有條件, 每次切換都重新渲染 無條件, 不會重渲染,基於CSS切換
用於顯示模板template 可以 不可以
缺點 頻繁切換高開銷 初始渲染高開銷

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


小小心得

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

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

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

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


📢參考文章

#javascript #Vue #Web #前端





學習 Vue.js 一段時間了, 會基本的語法,但做一些應用還是要看官方文件... 一邊查著一邊思考這些不是學過了嗎嗚嗚嗚 就跟剛認識的朋友一樣生疏 QQ 所以呢!! 這系列我會利用七天的時間將 Vue 重新、快速的學習! 搭配一些簡單的應用:)

留言討論