當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue事件处理器

發布時間：2024/1/23 vue 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue事件处理器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

vue事件處理器

事件處理的時候，v-on,監聽DOM事件，在運行的時候運行js的代碼。

事件監聽：v-on

<body><div id="app"><button v-on:click="counter+=1">點我</button><p>這個按鈕被點擊了{{counter}}次</p></div><script>var vm = new Vue({el:'#app',data:{counter:0}})</script></body>

通常，我們使用一個方法，調用js的方法，我們還可以使用v-on接受一個定義的方法：

<body><div id="app"><button v-on:click="greet">點我</button></div><script>var vm = new Vue({el:'#app',data:{name:'vue.js'},//method對象中定義方法methods:{greet:function(){alert('hello'+this.name)}}})</script></body>

事件的修飾符：

v-on指令縮寫@ （v-on:click == @click）

處理DOM事件細節，vue通過（.）表示的指令后綴來調用修飾符

.stop <a @click.stop=“doThis”> 阻止單擊事件冒泡

.prevent <a @submit.prevent=“onsubmit”> 提交事件不再重載頁面

.capture 添加事件偵聽器的時候使用事件捕獲模式

.self 在該元素本身觸發時（不是子元素）觸發回調

.once click事件只能點擊一次（2.14版本新增）

按鍵修飾符

vue允許v-on在監聽鍵盤事件的時候，添加按鍵修飾符

v-on:keyCode @keyUP

.enter

.tab

.up

.left

.alt

.mate

vue.js表單

我們早介紹表單的時候，首先回顧一下雙向綁定

v-model指令在表單元素上創建雙向數據綁定

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-PgBMtgXf-1604129049371)(C:\Users\DELL\AppData\Local\Temp\1564625799276.png)]

v-model會根據控件類型自動的選取正確的方法更新元素

輸入框

<body><div id="app"><p>input元素</p><input v-model="message"><p>消息{{message}}</p><p>textarea 元素</p><textarea v-model="message2"></textarea><p style="white-space: pre">{{message2}}</p></div><script>var vm = new Vue({el:'#app',data:{message:'親愛的，熱愛的',message2:'古詩詞'}})</script></body>

單選按鈕

<body><div id="app"><input type="radio" id="runoob" value="林志玲" v-model="picked"><label for="runoob">林志玲</label><br><input type="radio" id="google" value="迪麗熱巴" v-model="picked"><label for="google">迪麗熱巴</label><br><span>選中值為: {{ picked }}</span></div><script>new Vue({el: '#app',data: {picked : '空'}})</script></body>

復選框

<body><div id="app"><p>單個復選框</p><input type="checkbox" id="checkbox" v-model="checked" /><label for="checkbox">{{checked}}</label><p>多個復選框</p><input type="checkbox" id="a" v-model="checkedName" value="方天畫戟"/><label for="a">方天畫戟</label><input type="checkbox" id="b" v-model="checkedName" value="青龍偃月"/><label for="b">青龍偃月</label><input type="checkbox" id="c" v-model="checkedName" value="丈八蛇矛"/><label for="c">丈八蛇矛</label><span>最終選定的而武器：{{checkedName}}</span></div><script>new Vue({el:'#app',data:{checked:true,checkedName:[]}})</script></body>

select列表

<body><div id="app"><select v-model="selected" name="fruit"><option value="">選擇人物</option><option value="亞瑟">戰士</option><option value="靳柯">刺客</option></select><div id="output">選擇的人物是: {{selected}}</div></div><script>new Vue({el: '#app',data: {selected: '' }})</script></body>

修飾符：

.lazy

在默認的情況下，v-model在input事件中同步輸入框的值與數據，如果輸入.lazy，轉變在change事件中同步

.number

將用戶輸入的值，自動轉換為number類型

.trim

自動過濾輸入兩端的空格

回顧：

監聽事件：v-on （兩種方法）

表單的使用 v-model

修飾符

作業：

1、事件監聽兩種方法熟練掌握

## 修飾符：.lazy在默認的情況下，v-model在input事件中同步輸入框的值與數據，如果輸入.lazy，轉變在change事件中同步.number將用戶輸入的值，自動轉換為number類型.trim自動過濾輸入兩端的空格## 回顧：監聽事件：v-on （兩種方法）表單的使用 v-model修飾符## 作業：1、事件監聽兩種方法熟練掌握2、輸入框的使用

總結

以上是生活随笔為你收集整理的vue事件处理器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。