vue3学习DAY2️⃣

写在前面：温故而知新，昨日我们学习了vue框架中的模版语法、属性绑定、条件渲染、列表渲染，今天我们将继续学习vue的相关知识🎒✨

•  内联事件处理器（用于简单场景）

 过程中，可能会遇到代码报错，原因是The template root requires exactly one element

如下：

<template>
    <button v-on:click="count++">Click me</button>
    <p>{
  { count }}</p>
</template>

修改之后代码如下：

<template>
  <div>
    <button v-on:click="count++">Click me</button>
    <p>{
  { count }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

• 方法事件处理器（重要）

<template>
  <div>
//@click是添加事件的标志
    <button @click="addCount">Click me</button>
    <p>{
  { count }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
  addCount() {
    this.count++
  }
}
};
</script>

• 事件传参

获取event对象

<template>
  <div>
    <button @click="addCount">Click me</button>
    <p>{
  { count }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
  addCount(e) {
    this.count++
    e.target.innerHTML = 'ADD'+this.count
  }
}
};
</script>

传递参数

<template>
  <div>
   <p @click="getNAme(item,$event)" v-for="(item,index) in names" :key="index">{
  {item}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
         names: ["John", 'Doe', 'Jane'],
    }
  },
  methods: {
  getNAme(name,event) {
    console.log(name)
    console.log(event)
}
}
}
</script>

今日学习资料如下：

黑马程序员SpringBoot3+Vue3全套视频教程，springboot+vue企业级全栈开发从基础、实战到面试一套通关

【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程