初识vue

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

import Vue from "vue";
 
var MainCtrl=new Vue({
...
});
new Vue({})中参数对象属性解析
el
el是CSS 选择器，用于查询元素的
如

el:"#main"
或
el:".test"
data
data用于定义属性，其实就是和html，进行数据绑定的变量
如

   data:{
       message:"123"
   },
<h3>{{message}}</h3>

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

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

关于数据绑定
当一个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')