vue2.0學習(二)-全局API
vue2.0學習(二)-全局API
GitHub源碼 https://github.com/sunnyguyan/VueDemo
1.Vue.directive自定義指令
一、什麽是全局API？
全局API並不在構造器裏，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，比如我們今天要學習的指令Vue.directive。說的簡單些就是，在構造器外部用Vue提供給我們的API函數來定義新的功能
二、Vue.directive自定義指令
我們在第一季就學習了內部指令，我們也可以定義一些屬於自己的指令，比如我們要定義一個v-dire的指令，作用就是讓文字變成綠色。
在自定義指令前我們寫一個小功能，在頁面上有一個數字為10，數字的下面有一個按鈕，我們每點擊一次按鈕後，數字加1.
代碼
Html代碼
<div id="app">
<div v-dire="color" id="demo">
{{num}}
</div>
<div>
<button @click="add">Add</button>
</div>
</div>js代碼
var app=new Vue({ el:‘#app‘, data:{ num:10, color:‘green‘ }, methods:{ add:function(){ this.num++; } } })
寫好了這個功能，我們現在就自己定義一個全局的指令。我們這裏使用Vue.directive( );
Vue.directive(‘jsdire‘,function(el,binding,vnode){
el.style=‘color:‘+binding.value;
});三、自定義指令中傳遞的三個參數
el:指令所綁定的元素，可以用來直接操作DOM
binding:一個對象，包含指令的很多信息
vnode:Vue編譯生成的虛擬節點
四、自定義指令的生命周期
- bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個綁定時執行一次的初始化動作。
- inserted:被綁定元素插入父節點時調用(父節點存在即可調用，不存在於document中)
- update:被綁定於元素所在的模板更新時調用，而無論綁定值是否變化。通過比較更新前後的綁定值,可以忽略不必要的模板更新
- componentUpadted:被綁定元素所在模板完成一次更新周期時調用
- unbind:只調用一次,指令與元素解綁時調用
bind:function(){//被綁定
console.log(‘1 - bind‘);
},
inserted:function(){//綁定到節點
console.log(‘2 - inserted‘);
},
update:function(){//組件更新
console.log(‘3 - update‘);
},
componentUpdated:function(){//組件更新完成
console.log(‘4 - componentUpdated‘);
},
unbind:function(){//解綁
console.log(‘1 - bind‘);
}
2.Vue.extend構造器的延伸
一、什麽是Vue.extend？
Vue.extend 返回的是一個“擴展實例構造器”,也就是預設了部分選項的Vue實例構造器。經常服務於Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生產組件實例，並掛載到自定義元素上。
二、自定義無參數標簽
我們想象一個需求，需求是這樣的，要在博客頁面多處顯示作者的網名，並在網名上直接有鏈接地址。我們希望在html中只需要寫 ，這和自定義組件很像，但是他沒有傳遞任何參數，只是個靜態標簽。
我們的Vue.extend該登場了，我們先用它來編寫一個擴展實例構造器。代碼如下：
var authorExtend = Vue.extend({
template:"<p><a :href=‘authorUrl‘>{{authorName}}</a></p>",
data:function(){
return{
authorName:‘百度‘,
authorUrl:‘http://www.baidu.com‘
}
}
});這時html中的標簽還是不起作用的，因為擴展實例構造器是需要掛載的，我們再進行一次掛載
new authorExtend().$mount(‘author‘);三、掛載到普通標簽上
還可以通過HTML標簽上的id或者class來生成擴展實例構造器，Vue.extend裏的代碼是一樣的，只是在掛載的時候，我們用類似jquery的選擇器的方法，來進行掛載就可以了。
new authorExtend().$mount(‘#author‘);3.Vue.set全局操作
Vue.set 的作用就是在構造器外部操作構造器內部的數據、屬性或者方法。比如在vue構造器內部定義了一個count為1的數據，我們在構造器外部定義了一個方法，要每次點擊按鈕給值加1.就需要用到Vue.set。
一、引用構造器外部數據：
什麽是外部數據，就是不在Vue構造器裏裏的data處聲明，而是在構造器外部聲明，然後在data處引用就可以了。外部數據的加入讓程序更加靈活，我們可以在外部獲取任何想要的數據形式，然後讓data引用。
看一個簡單的代碼：
//在構造器外部聲明數據
var outData={
count:1,
goodName:‘car‘
};
var app=new Vue({
el:‘#app‘,
//引用外部數據
data:outData
})二、在外部改變數據的三種方法:
1、用Vue.set改變
function add(){
Vue.set(outData,‘count‘,4);
}2、用Vue對象的方法添加
app.count++;3、直接操作外部數據
outData.count++;其實這三種方式都可以操作外部的數據，Vue也給我們增加了一種操作外部數據的方法。
三、為什麽要有Vue.set的存在?
由於Javascript的限制，Vue不能自動檢測以下變動的數組。
當你利用索引直接設置一個項時，vue不會為我們自動更新。
當你修改數組的長度時，vue不會為我們自動更新。
看一段代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Vue.set 全局操作</title>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">{{aa}}</li>
</ul>
</div>
<button onclick="add()">外部添加</button>
<script type="text/javascript">
function add(){
console.log("我已經執行了");
app.arr[1]=‘ddd‘;
//Vue.set(app.arr,1,‘ddd‘);
}
var outData={
arr:[‘aaa‘,‘bbb‘,‘ccc‘]
};
var app=new Vue({
el:‘#app‘,
data:outData
})
</script>
</body>
</html>這時我們的界面是不會自動跟新數組的，我們需要用Vue.set(app.arr,1,‘ddd‘)來設置改變，vue才會給我們自動更新，這就是Vue.set存在的意義。
4.Vue的生命周期(鉤子函數)
Vue一共有10個生命周期函數，我們可以利用這些函數在vue的每個階段都進行操作數據或者改變內容。
我們直接來看一段代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>構造器的聲明周期</title>
</head>
<body>
<h1>構造器的聲明周期</h1>
<hr>
<div id="app">
{{message}}
<p><button @click="jia">加分</button></p>
</div>
<button onclick="app.$destroy()">銷毀</button>
<script type="text/javascript">
var app=new Vue({
el:‘#app‘,
data:{
message:1
},
methods:{
jia:function(){
this.message ++;
}
},
beforeCreate:function(){
console.log(‘1-beforeCreate 初始化之後‘);
},
created:function(){
console.log(‘2-created 創建完成‘);
},
beforeMount:function(){
console.log(‘3-beforeMount 掛載之前‘);
},
mounted:function(){
console.log(‘4-mounted 被創建‘);
},
beforeUpdate:function(){
console.log(‘5-beforeUpdate 數據更新前‘);
},
updated:function(){
console.log(‘6-updated 被更新後‘);
},
activated:function(){
console.log(‘7-activated‘);
},
deactivated:function(){
console.log(‘8-deactivated‘);
},
beforeDestroy:function(){
console.log(‘9-beforeDestroy 銷毀之前‘);
},
destroyed:function(){
console.log(‘10-destroyed 銷毀之後‘)
}
})
</script>
</body>
</html>5.Template制作模板
一、直接寫在選項裏的模板
直接在構造器裏的template選項後邊編寫。這種寫法比較直觀，但是如果模板html代碼太多，不建議這麽寫.
javascript代碼:
var app=new Vue({
el:‘#app‘,
data:{
message:‘hello Vue!‘
},
template:`
<h1 style="color:red">我是選項模板</h1>
`
})二、寫在<template>標簽裏的模板
這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也可以制作頁面.
<template id="demo2">
<h2 style="color:red">我是template標簽模板</h2>
</template>
<script type="text/javascript">
var app=new Vue({
el:‘#app‘,
data:{
message:‘hello Vue!‘
},
template:‘#demo2‘
})
</script>三、寫在<script>標簽裏的模板
這種寫模板的方法，可以讓模板文件從外部引入.
<script type="x-template" id="demo3">
<h2 style="color:red">我是script標簽模板</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:‘#app‘,
data:{
message:‘hello Vue!‘
},
template:‘#demo3‘
})
</script>這節課我們學習了Template的三種寫法，以後學習到vue-cli的時候還會學到一種xxx.vue的寫法.
6.Component 初識組件
一、全局化註冊組件
全局化就是在構造器的外部用Vue.component來註冊，我們註冊現在就註冊一個的組件來體驗一下.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-1</title>
</head>
<body>
<h1>compotent-1</h1>
<hr>
<div id="app">
<zidingyi></zidingyi>
<panda></panda>
</div>
<script>
Vue.component("zidingyi",{
template:`<div style="color:red;">全局化註冊的自定義標簽</div>`
})
var app=new Vue({
el:‘#app‘,
components:{
‘panda‘:{
template:`<div style="color:red;">局部註冊的panda標簽</div>`
}
}
})
</script>
</body>
</html>我們在javascript裏註冊了一個組件，在HTML中調用了他。這就是最簡單的一個組件的編寫方法，並且它可以放到多個構造器的作用域裏.
二、局部註冊組件局部註冊組件和全局註冊組件是向對應的，局部註冊的組件只能在組件註冊的作用域裏進行使用，其他作用域使用無效.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-1</title>
</head>
<body>
<h1>component-1</h1>
<hr>
<div id="app">
<panda></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:‘#app‘,
components:{
"panda":{
template:`<div style="color:red;">局部註冊的panda標簽</div>`
}
}
})
</script>
</body>
</html>從代碼中你可以看出局部註冊其實就是寫在構造器裏，但是你需要註意的是，構造器裏的components 是加s的，而全局註冊是不加s的.
三、組件和指令的區別
組件註冊的是一個標簽，而指令註冊的是已有標簽裏的一個屬性。在實際開發中我們還是用組件比較多，指令用的比較少。因為指令看起來封裝的沒那麽好，這只是個人觀點。
Component 組件props 屬性設置
props選項就是設置和獲取標簽上的屬性值的，例如我們有一個自定義的組件,這時我們想給他加個標簽屬性寫成 意思就是熊貓來自中國，當然這裏的China可以換成任何值。定義屬性的選項是props。
一、定義屬性並獲取屬性值
定義屬性我們需要用props選項，加上數組形式的屬性名稱，例如：props:[‘here‘]。在組件的模板裏讀出屬性值只需要用插值的形式，例如{{ here }}.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-2</title>
</head>
<body>
<h1>component-2</h1>
<hr>
<div id="app">
<panda here="China"></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:‘#app‘,
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:[‘here‘]
}
}
})
</script>
</body>
</html>上面的代碼定義了panda的組件，並用props設置了here的屬性值，在here屬性值裏傳遞了China給組件。
最後輸出的結果是紅色字體的Panda from China.
二、屬性中帶‘-‘的處理方式
我們在寫屬性時經常會加入‘-‘來進行分詞，比如：，那這時我們在props裏如果寫成props:[‘form-here‘]是錯誤的，我們必須用小駝峰式寫法props:[‘formHere‘].
html文件：
<panda from-here="China"></panda>javascript代碼:
var app=new Vue({
el:‘#app‘,
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:[‘fromHere‘]
}
}
})三、在構造器裏向組件中傳值
把構造器中data的值傳遞給組件，我們只要進行綁定就可以了。就是我們第一季學的v-bind:xxx.
我們直接看代碼:
Html文件:
<panda v-bind:here="message"></panda>javascript文件:
var app=new Vue({
el:‘#app‘,
data:{
message:‘SiChuan‘
},
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:[‘here‘]
}
}
})8.Component父子組件關系
在實際開發中我們經常會遇到在一個自定義組件中要使用其他自定義組件，這就需要一個父子組件關系.
一、構造器外部寫局部註冊組件
局部組件的編寫放到了構造器內部，如果組件代碼量很大，會影響構造器的可讀性，造成拖拉和錯誤。
我們把組件編寫的代碼放到構造器外部或者說單獨文件。
我們需要先聲明一個對象,對象裏就是組件的內容。
var panda= {
template:`<div>Panda from China!</div>`
}聲明好對象後在構造器裏引用就可以了.
components:{
"panda":panda
}html中引用
<panda></panda>父子組件的嵌套
我們先聲明一個父組件，比如叫panda，然後裏邊我們加入一個city組件，我們來看這樣的代碼如何寫.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-3</title>
</head>
<body>
<h1>compotent-3</h1>
<hr>
<div id="app">
<panda></panda>
</div>
<script>
var city={
template:‘<div>sichuan of china</div>‘
}
var panda={
template:`<div>Panda from China!<city></city></div>`,
components:{
"city":city
}
}
var app=new Vue({
el:‘#app‘,
components:{
‘panda‘:panda
}
})
</script>
</body>
</html>9.Component 標簽
<component></component>標簽是Vue框架自定義的標簽，它的用途就是可以動態綁定我們的組件，根據數據的不同更換不同的組件。
- 我們先在構造器外部定義三個不同的組件，分別是componentA,componentB和componentC.
var componentA={
template:`<div>I‘m componentA</div>`
}
var componentB={
template:`<div>I‘m componentB</div>`
}
var componentC={
template:`<div>I‘m componentC</div>`
}- 我們在構造器的components選項裏加入這三個組件.
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
}- 我們在html裏插入component標簽，並綁定who數據，根據who的值不同，調用不同的組件。
<component v-bind:is="who"></component>這就是我們的組件標簽的基本用法。我們提高以下，給頁面加個按鈕，每點以下更換一個組件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-4</title>
</head>
<body>
<h1>component-4</h1>
<hr>
<div id="app">
<component v-bind:is="who"></component>
<button @click="changeComponent">changeComponent</button>
</div>
<script type="text/javascript">
var componentA={
template:`<div style="color:red;">I‘m componentA</div>`
}
var componentB={
template:`<div style="color:green;">I‘m componentB</div>`
}
var componentC={
template:`<div style="color:pink;">I‘m componentC</div>`
}
var app=new Vue({
el:‘#app‘,
data:{
who:‘componentA‘
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
},
methods:{
changeComponent:function(){
if(this.who==‘componentA‘){
this.who=‘componentB‘;
}else if(this.who==‘componentB‘){
this.who=‘componentC‘;
}else{
this.who=‘componentA‘;
}
}
}
})
</script>
</body>
</html>vue2.0學習(二)-全局API