目录
1. 样式绑定 (类型：字符串、数组、对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式绑定</title>
<!-- 引入vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 设置样式 -->
<style>
.c1{
font-family: 华文行楷;
}
.c2{
color: red;
}
</style>
</head>
<body>
<div id="vue">
<!-- 样式绑定 -->
<!-- 样式绑定-字符串 -->
<h3 v-bind:class="c1">绑定样式-字符串</h3>
<!-- 绑定样式-数组 -->
<h3 v-bind:class="c1s">绑定样式-数组</h3>
<!-- 绑定样式-对象 -->
<h3 :style="dx">绑定样式-对象</h3>
</div>
</body>
<script type="text/javascript">
//实例一个vue
new Vue({
el:"#vue",//挂载区域
data:function(){//定义属性
return {
c1:'c1',
c1s:['c1','c2'],
dx:{
fontSize:"20px",
color:"green"
}
}
}
})
</script>
</html>
2. 事件处理器
2.1 事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件修饰符</title>
<!-- 引入vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<!-- 事件修饰符 -->
<!-- 提交事件不再重载页面 -->
<form action="userAction.action" v-on:submit.prevent="onSubmit" method="post">
<input type="text" /> <input type="submit" value="提交事件不再重载页面" />
</form>
<!-- 阻止单击事件冒泡 -->
<a href="#" v-on:click.once ="doThis">阻止单击事件冒泡</a>
</div>
</body>
<script type="text/javascript">
//实例一个vue
new Vue({
el:"#vue",//挂载区域
methods:{//定义方法
onSubmit:function(){
console.info("onSubmit...")
},
doThis:function(){
console.info("doThis...")
}
}
})
</script>
</html>
Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
2.2 按键修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>按键修饰符</title>
<!-- 引入vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<!-- 按键修饰符 -->
<form action="userAction.action" method="post">
<input v-on:keyup.enter="submit">
</form>
</div>
</body>
<script type="text/javascript">
//实例一个vue
new Vue({
el:"#vue"//挂载区域
})
</script>
</html>
Vue允许为v-on在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">Vue为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta