首頁 > 開發者 > 網站開發

關於vue.js中事件處理器的練習

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：事件   button   ext   單擊   down   elf   char   冒泡   app   

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件處理器</title>
</head>
<body>
<!-- 監聽事件 -->
<!-- 可以用v-on監聽DOM事件觸發js -->
<div id="app-1">
<button v-on:click="counter+=1">增加1</button>
<p>你點擊了{{counter}}次</p>
</div>

<!-- 方法事件處理器 v-on可以接受一個方法名 -->
<div id="app-2">
<button v-on:click="great">Great</button>
</div>
<!-- 內聯處理器方法 -->
<div id="app-3">
<button v-on:click="say(‘hi‘)">點擊</button>
</div>
<!-- 如果在內聯處理器中需要使用到原生的DOM -->
<!-- vue提供了$event -->
<div id="app-4">
<button v-on:click="warn(‘Form cannot be submitted yet.‘, $event)">Submit</button>
</div>
<!-- vue為了讓methods只是純粹的去處理資料邏輯 將處理DOM細節用(.)去表示 -->

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件接聽程式時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子項目）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

<!-- 按鍵修飾符 -->
<!-- 在監聽鍵盤事件時，我們經常需要監測常見的索引值。 Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符： -->
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名： -->

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫文法 -->
<input @keyup.enter="submit">
<!-- 全部的按鍵別名：
enter
tab
delete (捕獲 “刪除” 和 “退格” 鍵)
esc
space
up
down
left
right
可以通過全域 config.keyCodes 對象自訂按鍵修飾符別名：
可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112 -->

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

 

js:

var app1=new Vue({
el:‘#app-1‘,
data:{
counter:0
}
});
var app2=new Vue({
el:‘#app-2‘,
data:{
name:‘猴猴呀‘
},
methods:{
great:function () {
alert(this.name)
}
}
});
var app3=new Vue({
//記得寫#！！！！！！！！！！！！
el:‘#app-3‘,
methods:{
say:function (message) {
alert(message)
}
}
});
var app4=new Vue({
el:‘#app-4‘,
methods:{
warn: function (message, event) {
// 現在我們可以訪問原生事件對象
if (event) {
event.preventDefault()
alert(message)
}
}
}
}
});

關於vue.js中事件處理器的練習

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More