欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?事件中的?.native你搞明白了嗎

 更新時間:2023年02月02日 15:35:16   作者:李云蹊  
.native主要是給自定義的組件添加原生事件,可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標(biāo)簽,并且該修飾符對普通HTML標(biāo)簽是沒有任何作用的,這篇文章主要介紹了vue?事件中的?.native你搞清楚了嗎,需要的朋友可以參考下

native是什么?

.native - 監(jiān)聽組件根元素的原生事件。
主要是給自定義的組件添加原生事件。

官網(wǎng)的解釋:

你可能想在某個組件的根元素上監(jiān)聽一個原生事件??梢允褂?v-on 的修飾符 .native 。

通俗點講:就是在父組件中給子組件綁定一個原生的事件,就將子組件變成了普通的HTML標(biāo)簽,不加'. native'事件是無法觸發(fā)的。

<!DOCTYPE html>
 <html lang="en">
 <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
      <div id="app">
          <button @click.native="clickFn">按鈕</button>
      </div>
  <script src='vue.js'></script>
  <script>
 
 
      new Vue({
          el:'#app',
          data:{
          },
          methods:{
              clickFn () {
                console.log('點擊按鈕了')
            }
          }
      })
  </script>
  </body>
  </html>

此時點擊頁面中的按鈕無任何反應(yīng)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <card @click.native="clickFn">按鈕</card>
    </div>
<script src='vue.js'></script>
<script>
 
    Vue.component('card',{
        template:'<p>這是card組件<button>按鈕</button></p>'
    })
 
    new Vue({
        el:'#app',
        data:{
            state:false
        },
        methods:{
            clickFn (e) {
              console.log(e)  //打印出MouseEvent對象
              if (e.target.nodeName === 'IMG') {  // 可以對點擊的target標(biāo)簽進(jìn)行判斷
                this.dialogImageUrl = file.target.src
                this.dialogVisible = true
              }
          }
        }
    })
 
</script>
</body>
</html>

總結(jié): .native - 主要是給自定義的組件添加原生事件,可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標(biāo)簽,并且該修飾符對普通HTML標(biāo)簽是沒有任何作用的。

補充:vue中'. native'修飾符的使用

        官網(wǎng)的解釋:

                你可能想在某個組件的根元素上監(jiān)聽一個原生事件。可以使用 v-on 的修飾符 .native 。

        通俗點講:就是在父組件中給子組件綁定一個原生的事件,就將子組件變成了普通的HTML標(biāo)簽,不加'. native'事件是無法觸  發(fā)的。               

            此時點擊頁面中的按鈕無任何反應(yīng)。               

添加修飾符:                

                此時點擊就會彈窗:                

            可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標(biāo)簽,并且該修飾符對普通HTML標(biāo)簽是沒有任何作用的。

到此這篇關(guān)于vue 事件中的 .native你搞清楚了嗎的文章就介紹到這了,更多相關(guān)vue 事件.native內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue.directive使用注意(小結(jié))

    Vue.directive使用注意(小結(jié))

    這篇文章主要介紹了Vue.directive使用注意(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • Animate.css在vue中的使用方式

    Animate.css在vue中的使用方式

    這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • 解決Vue 通過下表修改數(shù)組,頁面不渲染的問題

    解決Vue 通過下表修改數(shù)組,頁面不渲染的問題

    下面小編就為大家分享一篇解決Vue 通過下表修改數(shù)組,頁面不渲染的問題。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題

    解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題

    這篇文章主要介紹了解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue resource三種請求格式和萬能測試地址

    Vue resource三種請求格式和萬能測試地址

    這篇文章主要介紹了Vue-resource三種請求格式和萬能測試地址,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • Vue Router 中meta 對象示例詳解

    Vue Router 中meta 對象示例詳解

    本文主要介紹了在VueRouter中,meta對象的使用和配置方式,meta對象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴(kuò)展性
    2024-10-10
  • vue不通過路由直接獲取url中參數(shù)的方法示例

    vue不通過路由直接獲取url中參數(shù)的方法示例

    通過url傳遞參數(shù)是我們在開發(fā)中經(jīng)常用到的一種傳參方法,但通過url傳遞后改如果獲取呢?下面這篇文章主要給大家介紹了關(guān)于vue如何不通過路由直接獲取url中參數(shù)的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-08-08
  • vue3.0實現(xiàn)復(fù)選框組件的封裝

    vue3.0實現(xiàn)復(fù)選框組件的封裝

    這篇文章主要為大家詳細(xì)介紹了vue3.0實現(xiàn)復(fù)選框組件的封裝代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue前端如何向后端傳遞參數(shù)

    vue前端如何向后端傳遞參數(shù)

    這篇文章主要介紹了vue前端如何向后端傳遞參數(shù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue2.0 http請求以及l(fā)oading展示實例

    Vue2.0 http請求以及l(fā)oading展示實例

    下面小編就為大家分享一篇Vue2.0 http請求以及l(fā)oading展示實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03

最新評論