好看的小说完本推荐,完美世界txt全集下载,女人书籍排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

如何實(shí)現(xiàn)Vue自定義組件中hover事件以及v-model

在CSS中，很容易在鼠標(biāo)hover時(shí)進(jìn)行更改，只需：

成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供鹽津網(wǎng)站建設(shè)、鹽津做網(wǎng)站、鹽津網(wǎng)站設(shè)計(jì)、鹽津網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、鹽津企業(yè)網(wǎng)站模板建站服務(wù)，十載鹽津做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

 
 
 
  
  
  .item { 
  
  
    background: blue; 
  
  
  } 
  
  
   
  
  
  .item:hover { 
  
  
    background: green; 
  
  
  }

在Vue中，它會(huì)變得更復(fù)雜一些，因?yàn)槲覀儧](méi)有內(nèi)置這個(gè)功能。我們必須自己實(shí)現(xiàn)這些。不過(guò)別擔(dān)心，工作量不是很大。

監(jiān)聽(tīng)正確的事件那么，我們需要監(jiān)聽(tīng)哪些事件?

我們想知道什么時(shí)候鼠標(biāo)懸停在元素上，這可以通過(guò)跟蹤鼠標(biāo)何時(shí)進(jìn)入元素以及何時(shí)離開(kāi)元素來(lái)確定。為了跟蹤鼠標(biāo)何時(shí)離開(kāi)，可以使用mouseleave事件。

檢測(cè)鼠標(biāo)何時(shí)進(jìn)入可以通過(guò)相應(yīng)的mouseenter事件來(lái)完成，但是我們不使用這個(gè)。

原因是在深度嵌套 DOM 樹(shù)上使用mouseenter時(shí)可能會(huì)出現(xiàn)嚴(yán)重的性能問(wèn)題。這是因?yàn)閙ouseenter向輸入的元素以及每個(gè)單獨(dú)的祖先元素觸發(fā)一個(gè)唯一的事件。

那我們會(huì)用什么來(lái)代替呢?

我們使用mouseover事件。

二者的本質(zhì)區(qū)別在于,mouseenter不會(huì)冒泡,簡(jiǎn)單的說(shuō),它不會(huì)被它本身的子元素的狀態(tài)影響到.但是mouseover就會(huì)被它的子元素影響到,在觸發(fā)子元素的時(shí)候,mouseover會(huì)冒泡觸發(fā)它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

為了把知識(shí)點(diǎn)串聯(lián)起來(lái)，我們使用Vue 事件偵聽(tīng)鼠標(biāo)進(jìn)入和離開(kāi)時(shí)的狀態(tài)，并相應(yīng)地更新?tīng)顟B(tài)。

 
 
 
  
  
    
  
  
   ---------------------------------- 
  
  
    
  
  
   export default { 
  
  
    data() { 
  
  
      return { 
  
  
        hover: false, 
  
  
      }; 
  
  
    } 
  
  
  }

現(xiàn)在通過(guò)變量 hover 就可以響應(yīng)鼠標(biāo)的進(jìn)入和移出。

在鼠標(biāo)懸停時(shí)顯示一個(gè)元素

如果希望顯示基于懸停狀態(tài)的元素，可以將其與v-if指令配對(duì)

 
 
 
  
  
    
  
  
   
  
  
  ------------------------------------------------- 
  
  
   
  
  
  export default { 
  
  
    data() { 
  
  
      return { 
  
  
        hover: false, 
  
  
      }; 
  
  
    } 
  
  
  }

鼠標(biāo)懸停時(shí)切換樣式類(lèi)還可以做類(lèi)似的事情來(lái)切換類(lèi)

 
 
 
  
  
    
  
  
  ------------------------------------------- 
  
  
   
  
  
  export default { 
  
  
    data() { 
  
  
      return { 
  
  
        hover: false, 
  
  
      }; 
  
  
    } 
  
  
  } 
  
  
  ------------------------------------------- 
  
  
   
  
  
  .active { 
  
  
    background: green; 
  
  
  }

雖然這是可行的，但不是最好的解決方案。

對(duì)于這種情況，最好使用CSS

 
 
 
  
  
   
  
  
    
  
  
   ---------------------------------------- 
  
  
    
  
  
   span:hover { 
  
  
    background: green; 
  
  
  }

將鼠標(biāo)懸停在一個(gè)Vue組件上

如果你想要使用一個(gè)Vue組件來(lái)實(shí)現(xiàn)這種行為，那么我們需要做一些輕微的修改。我們不能像以前那樣聽(tīng)mouseover和mouseleave事件。

如果Vue組件不發(fā)出那些事件，那么我們就不能監(jiān)聽(tīng)它們。

相反，我們可以添加.native事件修飾符來(lái)直接監(jiān)聽(tīng)定制Vue組件上的DOM事件。

 
 
 
  
  
    
  
  
   -------------------------------------- 
  
  
   export default { 
  
  
     data() { 
  
  
      return { 
  
  
        hover: false, 
  
  
      }; 
  
  
    } 
  
  
  }

使用.native，我們偵聽(tīng)本地DOM事件，而不是從Vue組件發(fā)出的事件。

接著我們來(lái)看看如何在自定義組件中實(shí)現(xiàn) v-model。

雖然v-model是向普通組件添加雙向數(shù)據(jù)綁定的強(qiáng)大功能，但是如何向自己的自定義組件添加對(duì)v-model的支持并不總是那么容易，但其實(shí)很簡(jiǎn)單。

v-model 介紹

要了解如何在組件中實(shí)現(xiàn)v-model支持，需要了解它是如何工作的。雖然看起來(lái)很神奇，但v-model= syncedProp實(shí)際上是一個(gè)非常簡(jiǎn)單的簡(jiǎn)寫(xiě):value= syncedProp @input= syncedProp = arguments[0] (或者 value= syncedProp @input= syncedProp = $event.target)。

因此，要與v-model兼容，你的組件需要做的就是接受:value屬性，并在用戶更改值時(shí)發(fā)出@input事件。

基礎(chǔ)事例

假設(shè)有一個(gè)日期選擇器組件，該組件在一個(gè)對(duì)象中接受month和year的值，格式為：{month：1，year：2017}。該組件需要傳入兩個(gè)屬性值 month 和 year，，并通過(guò)v-model更新綁定對(duì)象。

 
 
 
  
  
   // DatePicker.vue

使用方式：

 
 
 
  
  
   // WrapperComponent.vue

如上所看到的，它只是接受一個(gè):value屬性并發(fā)出一個(gè)帶有更新日期的@input事件，一點(diǎn)也不復(fù)雜

高級(jí)用法

通過(guò)使用一個(gè)或多個(gè)計(jì)算屬性，我們可以將輸入數(shù)據(jù)(如字符串)反規(guī)范化為輸入元素更容易處理的格式。這通常與更高級(jí)的定制組件一起使用，這些組件必須處理各種可能的輸入格式，比如顏色選擇器。

對(duì)于日期選擇器示例，假設(shè)日期傳遞的格式是m/yyyy結(jié)構(gòu)的字符串。通過(guò)使用計(jì)算屬性(在本例中為splitDate)，我們可以將輸入字符串拆分為具有month和year屬性的對(duì)象，同時(shí)僅對(duì)日期選擇器組件進(jìn)行最少的修改。

 
 
 
  
  
   // StringyDatePicker.vue

一旦熟悉了這里介紹的概念，可能會(huì)發(fā)現(xiàn)自己對(duì)任何和每個(gè)我們創(chuàng)建的接受用戶輸入的組件都使用了v-model。這是在自己的自定義組件中添加雙向數(shù)據(jù)綁定支持的一種非常簡(jiǎn)單但功能強(qiáng)大的方法。

網(wǎng)頁(yè)標(biāo)題：如何實(shí)現(xiàn)Vue自定義組件中hover事件以及v-model
文章地址：http://fisionsoft.com.cn/article/dpsjdhs.html

新聞中心

其他資訊