05vue課程課件01基礎(chǔ)4筆記

組件(Component)是Vue.js最強大的功能之一組件可以擴展HTML元素，封裝可重用的代ponent('組件名稱',{})第1個參數(shù)是名稱，第2個參數(shù)是一個選項對全局組件后，任何vue實例都可以<div<div<!--2、組件使用組件名稱是以 <//1 ponent就是組件中自定義 ponent', te:'<div>Acustom//newel:<div <!--8、必須使用短橫線的方式使用組件<script //7、但是在普通的模板中，必須使用短橫線的方式使用組ponent('{data:function(){return{msg:'}temte:ponent('button-counter',//1、組件參數(shù)的data{count:}//2//3、組件模板的內(nèi)容可以是模板字符串temte:`<button@click="handle">點擊了{{count}}次#6<oWorld></`,{count+=2;}}varvm=newVue({el:'#app',data:{}<div<div<//varChild= te:'<div>Acustom}new//局 組components://'ponent>將只在父模板可 ponent':}Vue<div<div<!--1 -item在APP中嵌套著- <!--給子組件傳入一個靜態(tài)的值 -itemtitle='來自父組件的值 <!--2、需要動態(tài)的數(shù)據(jù)的時候需要屬性綁定的形式設(shè)置此時ptitle來自父組件data中的數(shù)據(jù)<-item:title='ptitle'<script -item',//3、子組件用屬性propsprops:['title',datadata:function()returnmsg:'子組件本身的數(shù)據(jù)} te:'<div>{{msg+"----"+title+"-----"+varvm=newVue({el:'#app',data:{pmsg:'父組件中內(nèi)容',ptitle:'動態(tài)綁定屬性'}$emit第一個參數(shù)為自定義的名稱第二個參數(shù)為需要傳遞的數(shù)據(jù)父組件用v-on子組件的<div<div<div:style='{fontSize:fontSize+<!--2父組件用v-這里enlarge-是從$emithandle為對應(yīng) <-item:parr='parr'@enlarge-<scripttype="text/javascript"<script{props:['parr'], te:`<li:key='index'v-for='(item,index)in###1、子組件用$emit()###第一個參數(shù)為自定義 <button@click='$emit("enlarge-text",5)'>擴大父組件中字體大小<button@click='$emit("enlarge-text",10)'>擴大父組件中字體大小`varvm=newVue({'#app',data:pmsgpmsg:'父組件中內(nèi)容parr:['apple','orange','banana'],fontSize:10methods:handle:this.fontSize+=}}兄弟之間傳遞數(shù)據(jù)需要借助于中心，通過中心傳遞數(shù)據(jù)提供中心varhub=newVue()接收數(shù)據(jù)方，通過mounted(){}鉤子中觸發(fā)hub.$on()通過hub.$o?()<div<button@click='handle'>銷 <scripttype="text/javascript"<script//1、提 中varhub=new{data:function(){{:} te:<button@click='handle'>點擊`,{handle: hub.$emit('jerry-event',}mounted:function()//3、接收數(shù)據(jù)方，通過mounted(){}鉤子 hub.$on('tom-event',(val){this.num+=}{data:function(){{num:} te:<button@click='handle'>點擊`,{handle: hub.$emit('tom-event',}mounted:function()//3、接收數(shù)據(jù)方，通過mounted(){}鉤子 hub.$on('jerry-event',(val){this.num+=}varvm=newVue({'#app',data:methods:handle://4、銷 }}<div<div<!--這里的所有組 如果不傳值則使用slot中的默認 <script{ te:#當組件渲染的時候，這個<slot>元素將會被替換為“組 #插槽內(nèi)可以包含任何模板代碼，包括`varvm=newVue({el:'#app',data:{}使用中的"name"<div<div<!--2、通過slot屬性來指定,這個slot的值必須和下面slot組件得name如果沒有匹配到則放 <pslot='header'>標題信息<pslot='footer'>底部信息信息 te te <scripttype="text/javascript"<script{ te:###1、使用<slot>中的"name"<slot <slot`varvm=newVue({el:'#app',data:{}<div1、當我們希望li的樣式由外部使用組件的地方定義，因為可能有多種地方要使用該組件，但樣式希望不一樣這個時候我們需要使用作用域插槽<fruit-list<!--2、父組件中使用了<temte>元素,而且包含scope="slotProps",<temteslot-<strongv-if='slotP.id==3'<spanv-</tem<scripttype="text/javascript"<script{props:['list'],temte:`<li:key='item.id'v-for='itemin###3、在子組件模板中,<slot>元素上有一個類似props傳遞數(shù)據(jù)給組件的寫法msg="xxx", <slot`varvm=newVue({el:'#app',data:{[{name:id:name:id:id:name:}1.<div<div<div<!--2、把組件渲染到頁面上<scripttype="text/javascript"<scripttype="text/javascript">#1、把靜態(tài)頁面轉(zhuǎn)換成組件化模式#1.1標題組件varCartTitle= te:<divclass="title">我的商品`}#1.2varCartList= te:<div<img<div<div<a<inputtype="text"class="num"<a<div<div<img<div<div<a<inputtype="text"class="num"<a<div<div<img<div<div<a<inputtype="text"class="num"<a<div<div<img<div<div<a<inputtype="text"class="num"<a<div<div<img<div<div<a<inputtype="text"class="num"<a<div`}#1.3varCartTotal{ te:<div`}##1.4定義一個全局組件my-cart##1.6 te:<div components:'cart-title':CartTitle,'cart-list':CartList,'cart-total':CartTotal}varvm=newVue({el:'#app',data:{}2從父組件把商品列表list<div<div<div<scripttype="text/javascript"<script#2.2標題組 varCartTitle={props:['uname'], te:<divclass="title">{{uname}}的商品`}#2.3商品結(jié)算組 varCartTotal{props: te:``,{# total:{vart=0;this.list.forEach(item=>{t+=item.price*return}}}cart',{data:function(){return{uname: id:name'TCL彩電price:num:img:id:name機頂盒',price:1000,num:img:id:name海爾冰箱',price:1000,num:img:id:name:'小米 price:1000,num:img:id:name'PPTV電視',price:1000,num:img:}#2.1父組件向子組件以屬性傳遞的形式傳遞數(shù)據(jù) 向標題組件傳遞uname向商品結(jié)算組件傳遞 te:<div<cart-title:uname='uname'></cart-<cart-total:list='list'></cart-'cart-title':CartTitle,'cart-list':CartList,'cart-total':CartTotal}varvm=newVue({el:'#app',data:{}從父組件把商品列表list子組件中不推薦操作父組件的數(shù)據(jù)有可能多個子組件使用父組件的數(shù)據(jù)我們需要把數(shù)據(jù)傳遞給父組<div<div<div<scripttype="text/javascript"<scriptvarCartTitle{ te:`<divclass="title">{{uname}}的商品`}#3.2varCartList te:<div:key='item.id'v-for='iteminlist'<img<div<div<a<inputtype="text"class="num"<a#3.3給按鈕添加點 把需要刪除的id傳遞過<divclass="del"`,{del:#3.4 this.$emit('cart-del',}}}varCartTotal{props:['list'], te:`<div`,{total:function()//vart=0;this.list.forEach(item=>{t+=item.price*return}}}cart',{data:function(){return{uname: id:name'TCL彩電price:num:img:id:name機頂盒',price:1000,num:img:id:name海爾冰箱',price:1000,num:img:id:name:'小米 price:1000,num:img:id:name'PPTV電視',price:1000,num:img:}#3.1從父組件把商品列表list數(shù)據(jù)傳遞過來即父向子組件傳值 te:<div<cart-title:uname='uname'></cart-#3.5父組件通 綁定接收子組件傳遞過來的數(shù)<cart-list:list='list'@cart-del='delCart($event)'></cart-<cart-total:list='list'></cart-`,{'cart-title':CartTitle,'cart-list':CartList,'cart-total':CartTotalmethods:# delCart:function(id)//1、找到id所對應(yīng)數(shù)據(jù)的索引varindex=this.list.findIndex(item=>{returnitem.id==id;//2、根據(jù)索引刪除對應(yīng)數(shù)據(jù)this.list.splice(index1);}}varvm=newdata:{}<div<div<div<scripttype="text/javascript"<scriptvarCartTitle{ te:`<divclass="title">{{uname}}的商品`}varCartList{ te:`<div:key='item.id'v-for='iteminlist'<img<div<div<a#1.#2.輸入框失去焦點的時候更改商品的數(shù) 需要將當前商品的id傳遞過<inputtype="text"class="num":value='item.num'<a<divclass="del"#3子組件中不推薦操作數(shù)據(jù) #把這些數(shù)據(jù)傳遞給父組件讓父組件處理這些數(shù)據(jù)this.$emit('change-num',{id:num:del://把idthis.$emit('cart-del',}}}varCartTotal{props:['list'], te:`<div`,{total:function()//vart=0;this.list.forEach(item=>{t+=item.price*return}}}cart',{data:function(){return{uname: id:name'TCL彩電price:num:img: te:<div<cart-titleuname='uname'></cart-title>#4父組件中接收子組件傳遞過來的數(shù)據(jù)<cart-list:list='list'@change-num='changeNum($event)'@cart-<cart-total:list='list'></cart-components:components:'cart-title':CartTitle,'cart-list':CartList,'cart-total':CartTotalmethods:changeNum:function(val)//4.1根據(jù)子組件傳遞過來的數(shù)據(jù)，跟新listthis.list.some(item=>{if(item.id==val.id){item.num=return}delCart:function(id)//根據(jù)id刪除list1、找到id所對應(yīng)數(shù)據(jù)的索引varindex=this.list.findIndex(item=>{returnitem.id==id;//2、根據(jù)索引刪除對應(yīng)數(shù)據(jù)this.list.splice(index,1);}}varvm=newVue({el:'#app',data:{}11<!DOCTYPE<html<metacharset="UTF- <style.container}.container{width:300px;margin:auto;}.container.titlebackground-color:lightblue;height:40px;line-height:40px;text-align:center;/*color:}.container{background-color:#FFCE46;height:50px;line-height:50px;text-align:right;}.container.total{margin:010px;background-color:#DC4C40;height:35px;border:0;}.container.total{color:red;font-weight:bold;}.container{height:55px;line-height:55px;position:relative;border-top:1pxsolid}.container.item{width:45px;height:45px;margin:5px;}.container.item{position:absolute;width:90px;font-size:16px;}.container.item{width:100px;position:absolute;top:0;right:}.container.item.change{font-size:20px;width:30px;background-color:lightgray;vertical-align:middle;}.container.item.change{width:40px;height:25px;}.container.item{position:absolute;top:0;right:0px;width:text-align:center;font-size:40px;cursor:pointer;color:red;}.container.item{background-color:}<div<div<scripttype="text/javascript"<scriptvarCartTitle{ te:`<divclass="title">{{uname}}的商品`}varCartList{props:['list'], te:`<div:key='item.id'v-for='iteminlist'<img<div<divclass="change">#1.+-按鈕綁定<ahref=""<inputtype="text"class="num":value='item.num'

<ahref=""<divclass="del"methods:changeNum:function(id,num',{id:type:num:sub:#2數(shù)量的增加和減少通過父組件來計算 每次都是加1和減1不需要傳遞數(shù)量 判斷是加一還是減1以及是輸入框輸入的數(shù)據(jù) 我們通過type標識符來標記不同的操作this.$emit('change-{id:id,add:#2數(shù)量的增加和減少通過父組件來計算 每次都是加1和減1不需要傳遞數(shù)量 斷是加一還是減1以及是輸入框輸入的數(shù)據(jù) 我們通過type標識符來標記不同的操作this.$emit('