2018国产视频久久,欧美久久久一二级免,色色播播五月天

image.png

差值表達(dá)式{{}} 存在一個(gè)問題，為了解決這個(gè)閃爍問題使用：v-cloak

1、提供樣式
<style type="text/css">
[v-cloak]{
  display:none;
}
</style>

2、在差值表達(dá)式所在的標(biāo)簽中添加v-cloak指令
<div v-cloak>{{msg}}</div>

背后原理： 先通過樣式隱藏內(nèi)容，然后在內(nèi)存中進(jìn)行值的替換，替換好之后再顯示最終的結(jié)果

image.png

v-once

<div v-once>{{info}}</div>
v-once的引用場(chǎng)景：如果顯示的信息后續(xù)不再修改，可以使用v-once，可以提高性能

雙向數(shù)據(jù)綁定

用戶修改頁面中表單中輸入域的內(nèi)容，會(huì)影響數(shù)據(jù)的內(nèi)容變化
數(shù)據(jù)中的內(nèi)容變化，會(huì)影響頁面中表單數(shù)據(jù)內(nèi)容

image.png

阻止冒泡、阻止默認(rèn)行為

event.stopPropagation(); // 阻止冒泡
event.preventDefault(); // 阻止默認(rèn)行為

事件修飾符形式

<a @click.stop = "handle">跳轉(zhuǎn)</a> // 阻止冒泡
<a @click.prevent= "handle">跳轉(zhuǎn)</a>  // 阻止默認(rèn)行為
<a @click.stop.prevent= "handle">跳轉(zhuǎn)</a>  // 既阻止冒泡又阻止默認(rèn)行為

按鍵修飾符：回車也能觸發(fā)表單提交

按鍵修飾符：按刪除能全刪除

image.png

表單操作

image.png

自定義指令

image.png

計(jì)算屬性

需要有返回值return
計(jì)算屬性是基于data中的數(shù)據(jù)變化，如果data變化計(jì)算屬性也會(huì)跟著變

image.png

計(jì)算屬性和方法的區(qū)別

image.png

監(jiān)聽器

image.png

會(huì)一直監(jiān)聽屬性一旦發(fā)生變化就會(huì)觸發(fā)方法，從而執(zhí)行watch業(yè)務(wù)邏輯

image.png

監(jiān)聽器處理異步，是計(jì)算屬性做不到的

image.png

過濾器

image.png

Vue生命周期

image.png

響應(yīng)式修改數(shù)組的方法
vm.$set(list, 1, 'lemon')
this.$set(list, 1, 'lemon')

image.png

監(jiān)聽器可以異步監(jiān)聽數(shù)據(jù)變化，一旦變化就會(huì)觸發(fā)綁定的函數(shù)，函數(shù)中可以進(jìn)行一些業(yè)務(wù)邏輯處理

image.png

組件化開發(fā)

image.png

組件注冊(cè)、用法

image.png

駝峰式命名方式在使用的時(shí)候要轉(zhuǎn)換小寫+短橫線<my-component></my-component>

image.png

組件間數(shù)據(jù)交互

image.png

兄弟傳值

image.png

組件插槽

image.png

具名插槽

image.png

作用域插槽

image.png

組件實(shí)例

image.png

http://m.itdecent.cn/p/3b2caf500165

1、刪除商品

子組件cart

<li @click='delEvent(item.id)'>刪除</li>

delEvent(id) {  // 事件觸發(fā)
  this.$event('del-li',id)
}

父組件監(jiān)聽事件

<cart @del-li="handleDel($event)'></cart> // $event接收傳遞的數(shù)據(jù)

handleDel(id) { // 監(jiān)聽
  // 根據(jù)id刪除list中對(duì)應(yīng)的數(shù)據(jù)
 // 找到id對(duì)應(yīng)的數(shù)據(jù)索引
// 根據(jù)索引刪除對(duì)應(yīng)數(shù)據(jù)

let index = this.list.findIndex(item=> item.id == id)
this.list.splice(index,1)
}

2、購物車數(shù)值添加和刪除

子組件cart

<a href='' @click.prevent='sub(item.id)'> -</a>
    <input type="text" class="num" :value="item.num"  @blur="changeNum(item.id, $event)"/>
<a href="" @click.prevent='add(item.id)'>+</a>

changeNum(id,event) { // $event事件input對(duì)象，可以通過$event.target.value獲取輸入的值
    this.$emit('change-num', {
        id: id,
        type: 'change',
        num: event.target.value
    })
},
sub(id) {
    this.$emit('change-num',{
        id: id,
        type: 'sub'
    })
},
add(id) {
    this.$emit('change-num',{
        id: id,
        type: 'add'
    })
}

父組件監(jiān)聽事件

**父組件監(jiān)聽事件**
<cart @del-li="handleDel($event)' @change-num='handlechangeNum($event)'></cart> // $event接收傳遞的數(shù)

handlechangeNum(val) {
    // 根據(jù)子組件傳遞過來的數(shù)據(jù)，更新list中對(duì)應(yīng)的數(shù)據(jù)
    if(val.type == 'change') {
        this.list.some(item=>{
        if (item.id == val.id) {
            item.num = val.num
            return true; // 終止遍歷
        }
    }) 
    }else if (val.type='sub') {
        this.list.some(item=>{
        if (item.id == val.id) {
            item.num -=1;
            return true; // 終止遍歷
        }
    }) 
    }else if (val.type=='add') {
        this.list.some(item=>{
        if (item.id == val.id) {
            item.num +=1;
            return true; // 終止遍歷
        }
    }) 
    }
    
}