iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
2
Modern Web

超緊繃!30天Vue.js學習日記系列 第 3

[Vue.js][日記]一切都得從源頭講起...

https://ithelp.ithome.com.tw/upload/images/20190912/20110850dsypfXRkNe.jpg

進入正題

本篇要介紹的是在 Vue 官網中最先提到的概念: Instance

實例 (instance)

當我們使用 Vue 去建構 Web 應用時,都是先建立根,再將其他元件一個一個搭上去。

筆者在網路上有看到前輩說這感覺就像是葡萄一樣,真是貼切的比喻阿XD

https://ithelp.ithome.com.tw/upload/images/20190914/20110850bjEA0zpmS1.jpg

工欲善其事,必先利其器

在進入範例之前,我們必須先建置相關的開發環境,筆者在這邊先以 sublime text3 做開發,也因為目前還沒有使用 Vue-cli 建構專案,所以筆者在這邊直接將 Vue.js 的 CDN 引入:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Talk is cheap, show me the code!

在 Vue 的世界中,我們使用以下語法去創建根實例:

new Vue({
    //options
})

我們使用 new Vue() 去建構一個物件,由於 javascript 中 new 語法的特性,在我們使用 typeof() 去檢查時,會判定其型別為 object。

再來,我們可能會需要在組件系統中的根放入一些資料,data 選項可以存放這些資料:

var vm = new Vue({
data(){
    return{
        a:1
    }
}
})

除此之外,也可以向下面的範例一樣,先定義一個物件 msg ,再將 data 指向它:

var msg={
    a:1
    }
var vm = new Vue({
    data: msg
})

接著,讓我們利用資料綁定的特性將 data 渲染到網頁上吧!

<div id="app">
    <p>{{ foo }}</p>
</div>
<script>
Var obj = {
Foo: 'bar'
}
New Vue({
    el: '#app',
    data: obj
})
</script>

注意到上述範例中的:

<p>{{foo}}</p>

這是 Vue 提供使用者用於綁定數據的方式之一,將雙括號包住我們的資料,這樣就能透過我們寫好的實例去渲染 DOM 。

什麼是修飾符

<div id="app-2">
 <span v-bind:title = "message">
請將鼠標停留在此
</span>
</div>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})
</script>

在這邊注意到span標籤中的 v-bind:title = "message"
v-bind 可以讓我們對DOM中的元素做綁定,在之後的教學中會對這方面多加著墨。


上一篇
[Vue.js][日記]今天就不免俗地來做個介紹吧!!!
下一篇
[Vue.js][日記]生命週期的變化是如此美妙啊!
系列文
超緊繃!30天Vue.js學習日記33

1 則留言

1
Cheng®
iT邦新手 4 級 ‧ 2019-11-12 14:55:37

範例二的div寫錯了歐,是等號才對

<div id="app-2">
EN iT邦研究生 2 級 ‧ 2019-11-12 21:36:58 檢舉

更正了,感謝~

我要留言

立即登入留言