一.vue實例
每個vue應用都是通過Vue構造函數創建的一個新的實例開始的:
var vm = new Vue({
//選項對象
})
在這其中vm(viewModel的簡稱)通常都表示vue實例的變量名。當創建一個vue實例，你都可以傳入一個選項對象作爲參數，完整的選項對象，你可能需要查看API文檔。
一個vue應用應該由一個通過new Vue構造的根實例和許多可嵌套可複用的組件構成，這也就是說所有的組件都是vue實例。
二.數據與方法
當一個vue實例被創建完成之後，就會向它的vue響應系統中加入了data對象中能找到的所有屬性，當這些屬性的值發生改變之後，視圖就會發生響應，也就是更新相應的值。我們來看一個例子:
//源數據對象
var obj = { name:"eveningwater" };
//構建實例
var vm = new Vue({
data:obj
})
//這兩者是等價的
vm.name === obj.name;
//這也就意味着
//修改data對象裏的屬性也會影響到源數據對象的屬性
vm.name = "waterXi";
obj.name;//"waterXi"
//同樣的，修改源數據對象的屬性也會影響到data對象裏的屬性
obj.name = 'stranger';
vm.name;//"stranger"
可能需要注意的就是，只有data對象中存在的屬性纔是響應式的，換句話說，你爲源數據對象添加一個屬性，根本不會影響到data對象。如:
obj.sex = "男";
vm.sex;//undefined
obj.sex;//'男'
obj.sex = "哈哈哈";
vm.sex;//undefined
這也就意味着你對sex的修改並不會讓視圖更新，如此一來，你可能需要在data對象中初始化一些值，如下:
data:{
str:'',
bool:false,
arr:[],
obj:{},
err:null,
num:0
}
查看此處具體示例。
只是還有一個例外Object.freeze(),這個方法就相當於鎖定（凍結）一個對象，使得我們無法修改現有屬性的特性和值，並且也無法添加新屬性。因此這會讓vue響應系統無法追蹤變化:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入vue.js開發版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>freeze</title>
</head>
<body>
<div id="app">
<span>{{ message }}</span>
<button type="button" v-on:click="reverseMessage">反轉信息</button>
</div>
<script>
//這裏寫JavaScript代碼
</script>
</body>
</html>
js代碼如下:
var obj = {
message: "hello,vue.js!"
}
//阻止對象
Object.freeze(obj);
var app = new Vue({
el: "#app",
data:obj,
methods: {
reverseMessage: function() {
this.message = this.message.split("").reverse().join("");
}
}
});
如此一來，無論我們怎麼點擊按鈕，都不會將信息反轉，設置頁面還會報錯，如下圖:
可前往此處具體示例自行查看效果。