VueJS 实例
VueJS 实例
要使用VueJS，我们首先需要创建Vue的实例，称为根Vue实例。
语法
var app = new Vue({
// options
})让我们看一个例子来理解一下。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>下面是vue_instance.js文件的内容
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})在Vue中，有一个名为el的参数，它获取指定id的DOM对象。在上面的示例中，我们获取id为vue_det的DOM对象。它是页面中的div元素的id
<div id = "vue_det"></div>
接下来，我们定义了数据对象。它具有三个属性firstname、lastname和address，。
在div中，我们声明了三个变量。
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
{{firstname}}和 {{lastname}}会被替换为指定的值。
接着,我们定义函数mydetails和返回值的方法。它在div中被定义为
<h1>{{mydetails()}}</h1>因此，在{{ }}内部调用函数mydetails。Vue实例中返回的值将打印在{{}}}。
输出
现在，我们需要将选项传递给Vue构造函数，主要是数据、模板、要装载的元素、方法、回调等。
让我们来看看要传递给Vue的选项。
#data − 数据的类型可以是一个对象或者一个方法. Vue会自动识别并转换它们.
让我们来看看如何传递数据
例子
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"}
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>输出
console.log(vm.fname); // prints Raj console.log(vm.$data); prints the full object as shown above console.log(vm.$data.fname); // prints Raj
如果有组件，则必须从函数引用数据对象，如下面的代码所示。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"};
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>在组件的例子里，数据是与vue扩展一起使用的函数，如上所示。数据是一个函数。例如，
data: function () {
return _obj
}要引用组件中的数据，需要创建它的实例。例如，
var myComponentInstance = new Component();
要从数据中获取详细信息，我们需要执行与上面的父组件相同的操作。例如。
console.log(myComponentInstance.lname); console.log(myComponentInstance.$data);
下面是输出
Props − 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 − Type: { [key: string]: Function | { get: Function, set: Function } }
例子
<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: 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只返回这个. a +2。函数aSquare又有两个函数得到并设置。
变量VM是Vue的一个实例，它调用aSquare和aSum。另外，aSquare =3调用aSquare中的set函数，而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>方法是Vue构造函数的一部分。让我们使用Vue物件vm.asquare(),呼叫方法，属性a的值会在asquare函式中更新。a的值从1更改为25，并在以下浏览器控制台中显示的值。
