來源為Vue官方，可以直接去參考~
首先先增加他的cdn連結，放置於body裡面最底下
<script src="https://unpkg.com/vue/dist/vue.js"></script>
放入後即可開始寫程式
1.內容放入進標籤內
意思是綁定id是app，定義訊息 ，而html綁定是用 {{}} ，所以資料會去對應名子找到訊息
<div id="app">
{{ message }}
</div>
<script>
//對內容做更新
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!123'
}
});
</script>
2.編輯對屬性修改
可以看到有個v-bind，這是vue上面定義的特殊屬性，而我們寫的將會綁定 在span的tilte上 變成 <span title="You loaded‧‧‧‧"></span>
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
<script>
//編輯對屬性修改
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
});
</script>
3.條件成立時，顯示或隱藏
當有此資料綁定時候並且為true時候則顯示，如果我們資料條件為false，則會將 p標籤這段隱藏
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
<script>
//條件式顯示與否
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
</script>
4.For迴圈產生多筆內容(等等可以跟第5點一起看)
對於產生的內容會產生出多筆的<li>內容</li>，是使用v-for 去記錄這個陣列裡面 todo就是我跑的每一筆
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
//for迴圈跑文字
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});
</script>
5.按鈕設定監聽事件，使我們可以對按鈕做出一些事情(可以跟第四點一起看)
我在 p標籤 產生出一個內容，並且我對button 綁定了一個事件，取名為reverseMessage
而綁定methods就是在vue的底下 加上methods:{} 在裡面寫上你那事件名稱 : function(){}
這邊裡面寫到的是，按下button後將內容顛倒過來，並且我另外自己在加了，就是將我第四點所寫的增加新的ㄧ筆，並且因為我的 i 是全域變數，所以會+1+1上去
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var i=1;
//對於按鈕做監聽事件，去顯示資料，另外搭配加上可以增加app4東西
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
app4.todos.push({ text: 'New item'+i });
i++;
}
}
});
</script>
6.雙向綁定
在輸入框內，我div標籤id為app-6裡面的input，透過v-model綁定，也就是我只用了網頁輸入框裡面的內容，我就已經做到我js訊息的榜定，我的 data:{message:'Hello Vue!'} 會跟著一起變動，所以我的p標籤就會跟著一起改變內容
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
//雙向綁定
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>