vue全局API

時間 2021-01-30

標籤 javascript html vue java node jquery 數組 app 框架 jsp 欄目 JavaScript 简体版

原文原文鏈接

1、Vue.directive 自定義指令

1、什麼是全局API？javascript

全局API並不在構造器裏，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，好比要學習的指令Vue.directive。說的簡單些就是，在構造器外部用Vue提供給API函數來定義新的功能。html

2、Vue.directive自定義指令vue

已經瞭解內部指令，也能夠定義一些屬於本身的指令，好比要定義一個v-hedong的指令，做用就是讓文字變成綠色。java

在自定義指令前寫一個小功能，在頁面上有一個數字爲10，數字的下面有一個按鈕,每點擊一次按鈕後，數字加1。node

寫好了這個功能，如今就本身定義一個全局的指令。這裏使用Vue.directive( );jquery

1數組

2app

3框架

Vue.directive('hedong',function(el,binding,vnode){jsp

el.style='color:'+binding.value;

});

3、自定義指令中傳遞的三個參數

el: 指令所綁定的元素，能夠用來直接操做DOM。

binding: 一個對象，包含指令的不少信息。

vnode: Vue編譯生成的虛擬節點。

4、自定義指令的生命週期

自定義指令有五個生命週期（也叫鉤子函數），分別是 bind,inserted,update,componentUpdated,unbind

1. bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個綁定時執行一次的初始化動做。

2. inserted:被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於document中）。

3. update:被綁定於元素所在的模板更新時調用，而不管綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新。

4. componentUpdated:被綁定元素所在模板完成一次更新週期時調用。

5. 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構造器的延伸

1、什麼是Vue.extend？

Vue.extend 返回的是一個「擴展實例構造器」,也就是預設了部分選項的Vue實例構造器。常常服務於Vue.component用來生成組件，能夠簡單理解爲當在模板中遇到該組件名稱做爲標籤的自定義元素時，會自動調用「擴展實例構造器」來生產組件實例，並掛載到自定義元素上。

3、自定義無參數標籤

4、想象一個需求，需求是這樣的，要在博客頁面多處顯示做者的網名，並在網名上直接有連接地址。但願在html中只須要寫<author></author> ，這和自定義組件很像，可是沒有傳遞任何參數，只是個靜態標籤。

Vue.extend該登場了，先用它來編寫一個擴展實例構造器。代碼以下：

var authorExtend = Vue.extend({

template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",

data:function(){

return{

authorName:'JSliu',

authorUrl:'http://www.jspang.com'

}

});

這時html中的標籤仍是不起做用的，由於擴展實例構造器是須要掛載的，再進行一次掛載。

1	new authorExtend().$mount('author');

這時在html寫<author><author>就是管用的。來看一下所有代碼：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>vue.extend-擴展實例構造器</title>

</head>

<body>

<h1>vue.extend-擴展實例構造器</h1>

<hr>

<author></author>

var authorExtend = Vue.extend({

template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",

data:function(){

return{

authorName:'JSliu',

authorUrl:'http://www.liuhedong.online'

}

});

new authorExtend().$mount('author');

</script>

</body>

</html>

3、掛載到普通標籤上

還能夠經過HTML標籤上的id或者class來生成擴展實例構造器，Vue.extend裏的代碼是同樣的，只是在掛載的時候，用相似jquery的選擇器的方法，來進行掛載就能夠了。

1	new authorExtend().$mount('#author');

3、Vue.set全局操做

Vue.set 的做用就是在構造器外部操做構造器內部的數據、屬性或者方法。好比在vue構造器內部定義了一個count爲1的數據，在構造器外部定義了一個方法，要每次點擊按鈕給值加1.就須要用到Vue.set。

1、引用構造器外部數據：

什麼是外部數據，就是不在Vue構造器裏裏的data處聲明，而是在構造器外部聲明，而後在data處引用就能夠了。外部數據的加入讓程序更加靈活，能夠在外部獲取任何想要的數據形式，而後讓data引用。

看一個簡單的代碼：

//在構造器外部聲明數據

var outData={

count:1,

goodName:'car'

};

var app=new Vue({

el:'#app',

//引用外部數據

data:outData

})

2、在外部改變數據的三種方法：

一、用Vue.set改變

function add(){

Vue.set(outData,'count',4);

}

二、用Vue對象的方法添加

1	app.count++;

三、直接操做外部數據

1	outData.count++;

其實這三種方式均可以操做外部的數據，Vue增長了一種操做外部數據的方法。

3、爲何要有Vue.set的存在?

因爲Javascript的限制，Vue不能自動檢測如下變更的數組。

*當利用索引直接設置一個項時，vue不會自動更新。

*當修改數組的長度時，vue不會自動更新。

看一段代碼：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<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>

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存在的意義。

5、Vue的生命週期（鉤子函數）

Vue一共有10個生命週期函數，能夠利用這些函數在vue的每一個階段都進行操做數據或者改變內容。

其實在Vue的官網有一張圖已經很好的詮釋了生命週期。

直接來看一段代碼：

<!DOCTYPE html>

<head>

<title>構造器的聲明週期</title>

</head>

<body>

<h1>構造器的聲明週期</h1>

<hr>

</div>

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 製做模版

1、直接寫在選項裏的模板

直接在構造器裏的template選項後邊編寫。這種寫法比較直觀，可是若是模板html代碼太多，不建議這麼寫。

javascript代碼：

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

template:`<h1 style="color:red">我是選項模板</h1>`

})

這裏須要注意的是模板的標識不是單引號和雙引號，而是，就是Tab上面的鍵。

2、寫在<template>標籤裏的模板

這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也能夠製做頁面

<template id="demo2">

<h2 style="color:red">我是template標籤模板</h2>

</template>

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

template:'#demo2'

})

</script>

3、寫在<script>標籤裏的模板

這種寫模板的方法，可讓模板文件從外部引入。

<h2 style="color:red">我是script標籤模板</h2>

</script>

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

template:'#demo3'

})

</script>

6、Component 初識組件

1、全局化註冊組件

全局化就是在構造器的外部用Vue.component來註冊，註冊如今就註冊<liu></liu>的組件來體驗一下。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>component-1</title>

</head>

<body>

<h1>component-1</h1>

<hr>

<div id="app">

<liu></liu>

</div>

//註冊全局組件

Vue.component('liu',{

template:`<div style="color:red;">全局化註冊的liu標籤</div>`

})

var app=new Vue({

el:'#app',

data:{

}

})

</script>

</body>

</html>

在javascript裏註冊了一個組件，在HTML中調用了他。這就是最簡單的一個組件的編寫方法，而且它能夠放到多個構造器的做用域裏。

2、局部註冊組件局部註冊組件和全局註冊組件是向對應的，局部註冊的組件只能在組件註冊的做用域裏進行使用，其餘做用域使用無效。

<!DOCTYPE html>

<head>

<title>component-1</title>

</head>

<body>

<h1>component-1</h1>

<hr>

</div>

var app=new Vue({

el:'#app',

components:{

"panda":{

template:`<div style="color:red;">局部註冊的panda標籤</div>`

}

})

</script>

</body>

</html>

從代碼中能夠看出局部註冊其實就是寫在構造器裏，可是須要注意的是，構造器裏的components 是加s的，而全局註冊是不加s的。

3、組件和指令的區別

組件註冊的是一個標籤，而指令註冊的是已有標籤裏的一個屬性。在實際開發中仍是用組件比較多，指令用的比較少。由於指令看起來封裝的沒那麼好，這只是我的見解

7、Component 組件props 屬性設置

props選項就是設置和獲取標籤上的屬性值的，例若有一個自定義的組件<panda></panda>,這時想給他加個標籤屬性寫成<panda here='China'></panda> 意思就是熊貓來自中國，固然這裏的China能夠換成任何值。定義屬性的選項是props。

1、定義屬性並獲取屬性值

定義屬性須要用props選項，加上數組形式的屬性名稱，例如：props:['here']。在組件的模板裏讀出屬性值只須要用插值的形式，例如{{ here }}.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>component-2</title>

</head>

<body>

<h1>component-2</h1>

<hr>

<div id="app">

<panda here="China"></panda>

</div>

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.

2、屬性中帶'-'的處理方式

咱們在寫屬性時常常會加入'-'來進行分詞，好比：<panda from-here="China"></panda>，那這時在props裏若是寫成props:['form-here']是錯誤的，咱們必須用小駝峯式寫法props:['formHere']。

html文件：

1	<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']

}

})

3、在構造器裏向組件中傳值

把構造器中data的值傳遞給組件，只要進行綁定就能夠了。就是第一季學的v-bind:xxx.直接看代碼:

Html文件：

1	<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 父子組件關係

在實際開發中常常會遇到在一個自定義組件中要使用其餘自定義組件，這就須要一個父子組件關係。

1、構造器外部寫局部註冊組件

上面上課都把局部組件的編寫放到了構造器內部，若是組件代碼量很大，會影響構造器的可讀性，形成拖拉和錯誤。

把組件編寫的代碼放到構造器外部或者說單獨文件。

須要先聲明一個對象,對象裏就是組件的內容。

var js = {

template:`<div>Panda from China!</div>`

}

聲明好對象後在構造器裏引用就能夠了。

components:{

"js":js

}

html中引用

1	<js></js>

2、父子組件的嵌套

先聲明一個父組件，好比叫js，而後裏邊加入一個city組件，來看這樣的代碼如何寫。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>component-3</title>

</head>

<body>

<h1>component-3</h1>

<hr>

<div id="app">

<js></js>

</div>

var city={

template:`<div>Sichuan of China</div>`

}

var js = {

template:`<div>

<p> Panda from China!</p>

</div>`,

components:{

"city":city

}

var app=new Vue({

el:'#app',

components:{

"js":js

}

})

</script>

</body>

</html>

9、Component 標籤

<component></component>標籤是Vue框架自定義的標籤，它的用途就是能夠動態綁定組件，根據數據的不一樣更換不一樣的組件。

1.先在構造器外部定義三個不一樣的組件，分別是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>`

}

2.在構造器的components選項里加入這三個組件。

components:{

"componentA":componentA,

"componentB":componentB,

"componentC":componentC,

}

3.在html裏插入component標籤，並綁定who數據，根據who的值不一樣，調用不一樣的組件。

1	<component v-bind:is="who"></component>

這就是咱們的組件標籤的基本用法。咱們提升如下，給頁面加個按鈕，每點如下更換一個組件。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<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>

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。