Vue 06 - el与data的两种用法

当我们使用Vue框架的时候，会用到el关联html元素与vue实例对象，data作为数据源。在本节我们会介绍el与data的两种用法。

el用法1

el在vue实例中提供el作为key, el的元素定位作为value.如下，vue实例会找到html的id = root的元素，并于vue关联。

data用法1

data作为vue的数据源，第一种用法是对象式，也作为key - value的形式放在data内容。

el与data的一种用法代码如下：

    const v = new Vue({
        el:"#root",
        data: {
            name: "大力pig"
        }
    })

el用法2

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

v.$mount('#root') //第二种写法

data用法2

函数式用法

• Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

  当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

代码展示

    const v = new Vue({
        data:function (){ //函数式用法
            return{
                name:'大力pig'
            }
        }
    })
    v.$mount('#root') //第二种写法

总结：

el两种写法. 1. 创建vue时候配置el属性。2.先创建vue实例，后通过vm.$mount(’#root'）指定el的值。

data两种写法. 1. 对象式. 2. 函数式. 

注意事项，由Vue管理的函数，不要写箭头函数，创建箭头函数之后，this就不是vue实例。