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