Getting Start

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-10-18 09:59:25

2614 瀏覽

分享至

菜菜菜的 Vue 30天 - Day3

Getting Start

要學一個語言、框架，就先使用他寫一個 Hello World 吧！！

一開始學習我們先使用最簡單的方式，引入 CDN 來開發吧，相信大家都對 CDN 很熟悉了。

就直接開啟一個 html 引入 Vue 的 CDN 吧～

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>	
</html>

掛載(mount)

好了，我們已經將 Vue 的 CDN 引入了，接下來我們想要在網頁上顯示 Hello World 就先來建立 Vue 實例，並且與我們的 HTML 元素做連結。

首先先創建一個 div 給他一個 id 叫做 app。

<body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
</body>

接下來就是來建立一個 Vue 實例，並且將它與 HTML 元素做連結，我們透過在 Vue 實例裡面加上一個 el 方法來與對應的元素做連結，而這連結的動作稱為掛載(mount)。

el 裡面可以填寫一個字串，他就會是一個 CSS 選擇器來找到指定的元素。

<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    });
</script>

掛載還有另外一種方式，就是透過對 Vue 實例使用$mount來做掛載，如下：

<script>
    const vm = new Vue({
      data: {
        message: 'Hello World'
      }
    });
    
    vm.$mount('#app');
</script>

這樣我們就建立了一個 Vue 實例，完整的程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
</body>
<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello World'
      }
    });
</script>	
</html>

網頁上也能夠成功的顯示 Hello World 囉～