<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>
