在使用vuejs之前，需要创建一个叫做根vue实例的vue实例(可以简单的理解为：创建一个vue对象的实例)。
语法如下 -
var app = new vue({
// options
})
下面来看看一个例子，以理解vue构造函数需要哪些东西。
文件：instances.html -
<html>
<head>
<meta charset="utf-8" />
<title>vuejs实例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<p>姓名 : {{name}}</p>
<p>城市 : {{city}}</p>
<p>{{mydetails()}}</p>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>
文件：vue_instance.js -
var vm = new vue({
el: '#vue_det',
data: {
name : "maxsu",
city : "海口",
address : "海口市美兰区人民大道58号"
},
methods: {
mydetails : function() {
return "我叫 "+this.name +" ，所在城市： "+ this.city;
}
}
})
对于vue，有一个叫做e1的参数。它采用dom元素的id。在上面的例子的instances.html文件中，有一个div标签，它的id是vue_det。
<div id = "vue_det"></div>
现在，无论要做什么来影响这个div元素，但是不会影响它。
接下来，我们定义了数据对象。它是一个有值的名字，城市和地址。div内部分配的是相同的。 例如，
<div id = "vue_det">
<p>名字 : {{name}}</p>
<p>城市 : {{city}}</p>
<p>{{mydetails()}}</p>
</div>
名字：{{name}}值将在插值内被替换，即{{}}与在数据对象中分配的值，即：maxsu。 城市也是如此。
接下来，有一个方法定义了一个函数：mydetails和一个返回值。它被分配在div内。
<p>{{mydetails()}}</p>
因此，在{{}}中的mydetails函数被调用。 vue实例将函数返回的值打印在{{}}中。 下面在浏览器中打开上面创建的文件：instances.html ，查看效果如下 -
现在，我们需要将选项传递给vue构造函数，主要是数据，模板，要挂载的元素，方法，回调函数等。
让我们来看看传递给vue的选项。
#data - 这种类型的数据可以是对象或函数。vue将其属性转换为：getter/setter以使其反应。
下面来看看如何在选项中传递数据。
创建一个文件：instances-obj.html -
<html>
<head>
<meta charset="utf-8" />
<title>vuejs实例-示例二</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { name: "maxsu", city: "海口"}
// direct instance creation
var vm = new vue({
data: _obj
});
console.log(vm.name);
console.log(vm.$data.city);
console.log(vm.$data);
</script>
</body>
</html>
打开浏览器，浏览上面文件，在终端下应该会看到以下效果 -
console.log(vm.name); - //打印rajconsole.log(vm.$data.city); - 如上所示打印城市console.log(vm.$data); - 如上所示打印完整的对象
如果有一个组件，数据对象必须从一个函数中引用，如下面的代码所示(instances-component.html) -
<html>
<head>
<meta charset="utf-8" />
<title>vuejs实例-示例二</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { name: "maxsu", city: "海口"};
// direct instance creation
var vm = new vue({
data: _obj
});
console.log(vm.name);
console.log(vm.$data);
console.log(vm.$data.city);
// must use function when in vue.extend()
var component = vue.extend({
data: function () {
return _obj
}
});
var mycomponentinstance = new component();
console.log(mycomponentinstance.name);
console.log(mycomponentinstance.$data);
</script>
</body>
</html>
在一个组件的情况下，数据是一个函数，与vue.extend一起使用，如上所示。data是一个函数。 例如，
data: function () {
return _obj
}
要引用组件中的data数据，需要创建它的一个实例。 例如，
var mycomponentinstance = new component();
为了从data中获取细节，需要像上面的父组件那样做。 例如 -
console.log(mycomponentinstance.name);
console.log(mycomponentinstance.$data);
以下是浏览器中显示的详细信息 -
类型的 props 是一个字符串或对象的数组。 它采用基于数组或基于对象的语法。它们被认为是用来接受父组件数据的属性。
示例-1
vue.component('props-demo-simple', {
props: ['size', 'mymessage']
})
示例-2
vue.component('props-demo-advanced', {
props: {
// just type check
height: number,
// type check plus other validations
age: {
type: number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
propsdata - 用于单元测试。type - 字符串数组。例如，{[key:string]:any}。它需要在创建vue实例的时候传递。
示例
var comp = vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new comp({
propsdata: {
msg: 'hello'
}
})
computed − 输入: { [key: string]: function | { get: function, set: function } }
创建一个文件：instances-computed.html -
<html>
<head>
<meta charset="utf-8" />
<title>vuejs实例- 示例三</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new vue({
data: { a: 2 },
computed: {
// get only, just need a function
asum: function () {
return this.a + 2;
},
// both get and set
asquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.asquare); // -> 4
vm.asquare = 3;
console.log(vm.a); // -> 6
console.log(vm.asum); // -> 8
</script>
</body>
</html>
计算有两个函数：asum和asquare。
函数asum只是返回this.a + 2。函数asquare再次调用两个函数：get和set。
变量vm是vue的一个实例，它调用asquare和asum函数。 另外vm.asquare = 3从asquare函数调用set函数，vm.asquare调用get函数。可以查看浏览器中的输出，如下图所示。
方法 - methods将包含在vue实例中，如以下代码所示。可以使用vue对象来访问函数。
<html>
<head>
<title>vuejs introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new vue({
data: { a: 5 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a); // 25
</script>
</body>
</html>
methods是vue构造函数的一部分。使用vue对象vm.asquare()调用方法，在asquare函数中更新属性a的值。 a的值从1更改为25。
