第一隻 Vue.js ，以燒香拜拜程式(Hello World)，來了解基本的Vue.js 使用的設定。

 

首先要先載入相關的函示庫:

1
 
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

 

Hello World 程式碼如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue Test Demo</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

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

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>
</body>

</html>

 

第17行的 el : 設定 Vue 控制的物件(此範例為id = app)，

而文字訊息的標籤設message 在第19行指定為"Hello Vue.js" 的字串進行替代。

(程式碼連結)

arrow
arrow
    文章標籤
    vue.js
    全站熱搜

    Lung-Yu,Tsai 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄