‘el’与data的两种写法

'el'的两种写法

在new Vue实例时配置'el'属性

var vm = new Vue({

    // 第一种写法

    el: "#box",

});

先创建Vue实例，随后通过vm.$mount('#box')指定'el'的值

var vm = new Vue({})

// 第二种写法

vm.$mount('#box');

data的两种写法

对象式

new Vue({

    el:'#box',

    // 第一种：对象式

    data:{

        name: "测试",

    }

})

函数式

new Vue({

    el:'#box',

    //写组件时必须使用函数式，此时不能用箭头函数否则会报错

    data:function(){

        // 此处this为Vue实例对象

        console.log(this);

        return {

            name: "测试",

        }

    }

})

重要原则

由Vue管理的函数，一定不要用箭头函数，若不用，则this指向Vue实例；反之，不能指向Vue实例，而是指向window

理解MVVM模型

1、M：模型（model）：对应data中的数据

一般JS对象

data: {

    name: "测试",

    address:'北京'

},

2、V：视图（view）：模板

DOM生成的页面

        

学校名称：{{name}}

        

学校地址：{{address}}

3、VM：视图模型（ViewModel）：Vue实例对象

数据绑定和对DOM的监听

var vm = new Vue({

        el: "#box",

        data: {

                name: "测试",

                address:'北京'

        },

        methods: {},

});

备注：

1.data中所有属性最终均会在vm实例上

2.vm实例的所有属性及其原型内的属性，均可在Vue模板中直接使用

测试代码：{{_isVue}}

测试代码：{{$el}}

//结果：

测试代码：true

测试代码：[object HTMLDivElement]