学学Vue(03)-事件绑定/条件渲染

FixEcho
116 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 >>

绑定事件的基本使用

如下，我们初始化一个div 为它绑定点击事件，然后在methods 对象中定义事件函数，当被触发的时候控制台打印data 中的message

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box" v-on:click="handleClick"></div>
  </div>
  <script src="../lib/vue.mini.js"></script>
  <script>
    const app =Vue.createApp({
      data(){
        return{
          message:'你好啊'
        }
      },
      methods:{
        handleClick(){
          console.log(this.message)
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

绑定事件的参数传递

如下，如果我们需要为绑定的事件传递参数的话，只需要在handleClick() 的括号中传递，当没有其他参数的时候，会默认传一个event 对象给绑定的事件，但是当有其他参数的时候，就需要在传递中标明了，如@click="handleClick('hi',$event)" 然后绑定的事件取第二个参数就是event 对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box" v-on:click="handleClick"></div>
  </div>
  <script src="../lib/vue.mini.js"></script>
  <script>
    const app =Vue.createApp({
      data(){
        return{
          message:'你好啊'
        }
      },
      methods:{
        handleClick(e){
          console.log(e)
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

绑定事件的修饰符

什么是绑定事件的修饰符呢，其实就是帮助我们快速阻止某些事件的，不再需要前往事件中专门处理，比如阻止事件冒泡，如下所示：给button 绑定事件@click.stop='handleClick' 即可阻止按钮的事件冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box" @click="handleBox">
      <button @click.stop="handleClick">按钮</button>
    </div>
  </div>

  <script src="../lib/vue.mini.js"></script>
  <script>
    const app=Vue.createApp({
      data(){
        return{

        }
      },
      methods:{
        handleClick(){
          console.log('按钮被点击')
        },
        handleBox(){
          console.log('框被点击')
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

具体的v-on 修饰符如下：

  • .stop 调用event.stopPropagation()
  • .prevent 调用event.preventDefault()
  • .capture 添加事件侦听器时使用capture模式
  • .self 只当事件是从侦听器绑定的元素本身触发时才触发回调
  • .{keyAlias} 仅当事件是特从特定键触发时才触发回调
  • .once 只触发一次回调
  • .left 只当点击鼠标左键时触发
  • .right 只当惦记鼠标右键时触发
  • .middle 只当点击鼠标中键时触发
  • .passive {passive:true} 模式添加侦听器

条件渲染

v-if的使用

如下所示，当data 中的info 对象长度大于0 的时候，才会渲染个人信息，如果长度为0 的话就会展示请输入个人信息后展示 的字样，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <template class="info" v-if="Object.keys(info).length">
      <h2>个人信息</h2>
      <ul>
        <li>姓名：{{info.name}}</li>
        <li>年龄：{{info.age}}</li>
      </ul>
    </template>
    <h2 v-else>请输入个人信息后展示</h2>
  </div>

  <script src="../lib/vue.mini.js"></script>
  <script>
    const app=Vue.createApp({
      data(){
        return{
          info:{
            
          }
        }
      },
      methods:{

      }
    })
    app.mount('#app')
  </script>
</body>
</html>

v-show的使用

如下所示，v-show和v-if用肉眼看效果是一样的，但是v-show是渲染的，只是通过样式隐藏了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">

    <div v-show="isShow">
      <img src="http://p1.music.126.net/0d36wAm9hR8P9rHF9jG6UQ==/109951167162176602.jpg?param=40y40" alt="">
    </div>
    <button @click="handleClick">显示/隐藏</button>
  </div>
  <script src="../lib/vue.mini.js"></script>
  <script>
    const app=Vue.createApp({
      data(){
        return{
          message:'hello world',
          isShow:true
        }
      },
      methods:{
        handleClick(){
          this.isShow=!this.isShow
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

v-show和v-if的区别

  • 用法上的区别

    • v-show不支持template —— 因为template严格来说不算一个元素，而v-show是对元素进行样式修改以达到隐藏效果，所以不能用非元素
    • v-show不可以和v-else一起使用

  • 本质的区别

    • v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换
    • v-if当条件为false时，其对应的原生压根不会被渲染到DOM中

  • 开发中如何进行选择

    • 如果我们的元素需要在显示与隐藏之间频繁的切换，那么使用v-show
    • 如果不会频繁的发生切换，那么使用v-if
avatar
文章
阅读
粉丝