• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >Vue.js

    「Vue.js開發連載八」vue.js指令v-on
    時間: 2018-11-09 10:31:42     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“vue.js指令v-for”,本篇文章講解“vue.js指令v-on”。


    綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句,如果沒有修飾符也可以省略。

    「Vue.js開發連載八」vue.js指令v-on


    1. v-on指令

    「Vue.js開發連載八」vue.js指令v-on


    瀏覽器訪問:

    「Vue.js開發連載八」vue.js指令v-on


    v-on后加“:”加事件名來給元素綁定事件,這里的“click”可以是任何js原生支持的事件,“=”后面跟著對應的方法名。


    2. v-on簡寫

    v-on可以簡寫為@。

    「Vue.js開發連載八」vue.js指令v-on



    3. 內聯js語句

    當一些邏輯比較簡單的時候,可以不在methods中定義方法,而是在模板的事件綁定中直接在“=”后寫上邏輯。

    將加1的操作改為內聯js語句。

    「Vue.js開發連載八」vue.js指令v-on


    瀏覽器訪問:

    「Vue.js開發連載八」vue.js指令v-on



    4. $event

    代表綁定事件元素的event對象。

    注意:這只是原生html標簽是上$event才表示event,如果是自定義組件是不同的。

    「Vue.js開發連載八」vue.js指令v-on


    瀏覽器訪問:

    「Vue.js開發連載八」vue.js指令v-on



    5. 事件修飾符

    簡單的說就是可以在模板中是用v-on的時候,通過在"v-on"后加".xxx",實現event.preventDefault()或event.stopPropagation()等常見操作。

    事件修飾符有5個:

    .stop:阻止事件冒泡。

    .prevent:阻止瀏覽器默認行為,比如頁面滾動等。

    .capture:翻轉事件傳播方向,本來事件是按照最內元素到外元素執行的,叫事件冒泡,capture正好相反,讓元素從外到內傳播事件。

    .self:元素只在綁定的元素上執行。

    .once:綁定的事件只執行一次,之后失效。

    「Vue.js開發連載八」vue.js指令v-on



    6. 鍵盤修飾符

    在監聽鍵盤事件時,我們經常需要監測常見的鍵值。Vue允許為v-on在監聽鍵盤事件時添加關鍵修飾符:

    「Vue.js開發連載八」vue.js指令v-on


    記住所有的keyCode比較困難,所以Vue為最常用的按鍵提供了別名:

    「Vue.js開發連載八」vue.js指令v-on


    全部的按鍵別名:

    「Vue.js開發連載八」vue.js指令v-on



    7. 按鈕修飾符(鼠標)

    用來響應每一個鼠標按鍵。全部的修飾符:.left/.right/.middle。

    「Vue.js開發連載八」vue.js指令v-on



    8. 修飾鍵(鼠標+鍵盤)

    組合鍵的用法:

    「Vue.js開發連載八」vue.js指令v-on


    注意

    1. 從事件修飾符開始,了解即可,用的時候現找。

    Vue.js連載為卓象程序員原創,轉載請聯系卓象程序員

    「Vue.js開發連載八」vue.js指令v-on


    關注卓象程序員,定期發布技術文章

    下一篇講解“vue.js指令v-model”

    「Vue.js開發連載八」vue.js指令v-on
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>