srcmini一、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函数中被更新，输出如下：
更多内容推荐：Vue入门使用教程
评论前必须登录！
注册