【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>

▲ 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-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 #前端







你可能感興趣的文章

Day 116

Day 116

Secure Apache Using Certbot with Let's Encrypt on Ubuntu 20.04

Secure Apache Using Certbot with Let's Encrypt on Ubuntu 20.04

Jōtai 介紹

Jōtai 介紹






留言討論




lagagain Feb 25, 2020

允許使用者在Markdown插入HTML標籤超不安全的wwwww

這會是...全部頁面都很特別的一個系列嗎?

吉娃娃🐶 Feb 25, 2020

偶然發現可以用HTML和JS就...開啟新世界的大門了 (?