<style>
#box1{
width:100px;
height: 100px;
background-color: blue;
}
#box2{
width:50px;
height:50px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
- 语法
<!-- vue的某些指令 可以使用指令修饰符，从而实现不同的指令效果 -->
<!-- 格式：指令.修饰符1.修饰符2 -->
- number类型
<!--v-model指令的 .number修饰符用于设置绑定的数据为number类型 -->
<input type="text" v-model.number="num">
<p>{{num+1}}</p>
<br>
- 失去焦点时才同步
<!--v-model指令的 .lazy修饰符，用于设置绑定在blur事件中而不是默认的input事件。 -->
<input type="text" v-model.lazy="d1">
<p>{{d1}}</p>
<hr>
<br>
<br>
- 去除空格
<!--v-model指令的 .trim修饰符,用于将输入框中的内容trim（去除两端空格）之后再绑定-->
<input type="text" v-model.trim="d2">
<pre>
<span style="background-color:rgb(173, 119, 119)">{{d2}}</span>
</pre>
<p style="background-color:rgb(173, 119, 119)">{{d2}}</p>
- 键盘事件
<!-- v-on指令监听的键盘事件，可以使用键名或者keycode作为修饰符，那么仅当这个键被按下才会触发事件 -->
<!-- <input type="text" v-model="d3" @keypress.13="keypress"> -->
<input type="text" v-model="d3" @keypress.enter="keypress">
<hr>
- 阻止默认行为
<!-- v-on 指令的.prevent 修饰符，用于阻止事件的默认行为-->
- 阻止事件传播
<!-- .stop修饰符，阻止事件的迹象传播。 -->
<a href="" @click.prevent="">这是一个按钮</a>
<hr>
<div id="box1" @click.self="blueClick">
<div id="box2" @click.stop="redClick">
<!-- <div id="box2" @click.stop="redClick"> -->
不会向下传播
</div>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
num:0,
d1:100,
d2:"",
d3:"",
},
methods:{
keypress(e){
console.log(e.keyCode)
alert(this.d3)
},
blueClick(e){
console.log("蓝色点击了")
},
redClick(e){
console.log("红色点击了")
}
}
})
</script>
</body>