VueJS开发：Vue实例和组件component实例创建和原理详解

一、Vue实例创建和原理解析

VueJS开发的第一步是创建一个Vue实例，这个实例称为根vue实例，语法如下：

var app = new Vue({
            // options 选项
        });

下面看一个实例，看看Vue实例的构造函数需要哪些元素，如下：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{subtitle}}</h2>
        <h3>{{content}}</h3>
        <h4>{{details()}}</h4>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

app.js代码如下：

var app = new Vue({
    el: "#app",
    data: {
        title: "VueJS实例",
        subtitle: "VueJS实例构造函数的所有元素解析",
        content: "VueJS开发，Vue实例创建，Vue的构造函数详解"
    },
    methods: {
        details: function(){
            return "all info: " + this.title + " " + this.subtitle + " " + this.content;
        }
    }
});

1、创建Vue的构造函数中传入的是一个对象，其中有一个el元素，它的值为DOM元素的id，在上面的例子中，el的值为#app，它是div元素的id，在上面的html代码中你可以看到：

<div id="app">

在div内部操作会影响该div元素，但是在div的外部进行其它处理或操作，则不会影响该div。

2、下一步是创建一个数据对象，它有3个属性：title、subtitle和content，和这些属性名相同的在div中也有，如下：

<div id="app">
        <h1>{{title}}</h1>
        <h2>{{subtitle}}</h2>
        <h3>{{content}}</h3>
    </div>

{{}}称为插值表达式，插值表达式中的元素将会被数据对象替换，要注意的是，数据对象和插值表达式中的相关名称要相同。

3、下一个是在vue构造函数中methods中定义了一个details函数，与该函数相对应的是#app元素中的{{details()}}。在插值表达式中的函数会被调用，调用的函数在methods中寻找，函数的返回值会打印在{{}}中，如下是以上程序的输出：

4、以后的大多开发都是通过将options各种选项传给Vue的构造函数实现，主要是数据data，模板template，挂载元素，方法methods，回调callbacks等等。

下面看看是如下传入数据data元素的，注意上面只是一个例子，在data对象中是详细列出各种属性，但是开发中请不要这么做，因为data对象可能会很复杂，而且这个对象可能在其它地方也会用到，所以请用一个JavaScript对象封装起来，如下代码：

var block = {};
block.title = "VueJS实例";
block.subtitle = "VueJS实例构造函数的所有元素解析";
block.content = "VueJS开发，Vue实例创建，Vue的构造函数详解";

var app = new Vue({
    data: block, // 只需传一个对象即可
});
console.log(app.title);
console.log(app.$data);
console.log(app.$data.subtitle);
console.log(app.$data.content);

在console控制台查看输出如下：

其中console.log(app.title);输出block对象的title属性。

console.log(app.$data);输出app的data数据对象，该对象其实就是block。

console.log(app.$data.subtitle);输出block对象的subtitle属性。

二、Vue属性和组件component使用和原理解析

在Vue的组件component中，数据对象的引用需要通过一个函数，如下代码：

var block = {};
block.title = "VueJS实例";
block.subtitle = "VueJS实例构造函数的所有元素解析";
block.content = "VueJS开发，Vue实例创建，Vue的构造函数详解";

var app = new Vue({
    data: block, // 只需传一个对象即可
});
console.log(app.title);
console.log(app.$data);
console.log(app.$data.subtitle);
console.log(app.$data.content);

var Component = Vue.extend({
    data: function(){
        return block;
    }
});

var ct = new Component();
console.log(ct.title); // 输出block的title
console.log(ct.$data); // 输出Component中的data
console.log(ct.$data.subtitle); // 输出block或data的subtitle

1、在使用组件component的情况中，数据是一个函数，在Vue.extend中使用，注意extend传入的是一个对象。数据data是一个函数，如下：

data: function(){
        return block;
    }

2、要引用组件中的data数据对象，我们需要创建一个组件实例，也就是：

var ct = new Component();

要获取详细的数据，我们需要只需和上面Vue实例一样调用即可，例如：

console.log(ct.title); // 输出block的title
console.log(ct.$data); // 输出Component中的data
console.log(ct.$data.subtitle); // 输出block或data的subtitle

下面是浏览器console的输出：

3、props属性，props的类型是一个字符串数组或一个对象，它的值是一个数组或一个对象，它们是用于接受来自父组件的数据的属性，例子1：

Vue.component("props sample", {
    props : ["size", "message"]
})

例子2：

Vue.component("props-demo", {
    props: {
        age: Number, // 属性age的类型检查
        username: { // 属性username的类型检查
            type: String, // 属性的类型为String
            default: "nickname",
            require: true,
            validator: function(value){
                return value != "" && value.length > 6;
            }
        }
    }
});

4、propsData属性，该属于用于单元测试。

5、type属性，值为字符串数组，例如{[key: string]: any}，它需要在创建Vue实例期间传递，例如：

var Comp = Vue.extend({
    props: ["message"],
    template: "<div>{{message}}</div>"
 })
 var vm = new Comp({
    propsData: {
       message: "hello vue js"
    }
 })

6、computed属性，用于计算属性值，类型为：{[key: string]: Function | {get: Function, set: Function}}，例子如下：

var app = new Vue({
    data: {name: "VueJS"}, // 属性name
    computed: { // 计算属性name的值
       // 获取name值
       basic: function () {
          return this.name + " " + "Development";
       },
       
       // 同时提供get和set函数
       direction: {
          get: function () {
             return this.name + " " + "UI";
          },
          set: function (v) {
             this.name = v;
          }
       }
    }
 })
 console.log(app.direction);
 app.direction = "ReactJS";
 console.log(app.name);
 console.log(app.basic);

computed中有两个函数，basic函数和direction函数，basic函数返回this.name+” ”+”Development”，函数direction有两个函数get和set。

变量app是一个Vue实例，可以使用调用basic和direction，其中app.direction调用其中的函数get函数，赋值时调用set函数，app.basic调用basic函数获取值，输出如下：

7、methods属性，Vue实例包含该methods属性，如下面的代码所示。我们可以使用Vue对象访问该函数。

var app = new Vue({
    data: {name: "VueJS"},
    methods: {
       topic: function () {
          this.name += " UI";
       }
    }
 })
 app.topic();
 console.log(app.name); // "VueJS UI"

methods是Vue构造函数的一部分，使用vue实例对象app调用topic()，name属性的值会在topic函数中被更新，输出如下：