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

2023-06-19 103

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 《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>

《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 修饰符

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

《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实战》第六章样式绑定和事件处理