VUE全局api
一、什么是全局API？
全局API并不在構(gòu)造器里，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內(nèi)置了一些全局API，比如我們今天要學(xué)習(xí)的指令Vue.directive。說的簡單些就是，在構(gòu)造器外部用Vue提供給我們的API函數(shù)來定義新的功能。
二、Vue.directive自定義指令
我們在第一季就學(xué)習(xí)了內(nèi)部指令，我們也可以定義一些屬于自己的指令，比如我們要定義一個v-jspang的指令，作用就是讓文字變成綠色。
在自定義指令前我們寫一個小功能，在頁面上有一個數(shù)字為10，數(shù)字的下面有一個按鈕，我們每點擊一次按鈕后，數(shù)字加1.
你不妨模仿下面的功能，在自己本地先寫出這個效果。我用JSRun提供了預(yù)覽和代碼展示功能，你也可以在線調(diào)試。
寫好了這個功能，我們現(xiàn)在就自己定義一個全局的指令。我們這里使用Vue.directive( );
| 1 2 3 | Vue.directive('jspang',function(el,binding,vnode){ ????????el.style='color:'+binding.value; }); |
?可以看到數(shù)字已經(jīng)變成了綠色，說明自定義指令起到了作用。可能您看這個代碼還是有些不明白的，比如傳入的三個參數(shù)到底是什么。
三、自定義指令中傳遞的三個參數(shù)
el:?指令所綁定的元素，可以用來直接操作DOM。
binding: ?一個對象，包含指令的很多信息。
vnode:?Vue編譯生成的虛擬節(jié)點。
?
四、自定義指令的生命周期
自定義指令有五個生命周期（也叫鉤子函數(shù)），分別是 bind,inserted,update,componentUpdated,unbind
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | bind:function(){//被綁定 ???? console.log('1 - bind'); }, inserted:function(){//綁定到節(jié)點 ??????console.log('2 - inserted'); }, update:function(){//組件更新 ??????console.log('3 - update'); }, componentUpdated:function(){//組件更新完成 ??????console.log('4 - componentUpdated'); }, unbind:function(){//解綁 ??????console.log('1 - bind'); } |
?
?
第2節(jié)：Vue.extend構(gòu)造器的延伸
一、什么是Vue.extend？Vue.extend 返回的是一個“擴展實例構(gòu)造器”,也就是預(yù)設(shè)了部分選項的Vue實例構(gòu)造器。經(jīng)常服務(wù)于Vue.component用來生成組件，可以簡單理解為當(dāng)在模板中遇到該組件名稱作為標(biāo)簽的自定義元素時，會自動調(diào)用“擴展實例構(gòu)造器”來生產(chǎn)組件實例，并掛載到自定義元素上。
由于我們還沒有學(xué)習(xí)Vue的自定義組件，所以我們先看跟組件無關(guān)的用途。
?
二、自定義無參數(shù)標(biāo)簽
我們想象一個需求，需求是這樣的，要在博客頁面多處顯示作者的網(wǎng)名，并在網(wǎng)名上直接有鏈接地址。我們希望在html中只需要寫<author></author> ，這和自定義組件很像，但是他沒有傳遞任何參數(shù)，只是個靜態(tài)標(biāo)簽。
我們的Vue.extend該登場了，我們先用它來編寫一個擴展實例構(gòu)造器。代碼如下：
?
| 1 2 3 4 5 6 7 8 9 | var authorExtend = Vue.extend({ ????template:"<p><a :href='authorUrl'>{{authorName}}</a></p>", ????data:function(){ ????return{ ??????????authorName:'JSPang', ??????????authorUrl:'http://www.jspang.com' ??????????} ????} }); |
這時html中的標(biāo)簽還是不起作用的，因為擴展實例構(gòu)造器是需要掛載的，我們再進(jìn)行一次掛載。
| 1 | new authorExtend().$mount('author'); |
這時我們在html寫<author><author>就是管用的。我們來看一下全部代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html lang="en"> <head> ????<meta charset="UTF-8"> ????<script type="text/javascript" src="../assets/js/vue.js"></script> ????<title>vue.extend-擴展實例構(gòu)造器</title> </head> <body> ????<h1>vue.extend-擴展實例構(gòu)造器</h1> ????<hr> ????<author></author> ????<script type="text/javascript"> ?????? var authorExtend = Vue.extend({ ?????????? template:"<p><a :href='authorUrl'>{{authorName}}</a></p>", ?????????? data:function(){ ?????????????? return{ ?????????????????? authorName:'JSPang', ?????????????????? authorUrl:'http://www.jspang.com' ?????????????? } ?????????? } ?????? }); ?????? new authorExtend().$mount('author'); ????</script> </body> </html> |
最終實現(xiàn)結(jié)果：
三、掛載到普通標(biāo)簽上
還可以通過HTML標(biāo)簽上的id或者class來生成擴展實例構(gòu)造器，Vue.extend里的代碼是一樣的，只是在掛載的時候，我們用類似jquery的選擇器的方法，來進(jìn)行掛載就可以了。
| 1 | new authorExtend().$mount('#author'); |
?
?
?
第3節(jié)：Vue.set全局操作
Vue.set 的作用就是在構(gòu)造器外部操作構(gòu)造器內(nèi)部的數(shù)據(jù)、屬性或者方法。比如在vue構(gòu)造器內(nèi)部定義了一個count為1的數(shù)據(jù)，我們在構(gòu)造器外部定義了一個方法，要每次點擊按鈕給值加1.就需要用到Vue.set。一、引用構(gòu)造器外部數(shù)據(jù)：
什么是外部數(shù)據(jù)，就是不在Vue構(gòu)造器里里的data處聲明，而是在構(gòu)造器外部聲明，然后在data處引用就可以了。外部數(shù)據(jù)的加入讓程序更加靈活，我們可以在外部獲取任何想要的數(shù)據(jù)形式，然后讓data引用。
看一個簡單的代碼：
| 1 2 3 4 5 6 7 8 9 10 | //在構(gòu)造器外部聲明數(shù)據(jù) var outData={ ????count:1, ????goodName:'car' }; var app=new Vue({ ????el:'#app', ????//引用外部數(shù)據(jù) ????data:outData }) |
二、在外部改變數(shù)據(jù)的三種方法：
1、用Vue.set改變
| 1 2 3 | function add(){ ?????? Vue.set(outData,'count',4); } |
2、用Vue對象的方法添加
| 1 | app.count++; |
3、直接操作外部數(shù)據(jù)
| 1 | outData.count++; |
其實這三種方式都可以操作外部的數(shù)據(jù)，Vue也給我們增加了一種操作外部數(shù)據(jù)的方法。
三、為什么要有Vue.set的存在?
由于Javascript的限制，Vue不能自動檢測以下變動的數(shù)組。
*當(dāng)你利用索引直接設(shè)置一個項時，vue不會為我們自動更新。
*當(dāng)你修改數(shù)組的長度時，vue不會為我們自動更新。
看一段代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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("我已經(jīng)執(zhí)行了"); ?????????? 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> |
這時我們的界面是不會自動跟新數(shù)組的，我們需要用Vue.set(app.arr,1,’ddd’)來設(shè)置改變，vue才會給我們自動更新，這就是Vue.set存在的意義。
?
?
?
第4節(jié)：Vue的生命周期（鉤子函數(shù)）
Vue一共有10個生命周期函數(shù)，我們可以利用這些函數(shù)在vue的每個階段都進(jìn)行操作數(shù)據(jù)或者改變內(nèi)容。其實在Vue的官網(wǎng)有一張圖已經(jīng)很好的詮釋了生命周期，我在這里就不再多講了，直接貼圖，然后上程序代碼。
?
我們直接來看一段代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html lang="en"> <head> ????<meta charset="UTF-8"> ????<script type="text/javascript" src="../assets/js/vue.js"></script> ????<title>構(gòu)造器的聲明周期</title> </head> <body> ????<h1>構(gòu)造器的聲明周期</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 創(chuàng)建完成'); ????????????}, ????????????beforeMount:function(){ ????????????????console.log('3-beforeMount 掛載之前'); ????????????}, ????????????mounted:function(){ ????????????????console.log('4-mounted 被創(chuàng)建'); ????????????}, ????????????beforeUpdate:function(){ ????????????????console.log('5-beforeUpdate 數(shù)據(jù)更新前'); ????????????}, ????????????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節(jié)：Template 制作模版
一、直接寫在選項里的模板
直接在構(gòu)造器里的template選項后邊編寫。這種寫法比較直觀，但是如果模板html代碼太多，不建議這么寫。
javascript代碼：
| 1 2 3 4 5 6 7 8 9 | var app=new Vue({ ???? el:'#app', ???? data:{ ???????? message:'hello Vue!' ??????}, ???? template:` ????????<h1 style="color:red">我是選項模板</h1> ???? ` }) |
這里需要注意的是模板的標(biāo)識不是單引號和雙引號，而是，就是Tab上面的鍵。
二、寫在<template>標(biāo)簽里的模板
這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也可以制作頁面。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | ????<template id="demo2"> ???????????? <h2 style="color:red">我是template標(biāo)簽?zāi)０?span id="ozvdkddzhkzd" class="crayon-r"></h2> ????</template> ????<script type="text/javascript"> ????????var app=new Vue({ ????????????el:'#app', ????????????data:{ ????????????????message:'hello Vue!' ????????????}, ????????????template:'#demo2' ????????}) ????</script> |
?
三、寫在<script>標(biāo)簽里的模板
這種寫模板的方法，可以讓模板文件從外部引入。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | ????<script type="x-template" id="demo3"> ????????<h2 style="color:red">我是script標(biāo)簽?zāi)０?span id="ozvdkddzhkzd" class="crayon-o"></h2> ????</script> ????<script type="text/javascript"> ????????var app=new Vue({ ????????????el:'#app', ????????????data:{ ????????????????message:'hello Vue!' ????????????}, ????????????template:'#demo3' ????????}) ????</script> |
這節(jié)課我們學(xué)習(xí)了Template的三種寫法，以后學(xué)習(xí)到vue-cli的時候還會學(xué)到一種xxx.vue的寫法。
?
第6節(jié)：Component 初識組件
前言（廢話）：component組件是Vue學(xué)習(xí)的重點、重點、重點，重要的事情說三遍。所以你必須學(xué)好Vue component。其實組件就是制作自定義的標(biāo)簽，這些標(biāo)簽在HTML中是沒有的。比如：<jspang></jspang>，那我們就開始學(xué)習(xí)這種技巧吧。一、全局化注冊組件
全局化就是在構(gòu)造器的外部用Vue.component來注冊，我們注冊現(xiàn)在就注冊一個<jspang></jspang>的組件來體驗一下。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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"> ????????<jspang></jspang> ????</div> ????<script type="text/javascript"> ????????//注冊全局組件 ????????Vue.component('jspang',{ ????????????template:`<div style="color:red;">全局化注冊的jspang標(biāo)簽</div>` ????????}) ????????var app=new Vue({ ????????????el:'#app', ????????????data:{ ????????????} ????????}) ????</script> </body> </html> |
我們在javascript里注冊了一個組件，在HTML中調(diào)用了他。這就是最簡單的一個組件的編寫方法，并且它可以放到多個構(gòu)造器的作用域里。
二、局部注冊組件局部注冊組件和全局注冊組件是向?qū)?yīng)的，局部注冊的組件只能在組件注冊的作用域里進(jìn)行使用，其他作用域使用無效。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!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標(biāo)簽</div>` ????????????????} ????????????} ????????}) ????</script> </body> </html> |
從代碼中你可以看出局部注冊其實就是寫在構(gòu)造器里，但是你需要注意的是，構(gòu)造器里的components 是加s的，而全局注冊是不加s的。
三、組件和指令的區(qū)別
組件注冊的是一個標(biāo)簽，而指令注冊的是已有標(biāo)簽里的一個屬性。在實際開發(fā)中我們還是用組件比較多，指令用的比較少。因為指令看起來封裝的沒那么好，這只是個人觀點。
?
?
第7節(jié)：Component 組件props 屬性設(shè)置
props選項就是設(shè)置和獲取標(biāo)簽上的屬性值的，例如我們有一個自定義的組件<panda></panda>,這時我們想給他加個標(biāo)簽屬性寫成<panda here=’China’></panda> 意思就是熊貓來自中國，當(dāng)然這里的China可以換成任何值。定義屬性的選項是props。一、定義屬性并獲取屬性值
定義屬性我們需要用props選項，加上數(shù)組形式的屬性名稱，例如：props:[‘here’]。在組件的模板里讀出屬性值只需要用插值的形式，例如{{ here }}.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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設(shè)置了here的屬性值，在here屬性值里傳遞了China給組件。
最后輸出的結(jié)果是紅色字體的Panda from China.
二、屬性中帶’-‘的處理方式
我們在寫屬性時經(jīng)常會加入’-‘來進(jìn)行分詞，比如：<panda???from-here=”China”></panda>，那這時我們在props里如果寫成props:[‘form-here’]是錯誤的，我們必須用小駝峰式寫法props:[‘formHere’]。
html文件：
| 1 | <panda from-here="China"></panda> |
javascript文件：
| 1 2 3 4 5 6 7 8 9 | ????????var app=new Vue({ ????????????el:'#app', ????????????components:{ ????????????????"panda":{ ????????????????????template:`<div style="color:red;">Panda from {{ here }}.</div>`, ????????????????????props:['fromHere'] ????????????????} ????????????} ????????}) |
PS：因為這里有坑，所以還是少用-為好。
三、在構(gòu)造器里向組件中傳值
把構(gòu)造器中data的值傳遞給組件，我們只要進(jìn)行綁定就可以了。就是我們第一季學(xué)的v-bind:xxx.
我們直接看代碼:
Html文件：
| 1 | <panda v-bind:here="message"></panda> |
javascript文件：
| 1 2 3 4 5 6 7 8 9 10 11 12 | ????????var app=new Vue({ ????????????el:'#app', ????????????data:{ ?????????????? message:'SiChuan' ????????????}, ????????????components:{ ????????????????"panda":{ ????????????????????template:`<div style="color:red;">Panda from {{ here }}.</div>`, ????????????????????props:['here'] ????????????????} ????????????} ????????}) |
?
?
?
?
第8節(jié)：Component 父子組件關(guān)系
在實際開發(fā)中我們經(jīng)常會遇到在一個自定義組件中要使用其他自定義組件，這就需要一個父子組件關(guān)系。一、構(gòu)造器外部寫局部注冊組件
上面上課我們都把局部組件的編寫放到了構(gòu)造器內(nèi)部，如果組件代碼量很大，會影響構(gòu)造器的可讀性，造成拖拉和錯誤。
我們把組件編寫的代碼放到構(gòu)造器外部或者說單獨文件。
我們需要先聲明一個對象,對象里就是組件的內(nèi)容。
| 1 2 3 | var jspang = { ?? template:`<div>Panda from China!</div>` } |
聲明好對象后在構(gòu)造器里引用就可以了。
| 1 2 3 | components:{ ????"jspang":jspang } |
html中引用
| 1 | <jspang></jspang> |
?
二、父子組件的嵌套
我們先聲明一個父組件，比如叫jspang，然后里邊我們加入一個city組件，我們來看這樣的代碼如何寫。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!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>component-3</h1> ????<hr> ????<div id="app"> ??????<jspang></jspang>?? ????</div> ????<script type="text/javascript"> ?????? var city={ ?????????? template:`<div>Sichuan of China</div>` ?????? } ????????var jspang = { ????????????template:`<div> ????????????????????<p> Panda from China!</p> ????????????????????<city></city> ????????????</div>`, ????????????components:{ ????????????????"city":city ????????????} ????????} ????????var app=new Vue({ ????????????el:'#app', ????????????components:{ ????????????????"jspang":jspang ????????????} ?????????? ????????}) ????</script> </body> </html> |
?
?
?
第9節(jié)：Component 標(biāo)簽
<component></component>標(biāo)簽是Vue框架自定義的標(biāo)簽，它的用途就是可以動態(tài)綁定我們的組件，根據(jù)數(shù)據(jù)的不同更換不同的組件。1.我們先在構(gòu)造器外部定義三個不同的組件，分別是componentA,componentB和componentC.
| 1 2 3 4 5 6 7 8 9 | var componentA={ ???? template:`<div>I'm componentA</div>` } var componentB={ ??????template:`<div>I'm componentB</div>` } var componentC={ ????template:`<div>I'm componentC</div>` } |
2.我們在構(gòu)造器的components選項里加入這三個組件。
| 1 2 3 4 5 | components:{ ????"componentA":componentA, ????"componentB":componentB, ????"componentC":componentC, } |
3.我們在html里插入component標(biāo)簽，并綁定who數(shù)據(jù)，根據(jù)who的值不同，調(diào)用不同的組件。
| 1 | <component v-bind:is="who"></component> |
這就是我們的組件標(biāo)簽的基本用法。我們提高以下，給頁面加個按鈕，每點以下更換一個組件。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!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> |
轉(zhuǎn)載于:https://www.cnblogs.com/vervin/p/8290574.html
總結(jié)
- 上一篇： A1051. DNA序列
- 下一篇： ABAP术语-World Wide We