vue Vue的实例

• 说明

每个 Vue 应用都需要通过实例化 Vue 来实现。
例子如下：

import Vue from "vue";

var MainCtrl=new Vue({
...
});

• new Vue({})中参数对象属性解析

1. el

el是CSS 选择器，用于查询元素的
如

el:"#main"
或
el:".test"

2. data

data用于定义属性，其实就是和html，进行数据绑定的变量
如

   data:{
       message:"123"
   },

{{message}}

3. methods

用于定义函数，可以在界面上调用函数返回值，是输出数据，并不是数据绑定

methods:{
   details: function () {
       return `${this.message}:test`;
   }
}

{{details()}}

• 关于数据绑定

当一个Vue实例被创建的时候，即new Vue({})，它向Vue的响应式系统中加入其data对象中能找到的所有属性。当这些属性的值发生变化时，html视图也会发生变化。也就是说，数据绑定是针对data的。

• 关于data对象属性引用问题

如下：

var data={
   messagea:"123"
};

var vue=new Vue({
   el:"#main",
   data:data,
   methods:{
       details: function () {
           return `${this.messagea}:test`;
       }
   }
});

发现vue.messagea===data.messagea，说明vue对象获取了data对象属性的引用
vue：设置属性也会影响到原始数据

• vue对象获取data对象

vue.$data

• vue对象获取DOM元素

vue.$el === document.getElementById('main')