【Vue3】2-5 : 指令系统与事件方法及传参处理

2024-01-08 20:31:16

本书目录：点击进入

一、标签属性中的使用 - 指令系统

?1.1 那么模板语法是否可以在标签属性中进行使用呢?

???当然可以：使用?指令系统

二、指令系统?

2.1 v-bind

2.2 v-on

三、实战

3.1 methods 选项

3.2 $event语法

一、标签属性中的使用 - 指令系统

?

?1.1 那么模板语法是否可以在标签属性中进行使用呢?

???当然可以：使用?指令系统

?

二、指令系统?

2.1 v-bind

  • 作用：属性绑定，如?v-bind:id="dynamicId"，表示将元素的id attribute 绑定组件的 dynamicId?

  • 简写：:id="dynamicId"

2.2 v-on

  • 作用：事件绑定，如?点击事件，v-on:click="message='hi vue3'"，表示将元素的id attribute 绑定组件的 dynamicId?

  • 简写@ @click="message='hi vue3'"

?

三、实战

3.1 methods 选项

  • 简化view中的代码，（将view复杂的逻辑抽离）

????????我们用methods选项向组件实例添加方法，Vue自动为methods 绑定 this，以便于它始终指向组件实例

3.2 $event语法

Vue帮我们处理好了如何进行事件传参处理，提供了内部的$event语法来获取event对象

<body>
  <div id="app">
    
    <div :title="message" v-bind:class="myClass" @click="handleClick($event, 123)">aaaaa</div>
    {{ message }}, {{ handleClick() }}
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          message: 'hello world',
          myClass: 'box'
        }
      },
      methods: {
        handleClick(event, num){
          this.message = 'hi vue';
          console.log(event);
          console.log(num);
        }
      }
    }).mount('#app');


  </script>
</body>

文章来源:https://blog.csdn.net/ladymorgana/article/details/135462934
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。