《Vue3实战》 第六章 样式绑定和事件处理

《Vue3实战》篇章整体栏目
—————————————————————————————
【第一章】node.js/npm安装、配置
【第二章】创建项目和目录结构
【第三章】基础语法
【第四章】条件语句、循环语句
【第五章】计算、监听属性
【第六章】样式绑定和事件处理
【第七章】表单
【第八章】自定义指令
【第九章】路由
【第十章】Element plus指南
【第十一章】Vue3实战之打造新闻系统前端模板
—————————————————————————————

—————————————————————————————

前言

Vue3的样式绑定和事件处理

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()。

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>