学习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="/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="/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: '/qq_42259469',Record: '<b>记录于</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>
