Vue —— el 与 data 的使用方式

作者：Sam

1. 简介

在vue的实体中，el与data有多种与html元素绑定的方式

2. el

1. 使用vue实体中的el属性来绑定
   el后面跟上元素的选择器，或者传入dom对象也可以（不过这种方式一般没人会用）

new Vue({
    el: '#div1',
    data:{
        username: 'Sam',
        password: '123456'
    }
})

2. **使用Vue原型对象的mount能够用来绑定元素
   这种方式，需要将Vue的实体对象作为对象保存
   $mount传入元素选择器即可

const vm = new Vue({
    data:{
        username: 'Sam',
        password: '123456'
    }
})

// 传入选择器，选择id为div1的元素
vm.$mount('#div1')

3. data

1. data使用对象传入
   data后面直接传入对象

new Vue({
    el: '#div2',
    data: {
        username: 'James',
        password: '123'
    }
})

2. 用函数返回对象（推荐使用这种方式）
   定义一个data函数，来返回对象

new Vue({
    el: '#div2',
    data(){
        return {
            username: 'Mary',
            password: 'Mary123'
        }
    }
})

这里使用的是es6的函数简写形式