學習Vue.js第三天
鍵盤事件keyup
<label>你所在城市：</label><input type="text" v-on:keyup="City"/>
<label>你所在公司：</label><input type="text" v-on:keyup="Company"/>
<!--City,Company方法提示-->
City: function(){
alert("你正在輸入你所在的城市！");
},
Company: function(){
alert("你正在輸入你所在的公司！");
}
只要你用鍵盤輸出就會觸發事件如下圖：
回車才觸發keyup.enter
<label>你所在城市：</label><input type="text" v-on:keyup.enter="City"/>
<label>你所在公司：</label><input type="text" v-on:keyup.enter="Company"/>
輸入完城市和公司需要按Enter回車才觸發事件如下圖
還有種按alt+Enter才觸發的修飾符：keyup.alt.enter
<label>你所在城市：</label><input type="text" v-on:keyup.alt.enter="City"/>
<label>你所在公司：</label><input type="text" v-on:keyup.alt.enter="Company"/>
全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#view {
width: 500px;
padding: 100px 20px;
border: solid 1px lightsalmon;
text-align: center;
}
</style>
</head>
<body>
<div id="dcf">
<!--{{}}起來的方法需要在方法後面加(),用""起來的可以不用-->
<h1>{{monster()}}</h1>
<!--直接{{}}裏面放data裏的屬性就可以顯示值了-->
<p>我叫{{name}},今年{{age}}歲。</p>
<!--單擊事件-->
<button v-on:click.once="{{age++}}">單擊大一歲</button>
<!--雙擊事件-->
<button v-on:dblclick="{{age++}}">雙擊大一歲</button></br>
</br>
<!--如果直接href="blog"是不行的,F12也看見我們的鏈接顯示的是href="blog"而不是href="https://blog.csdn.net/qq_42259469"-->
<a v-bind:href="blog" v-on:click.prevent="alert()">博客鏈接</a>
<!--鼠標事件,顯示鼠標的X,Y軸-->
<div id="view" v-on:mousemove=" updateXY ">{{x}},{{y}} -- <span v-on:mousemove.stop>停止</span></div>
<!--嵌入b標籤加粗-->
<p v-html="Record ">{{time}}</p>
<label>你所在城市：</label><input type="text" v-on:keyup.enter="City" />
<label>你所在公司：</label><input type="text" v-on:keyup.enter="Company" />
</div>
</body>
<script>
new Vue({
el: '#dcf',
data: {
name: 'Old Monster',
age: '22',
blog: 'https://blog.csdn.net/qq_42259469',
Record: '<b>記錄於2019</b>',
x: 0,
y: 0
},
methods: { //可以放多個方法
monster: function() {
return 'hello,Vue.js!!!';
},
updateXY: function(event) {
this.x = event.offsetX; //獲取鼠標X軸
this.y = event.offsetY; //獲取鼠標Y軸
},
alert: function() {
alert("即將跳轉到Old Monster的博客主頁！");
},
City: function() {
alert("你輸入完城市並回車了！");
},
Company: function() {
alert("你輸入完公司並回車了！");
}
}
});
</script>
</html>