在使用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。