vue：元件，非同步通訊，計算屬性
阿新 • • 發佈：2020-11-21
一，元件
起到封裝的作用，是可複用的（模板實現）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--元件，傳遞給元件中的值：props,(通過v-bind繫結)--> <king v-for="item in items" v-bind:it="item"></king> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> //定義一個Vue元件component //定義元件名king Vue.component("king",{ props:["it"], <!--模板，實現複用--> template:'<li>{{it}}</li>' });//建立一個Vue物件 var vm =new Vue({ //繫結 el:"#app", //存放資料 data:{ items:["Java","Linux","c++"] } }); </script> </body> </html>
小結：1，Vue元件（component）和Vue物件屬於平行的層次，所以兩者如果想取得聯絡要通過第三方才能實現，
2，步驟：建立Vue物件，繫結事件（el：），存放資料（data：）或者（data（）），一個是屬性，一個是方法
建立Vue元件，king（元件名），props[name]來實現傳值，template:(模板)
第三方，在裡面實現傳值
二，非同步通訊
網路非同步通訊：JQuery+xml（Ajax）就能完美的實現
但，由於整體太過繁重，axios開始流行（Vue）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue"> <div>{{info.name}}</div> </div> <!--引入js檔案--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script src="https://unpkg.coln/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm=new Vue({ el:"#vue", //data:屬性：vm（Vue物件） //這個是方法 data(){ return{ //請求的返回引數格式，必須和json字串一樣 info:{ name:null, address:{ street:null, city:null, country:null } } } }, mounted(){//鉤子函式,鏈式程式設計，ES6的新特性,獲得，注入引數 axios.get('../data.json').then(response=>(this.info=response.data)); } }); </script> </body> </html>
註解：data（）中的放回引數格式可以不用全寫，但寫的必須與json格式一致
三，計算屬性、
計算屬性：計算出來的結果，儲存在屬性中。記憶體中執行：虛擬Dom，通俗的說：他就是一個將結算結果快取起來的屬性，可以想象成快取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{Time1()}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ message:"hello,king" }, //裡面寫的是方法 methods:{//呼叫時要呼叫方法 Time1:function (){ return Date.now();//返回一個時間戳 } }, computed:{//計算屬性:呼叫時使用屬性即可 Time2:function (){ return Date.now();//返回一個時間戳 } } }); </script> </body> </html>
小結：<!--計算屬性computed和methods的區別，計算屬性可以理解為快取，因為只有當裡面資料改變時它才會重新計算，否則一直存放在記憶體中，好處呼叫較快，節省資源-->