前言
1、样式绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
1.1、v-bind:class 可以简写为 :class
1.1.1、绑定对象
<template>
<div class="static" :class="classObject"/>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
classObject:{
'active':false,
'text-danger':true
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.static {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
</style>
1.1.2、绑定一个返回对象的计算属性
<template>
<div class="static" :class="classObject"/>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
isActive: true,
error: null
}
},
computed:{
classObject(){
return {
active: this.isActive && !this.error,
'text-danger':this.error && this.error.type ==='fatal'
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.static {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
1.1.3、绑定数组
<template>
<div class="static" :class="[activeClass,errorClass]"/>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
activeClass: 'active',
errorClass: 'text-danger'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.static {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
1.2、 v-bind:style
<template>
<div :style="[baseStyles, overridingStyles]">张三</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.static {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2、事件处理
v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。
语法格式：
v-on:click=“methodName”
或
@click=“methodName”
2.1、例子1 接收定义的方法来调用
<template>
<div>
<button @click="greet">点我</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
name:'zs'
}
},
methods:{
greet(event){
alert("hello " + this.name);
if(event){
alert(event.target.tagName);
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.static {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2.2、事件处理程序中可以有多个方法，这些方法由逗号运算符分隔
<template>
<div>
<button @click="greet1(),greet2()">点我</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
name:'zs'
}
},
methods:{
greet1(){
alert("invoke1 " + this.name);
},
greet2(){
alert("invoke2" + this.name);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.static {
width: 100px;
height: 100px;
}
.active {
background: green;
}
.text-danger {
background: red;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
2.3、事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：
event.preventDefault() 或 event.stopPropagation()。
Vuejs____340">2.3.1、Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
- .stop - 阻止冒泡
- .prevent - 阻止默认事件
- .capture - 阻止捕获
- .self - 只监听触发该元素的事件
- .once - 只触发一次
- .left - 左键事件
- .right - 右键事件
- .middle - 中间滚轮事件
<!-- 阻止单击事件冒泡 -->
<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 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
2.4、按键修饰符
@keyup.enter
2.4.1、全部的按键别名
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
2.4.2、系统修饰键
- .ctrl
- .alt
- .shift
- .meta
2.4.3、鼠标按钮修饰符
- .left
- .right
- .middle
2.5、.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
