1-Vue官网学习-创建一个vue实例,数据与方法

2019-05-23  本文已影响0人  波克比

HTML部分:

        <div id="app0">

            {{message}}

        </div>

        <div id="example">

            {{a}}

        </div>   

JS部分:

// 我们的数据对象

        var data = {

            a: 1,

            message: 'hello Vue!'

        }

        // 该对象被加入到一个 Vue 实例中

        var vm = new Vue({

            el: '#app0',

            data: data

        });

        console.log(vm.a === data.a);       //1

        // 设置属性也会影响到原始数据

        vm.a = 2;

        console.log(data.a);                //2

        // ……反之亦然

        data.a = 3;

        console.log(vm.a);                  //3

        //值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。

        //也就是说如果你添加一个新的属性,如下:那么对 b 的改动将不会触发任何视图的更新。

        vm.b = 'hello';

        console.log(data.b);                //undefined

        //除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来

        var data = { a: 1 }

        var vm = new Vue({

            el: '#example',

            data: data

        })

        console.log(vm.$data === data); // => true

        console.log(vm.$el === document.getElementById('example')); // => true

你可以在 API 参考中查阅到完整的实例属性和方法的列表。

上一篇下一篇

猜你喜欢

热点阅读