iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
1

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

超緊繃!30天Vue.js學習日記 一切都得從源頭講起...

Vue實例及插值

今天要介紹的是在vue官網中最先提到的概念:

  • 實例(instance)

為什麼呢?因為我們使用Vue去建構組件系統時,都是先建立根,再將其他元件一個一個搭上去,我在網路上有看到前輩說這感覺就像是葡萄一樣,真是貼切的比喻阿XD

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

在進入範例之前,我們必須先建置相關的開發環境,筆者在這邊先以sublime text3直接做編寫,也因為還沒有使用Vue-cli做開發,因此我們在這邊直接將vue.js以script標籤引入:

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

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

new Vue({
//options
})

我們使用new Vue()去建構一個物件,由於javascript中new語法的特性,我們使用typeof()去檢查的時候,他也會告訴我們Vue實例的型別是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邦新手 5 級 ‧ 2019-11-12 14:55:37

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

<div id="app-2">

更正了,感謝~

我要留言

立即登入留言