溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
1、下載并引入jquery框架
下載可以去官網(wǎng)進(jìn)行下載，這里使用的版本是3.1.1，下載好后在需要的頁面引入就可以了。當(dāng)然還有很多其它的方法引入jquery，只要可以順利引入就可以了。
1 | <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> |
試著作一個案例，在DOM被掛載后修改里邊的內(nèi)容。
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> <title>Early Examples Demo</title> </head> <body> <h2>Early Examples Demo</h2> <hr> <div id="app"> {{message}} </div>
<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, //在Vue中使用jQuery mounted:function(){ $('#app').html('我是jQuery!'); } }) </script> </body> </html> |
現(xiàn)在頁面顯示是：我是jQuery，而不是hello Vue了。
在Vue的構(gòu)造器里我們寫一個add方法，然后用實(shí)例的方法調(diào)用它。
構(gòu)造器里的add方法：
1 2 3 4 5 | methods:{ add:function(){ console.log("調(diào)用了Add方法"); } } |
實(shí)例調(diào)用：
1 | app.add(); |
PS：有可能把a(bǔ)pp.add()的括號忘記或省略，這時候得到的就是方法的字符串，但是并沒有執(zhí)行，所以必須要加上括號。
利用console.log把a(bǔ)pp打印出來，看看里邊到底包含了哪些屬性和方法。因?yàn)槔镞叺膶傩院芏?，這里只是簡單的介紹。
$mount方法是用來掛載擴(kuò)展的，先來復(fù)習(xí)一下擴(kuò)展的寫法。
這里作了hedong的擴(kuò)展，然后用$mount的方法把hedong掛載到DOM上，生成了一個Vue的實(shí)例，直接看代碼。
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>Examples Method Demo</title> </head> <body> <h2>Examples Method Demo</h2> <hr> <div id="app"> {{message}} </div>
<script type="text/javascript"> var hedong = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:'Hello ,I am hedong' } } }) var vm = new hedong().$mount("#app") </script> </body> </html> |
用$destroy()進(jìn)行卸載。
寫了一個button按鈕，點(diǎn)擊后卸載整個掛載。
html：
1 | <p><button onclick="destroy()">卸載</button></p> |
javascript
1 2 3 | function destroy(){ vm.$destroy(); } |
PS:$destroy()后邊必須要有括號，沒有括號是無用的。
1 | vm.$forceUpdate() |
四、$nextTick() 數(shù)據(jù)修改方法
當(dāng)Vue構(gòu)造器里的data值被修改完成后會調(diào)用這個方法，也相當(dāng)于一個鉤子函數(shù)吧，和構(gòu)造器里的updated生命周期很像。
1 2 3 4 5 6 | function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log('message更新完后我被調(diào)用了'); }) } |
五、安裝Vue的控制臺調(diào)試工具。
每個人的安裝方法不同。
實(shí)例事件就是在構(gòu)造器外部寫一個調(diào)用構(gòu)造器內(nèi)部的方法。這樣寫的好處是可以通過這種寫法在構(gòu)造器外部調(diào)用構(gòu)造器內(nèi)部的數(shù)據(jù)。
還是寫一個點(diǎn)擊按鈕，持續(xù)加1的例子。
一、$on 在構(gòu)造器外部添加事件。
1 2 3 4 | app.$on('reduce',function(){ console.log('執(zhí)行了reduce()'); this.num--; }); |
$on接收兩個參數(shù)，第一個參數(shù)是調(diào)用時的事件名稱，第二個參數(shù)是一個匿名方法。
如果按鈕在作用域外部，可以利用$emit來執(zhí)行。
1 2 3 4 | //外部調(diào)用內(nèi)部事件 function reduce(){ app.$emit('reduce'); } |
二、$once執(zhí)行一次的事件
1 2 3 4 5 | app.$once('reduceOnce',function(){ console.log('只執(zhí)行一次的方法'); this.num--;
}); |
三、$off關(guān)閉事件
1 2 3 4 | //關(guān)閉事件 function off(){ app.$off('reduce'); } |
slot是標(biāo)簽的內(nèi)容擴(kuò)展，也就是說用slot就可以在自定義組件時傳遞給組件內(nèi)容，組件接收內(nèi)容并輸出。
先來定義一個<hedong></hedong>的組件，這個組件用來顯示博主的一些信息。
我們在Vue 構(gòu)造器里的data中給出了信息，信息如下：（博客地址，網(wǎng)名，使用技能）
1 2 3 4 5 6 7 | data:{ jspangData:{ bolgUrl:'http://hedong.com', netName:'技術(shù)-dong', skill:'Web前端' } }, |
我們用<template></template>標(biāo)簽的方式定義了組件：
1 2 3 4 5 6 7 8 | <template id"tmp"> <div> <p>博客地址：</p> <p>網(wǎng)名：</p> <p>技術(shù)類型：</p>
</div> </template> |
現(xiàn)在就可以用slot功能讓組件接收傳遞過來的值，并在模板中接收顯示。
1、在HTML的組件中用slot屬性傳遞值。
1 2 3 4 5 | <jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang> |
2、在組件模板中用<slot></slot>標(biāo)簽接收值。
1 2 3 4 5 6 7 8 | <template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>網(wǎng)名：<slot name="netName"></slot></p> <p>技術(shù)類型：<slot name="skill"></slot></p>
</div> </template> |
貼出這個案例的全部代碼：
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Slot content extend Demo</title> </head> <body> <h2>Slot content extend Demo</h2> <hr> <div id="app"> <hedong> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </hedong> </div>
<template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>網(wǎng)名：<slot name="netName"></slot></p> <p>技術(shù)類型：<slot name="skill"></slot></p>
</div> </template>
<script type="text/javascript"> var hedong={ template:'#tmp' }
var app=new Vue({ el:'#app', data:{ jspangData:{ bolgUrl:'http://hedong.com', netName:'技術(shù)-dong', skill:'Web前端' } }, components:{ "hedong":hedong } }) </script> </body> </html> |
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
