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="http://img.readke.com/220411/0Z315A26-0.jpg">< /script> < /head> < body> < div id="app"> < h1>{{title}}< /h1> < h2>{{subtitle}}< /h2> < h3>{{content}}< /h3> < h4>{{details()}}< /h4> < /div> < script type="text/javascript" src="http://www.srcmini.com/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属性，该属于用于单元测试。
【VueJS开发（Vue实例和组件component实例创建和原理详解）】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函数中被更新，输出如下：