Vue實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的:
雖然沒有完全遵循 MVVM 模型,但是 Vue 的設計也受到了它的啓發。因此在文檔中經常會使用 vm
(ViewModel 的縮寫) 這個變量名錶示 Vue 實例。
當創建一個 Vue 實例時,你可以傳入一個選項對象。這篇教程主要描述的就是如何使用這些選項來創建你想要的行爲。作爲參考,你也可以在 API 文檔 中瀏覽完整的選項列表。
創建一個instance.html頁面並引入vue.js代碼,詳情如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
通過var data = {a: 1,b: null}來創建實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{a}}</div>
</div>
<script>
//定義data對象
var data = {a: 1,b: null}
//用來這個方法,a變量改變了也不會變
// Object.freeze(data)
var app = new Vue({
el:"#app",
data:data,
//當Vue開始創建的時候調用的方法
created(){
console.log("created");
}
})
console.log(data.a==app.a);
data.a=99;
console.log(app.a);
app.a=100;
console.log(data.a);
data.b=99;
console.log(app.$el==document.getElementById("#app"));
console.log(app.$data==data);
</script>
</body>
</html>
運行詳情頁面如下