在使用VueJS之前，需要創(chuàng)建一個叫做根Vue實例的Vue實例(可以簡單的理解為：創(chuàng)建一個Vue對象的實例)。
語法如下 -
var app = new Vue({
// options
})
下面來看看一個例子，以理解Vue構(gòu)造函數(shù)需要哪些東西。
文件：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 : "?？?quot;,
address : "?？谑忻捞m區(qū)人民大道58號"
},
methods: {
mydetails : function() {
return "我叫 "+this.name +" ，所在城市： "+ this.city;
}
}
})
對于Vue，有一個叫做e1的參數(shù)。它采用DOM元素的id。在上面的例子的instances.html文件中，有一個div標(biāo)簽，它的id是vue_det。
<div id = "vue_det"></div>
現(xiàn)在，無論要做什么來影響這個div元素，但是不會影響它。
接下來，我們定義了數(shù)據(jù)對象。它是一個有值的名字，城市和地址。div內(nèi)部分配的是相同的。 例如，
<div id = "vue_det">
<p>名字 : {{name}}</p>
<p>城市 : {{city}}</p>
<p>{{mydetails()}}</p>
</div>
名字：{{name}}值將在插值內(nèi)被替換，即{{}}與在數(shù)據(jù)對象中分配的值，即：Maxsu。 城市也是如此。
接下來，有一個方法定義了一個函數(shù)：mydetails和一個返回值。它被分配在div內(nèi)。
<p>{{mydetails()}}</p>
因此，在{{}}中的mydetails函數(shù)被調(diào)用。 Vue實例將函數(shù)返回的值打印在{{}}中。 下面在瀏覽器中打開上面創(chuàng)建的文件：instances.html ，查看效果如下 -
現(xiàn)在，我們需要將選項傳遞給Vue構(gòu)造函數(shù)，主要是數(shù)據(jù)，模板，要掛載的元素，方法，回調(diào)函數(shù)等。
讓我們來看看傳遞給Vue的選項。
#data - 這種類型的數(shù)據(jù)可以是對象或函數(shù)。Vue將其屬性轉(zhuǎn)換為：getter/setter以使其反應(yīng)。
下面來看看如何在選項中傳遞數(shù)據(jù)。
創(chuàng)建一個文件：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: "?？?quot;}
// 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>
打開瀏覽器，瀏覽上面文件，在終端下應(yīng)該會看到以下效果 -
console.log(vm.name); - //打印Rajconsole.log(vm.$data.city); - 如上所示打印城市console.log(vm.$data); - 如上所示打印完整的對象
如果有一個組件，數(shù)據(jù)對象必須從一個函數(shù)中引用，如下面的代碼所示(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: "?？?quot;};
// 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>
在一個組件的情況下，數(shù)據(jù)是一個函數(shù)，與Vue.extend一起使用，如上所示。data是一個函數(shù)。 例如，
data: function () {
return _obj
}
要引用組件中的data數(shù)據(jù)，需要創(chuàng)建它的一個實例。 例如，
var myComponentInstance = new Component();
為了從data中獲取細(xì)節(jié)，需要像上面的父組件那樣做。 例如 -
console.log(myComponentInstance.name);
console.log(myComponentInstance.$data);
以下是瀏覽器中顯示的詳細(xì)信息 -
類型的 props 是一個字符串或?qū)ο蟮臄?shù)組。 它采用基于數(shù)組或基于對象的語法。它們被認(rèn)為是用來接受父組件數(shù)據(jù)的屬性。
示例-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 - 字符串?dāng)?shù)組。例如，{[key:string]:any}。它需要在創(chuàng)建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 } }
創(chuàng)建一個文件：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>
計算有兩個函數(shù)：aSum和aSquare。
函數(shù)aSum只是返回this.a + 2。函數(shù)aSquare再次調(diào)用兩個函數(shù)：get和set。
變量vm是Vue的一個實例，它調(diào)用aSquare和aSum函數(shù)。 另外vm.aSquare = 3從aSquare函數(shù)調(diào)用set函數(shù)，vm.aSquare調(diào)用get函數(shù)。可以查看瀏覽器中的輸出，如下圖所示。
方法 - methods將包含在Vue實例中，如以下代碼所示?？梢允褂肰ue對象來訪問函數(shù)。
<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構(gòu)造函數(shù)的一部分。使用Vue對象vm.asquare()調(diào)用方法，在asquare函數(shù)中更新屬性a的值。 a的值從1更改為25。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多