iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

新手初探 Vue系列 第 2

鐵人賽Day02 - 在 Vue 建立應用程式

  • 分享至 

  • xImage
  •  

Vue 的引入跟 jQuery 一樣,這裡就不多贅述,版本一樣有壓縮版本跟開發人員版本。
當引入好 Vue 之後,我們就可以先來建立第一個應用程式。

首先我們先在 script 的部分宣告一個新的應用程式

<script>
    var app = new Vue({})
</script>

裡面會是一個物件,接著我們就要綁定網頁上的 HTML 元素,這裡建議使用 id
這時候頁面上的程式碼會變成如下:

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

<script>
    var app = new Vue({
        el: '#app',
    })
</script>

el 的值即是要綁定的元素,亦即 element(元素) 的縮寫
接著我們想要在頁面上顯示 Hello World!
於是我們再寫入一個 data 的方法,裡面也是物件

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

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello World!'
        }
    })
</script>

接著我們在我們綁定的 HTML 元素上,寫入要顯示出來的文字

<div id="app">
    {{ text }}
</div>

這裡是用兩個大括號包著在 data 內的 text
這時候頁面上就會顯示 Hello World!

接著我們來探討兩種情況,我們想在網頁上新增第二個應用程式,是可行的嗎?
另外應用程式內還可以在包一個應用程式嗎? (亦即巢狀撰寫)

如果這時候,我們分別有兩個元素:

<div id="app">
    {{ text }}
</div>

<div id="app2">
    {{ text }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello World!'
        }
    });
    var app2 = new Vue({
        el: '#app2',
        data: {
            text: 'Hello World!2'
        }
    })
</script>

這時候會發現,頁面上分別會顯示 Hello World! 和 Hello World!2
所以兩個應用程式頁面上是可行的。

如果今天改成巢狀撰寫呢?

<div id="app">
    {{ text }}
    <div id="app2">
        {{ text }}
    </div>
</div>

這時候就會發現,console 會跳錯誤出來,所以 Vue 的應用程式是不可以巢狀撰寫的。


上一篇
鐵人賽Day01 - 新手初探 Vue 序
下一篇
鐵人賽Day03 - 試著把 Vue 的資料呈現在頁面上
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言