Vue 我的第一支Vue.js

我的第一支Vue.js。

學習Vue之前你必須要大概知道HTML，CSS與JavaScript及三者間是如何彼此交互作用。

下面是在html中使用Vue的範例。

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

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

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
});
app.message += "...ゴゴゴゴゴ" // 修改vm.message的內容
</script>

效果如下。

Hello Vue.js!...ゴゴゴゴゴ

使用Vue framework須依賴vue.js，所以<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>用來載入vue.js。

左右兩個大括弧{{}}符號為Vue的mustache tag，用來將vue實例的data內容顯示在被掛載的DOM元素（簡單說DOM元素就是指html的tag，例如<p>、<div>、<h1>）。

使用Vue需要先建立一個Vue的實例(vue instance)，語法為new Vue();，Vue的實例用來綁定DOM元素，也就是上例的<div id="app">，在被綁定元素外的DOM元素不會受此Vue實例影響。

在Vue的建構參數中設定el屬性，其值為要被掛載DOM元素的id，也就是上例的#app

data的值會顯示於Vue實例掛載的DOM元素中{{}}符號對應名稱。

接著可以參考Vue 在Mustache符號中插入Vue methods

參考：

• Vue.js Introduction
• MDN web docs - Introduction to the DOM