六.Vue實例

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>

運行詳情頁面如下

image.png

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章