距离上次学习vue 已经很长时间了 最近手头上一直有点别的事
还有一个原因是最近有点懒惰 所以没有学习 自我批评一下 今天抽空 学习了一下Vue 主要是事件处理 学的也不怎么样 主要是为了自己记录一下
下面是我今天学习的代码 嘿嘿
<!DOCTYPE> <html> <head> <meta charset = "utf-8"> <title>vue</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <!-- 利用了Vue的双向数据绑定 v-on 是vue的指令 “：”后面的click 是指令的参数 v-on：click 是监听click事件 v-on:click 还可以缩写 @click --> <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了{{counter}}次</p> </div> <script type="text/javascript"> var example1 = new Vue({ el:"#example-1", data:{ counter:0 } }) </script> <!-- 很多事件逻辑比较复杂 不能在像counter += 1 一样写在指令内 所以可以定一个方法名 像下面的greet --> <div id="example-2"> <!--greet 是下面方法定义的方法名--> <button v-on:click="greet">Greet</button> </div> <script type="text/javascript"> var example2 = new Vue({ el:"#example-2", data:{ name:"Vue.js" }, methods:{ greet:function(event){ alert('hello'+this.name+'!') alert(event.target.tagName) } } }) //也可用这种方式调用greet方法 //example2.greet(); </script> <!--内联绑定方法--> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('hello')">Say Hello</button> </div> <script type="text/javascript"> var example3 = new Vue({ el:"#example-3", methods:{ say:function(message){ alert(message); } } }) </script> <!-- 按键修饰符 监听键盘事件 这个很方便 可以做一些回车提交什么的 按键别名有：.enter .tab .delete .esc .space .up .down .left .right 可以通过全局 config.keyCodes 对象自定义按键修饰符别名： Vue.config.keyCodes.f1 = 112 --> <div id = "example-4"> <input v-on:keyup.enter = "copy" placeholder="请输入" v-model="value" > <p style="color:red">{{value}}</p> </div> <!-- 通过键盘修饰符 响应方法copy 弹出 输入框输入的 值--> <script type="text/javascript"> var example4 = new Vue({ el:"#example-4", data:{ value :"hello" }, methods:{ copy:function(){ alert(this.value); } } }) </script> </body> </html>