vue3中常用的指令之v-bind和v-on

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、v-bind指令

一个vue2和vue3之间的不同之处Vue2中template模板中只能有一个根元素但是在Vue3中允许template中有多个元素。

1.v-bind的绑定基本属性

某些属性也希望是动态绑定的比如动态绑定a元素中的href属性。
v-bind可以绑定一个或者多个属性值或者向另一个组件中传递props值。

<template id='my-app'>  
  <a v-bind:href="href"></a>
<!--   对应的语法糖 -->
  <a :href="href"></a>
</template>

v-bind 有一个对应的语法糖也就是简写形式直接写使得更加简洁。

2.v-bind绑定class

1在开发过程中有时候元素class也是动态的比如
当数据为某个状态时候字体显示红色
当数据为另一个状态的时候字体显示为黑色。
2绑定class有两种方式
① 对象语法

<style>
    .active{
        color:red;
    }
</style>

<body>
    <div id="app"></div>

    <template id="my-app">
        <div :class="{'active':isActive}">哈哈哈哈</div>
        <button @click="toggle">切换</button></button>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template:'#my-app',
            data(){
                return {
                    isActive:true,
                }
            },
            methods: {
                toggle(){
                    this.isActive=!this.isActive
                }
            },
        }

        Vue.createApp(App).mount('#app');
    </script>
</body>

可以使用单个键值对这里
哈哈哈哈
其实使用的是对象形式语法为{‘active’:boolean}.
也可以使用多个键值对语法为{‘active’: isActive, ‘title’:true}
一个小细节语法中的active这个类名可以不加引号直接写{active:true}
也可以将默认的class和动态绑定的class结合。

<div class="hader" :class="{'active':isActive}">哈哈</div>

可以将对象放在一个单独的属性中

<div :class="classObj">哈哈哈哈</div>

// data中
<script>
        const App = {
            template:'#my-app',
            data(){
                return {
                    isActive:true,
                    classObj:{
                        active:true,
                    }
                }
            },
            methods: {
                toggle(){
                    this.isActive=!this.isActive
                }
            },
        }

        Vue.createApp(App).mount('#app');
    </script>

将返回的对象放在一个methods()方法中

<div :class="getClassObj()">哈哈哈哈</div>

② 数组语法

基本的写法

 <div :class="['abc']"></div>

数组语法中可以嵌套对象语法

 <!-- 数组语法中实际上是可以嵌套对象语法的 -->
  <div :class="['abc',{active:isActive}]"></div>

3.v-bind中绑定style

1可以利用v-bind:style绑定一些CSS内联样式
因为一些样式是需要根据数据动态决定的
比如某段文字的颜色字体大小等。
2可以使用驼峰式(camelCase)或者短横线分隔(kebab-case记得用引号括起来)来命名。
3绑定style的两种方式
① 对象语法

<div :style="{color:'red'}">hahhah</div>

上面的语句如果是动态绑定并且意思是颜色为red红色那么后面的red必须加上引号不然就会认为是一个变量或者可以用下面的形式写。

<div :style="{color:color}">hahhah</div>

data(){
    return {
      color:'red'
    }
}

或者也可以用拼接的形式

<div :style="{color:colorfontSize:finalFontSize+'px'}">hahhah</div>

data(){
  return {
    color:'red',
    finalFontSize:50,
  }
}

也可以直接都写成对象

<div :style="finalStyleObj">hahhah</div>

data(){
  return {
    finalStyleObj:{
      fontSize:'30px',
      fontWeight:700,
      backgroundColor:'red'
    }
  }
}

可以直接放在methods中

<div :style="getFinalStyle()">hahhah</div>

methods:{
  getFinalStyle(){
    return {
      fontSize:'30px',
      fontWeight:700,
      backgroundColor:'red'
    }
  }
}

②数组语法
和绑定class是类似的。

  <div :style="[styleObj,style2Obj]">hhhh</div>

data(){
       return {
        styleObj:{
          color:'red',
        },
         style2Obj:{
           fontSize:'20px'
         }
    }
 }

4.动态绑定属性

在某些情况下比如说自定义组件中我们的属性名可能也是不固定的。
1之前所学的src、href、class、style属性名称都是固定的。
2如果属性名称不是固定的那么就意味着这些东西也是可以自己定义的格式是 :[属性名]=‘值’。
3) 这种绑定的方式就称为动态绑定属性。

<!-- 属性的名称也不是动态的 -->
<div :[name]="value">哈哈哈哈</div>

data(){
        return {
             name:'abc',
             value:'yan'
       }
  }

5.v-bind属性直接绑定一个对象

如果想要将一个对象的所有属性绑定到元素上的所有属性可以直接使用v-bind绑定一个对象
最终想要的结果是下面这样的将一个对象中的所有属性都绑定为元素的所有属性。
在这里插入图片描述

<template id="my-app">
  <div v-bind="info"></div>
</template>

data(){
  return {
    info:{
      name:'qian',
      age:'18',
    }
  }
}

二、v-on指令

v-on在Vue中用来绑定事件监听。

1.v-on的基本使用

缩写是@
完整写法v-on监听的事件=“methods中的方法” ,例如 v-on:click=“toggle”,它的语法糖是@click
绑定其他事件

<button @mousemove="mouseMove"></button>

绑定一个对象这个其实是因为绑定多个事件将它们放在一个对象中

<button v-on="{click:btnClick, mousemove:mouseMove}"></button>

2.v-on参数传递

1当通过methods中定义方法供@click 调用的时候如果不需要额外的参数那么在方法的括号中可以不添加任何参数但是在methods中的方法其实是默认接收了一个原生事件event。

<button @click="btnClick"></button>

methods: {
  btnClick(event){
    console.log(event);
  }
},

如果需要同时传入一个参数同时需要event时候可以通过$event传入事件。

<button @click="btnClick1($event,'why')">jjj</button>

methods: {
  btnClick1(event,message){
    console.log(event,message);
  }
},

3.v-on 的修饰符

在这里插入图片描述

4.条件渲染

在某些情况下需要根据当前的条件决定某些元素或者组件是否渲染这个时候需要进行条件判断。
v-if、v-else、v-else-if用于根据条件渲染某一块内容。
1只有条件为true时才会被渲染出来
2这三个指令与JavaScript中的条件语句if、else、else if类似
3v-if的渲染原理
v-if是惰性的当条件为false时其判断的内容完全不会被渲染或者被销毁掉当条件为true时才会真正渲染条件块中的内容。

5.v-show和v-if的区别

1用法上v-show不支持在template标签上使用v-show不可以和v-else一起使用。v-show 是通过 display 来控制标签进行渲染的但是 template 标签在 vue 解析后是不会显示在页面上的是虚拟 Dom所以无法使用 v-show。反之 v-if 是可以使用在 template 标签上因为 v-if 是条件渲染只要满足 v-if 后的条件就可以完成渲染。
2本质上v-show元素无论是否需要显示到浏览器上它的DOM实际上都是有渲染的只是通过CSS的display属性来进行切换v-if当条件为false时其对应的原生压根就不会被渲染到DOM中。
3开发中如果原生需要在显示和隐藏之间频繁切换就使用v-show如果不会频繁发生切换就使用v-if。

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: vue