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

本是古典何须时尚 2023-09-26 20:48 85阅读 0赞

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

#### 目录 ####

*  前言
 *  1、样式绑定
 *   *  1.1、v-bind:class 可以简写为 :class
     *   *  1.1.1、绑定对象
         *  1.1.2、绑定一个返回对象的计算属性
         *  1.1.3、绑定数组
     *  1.2、 v-bind:style
 *  2、事件处理
 *   *  2.1、例子1 接收定义的方法来调用
     *  2.2、事件处理程序中可以有多个方法，这些方法由逗号运算符分隔
     *  2.3、事件修饰符
     *   *  2.3.1、Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
     *  2.4、按键修饰符
     *   *  2.4.1、全部的按键别名
         *  2.4.2、系统修饰键
         *  2.4.3、鼠标按钮修饰符
     *  2.5、.exact 修饰符

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

## 前言 ##

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>
    
    
    <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>
    
    
    <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>
    
    
    <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>
    
    
    <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>
    
    
    <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>
    
    
    <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>
    
    <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 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<button @click.ctrl="onClick">A</button>
    
    
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    
    <button @click.exact="onClick">A</button>

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081