距离上次学习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>
时间： 2024-10-13 21:15:38