vue笔记

ededabo

已于 2024-09-11 09:53:03 修改

阅读量1k

点赞数 9

文章标签： vue.js javascript 前端

于 2024-09-11 09:52:16 首次发布

本文链接：https://blog.csdn.net/ededabo/article/details/142123245

版权

1.默认事件形参

事件对象：在组件的方法中，Vue 会自动传递一个事件对象给事件处理函数。这个事件对象是标准的 JavaScript 事件对象，它包含了事件的所有信息。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.type); // "click"
      console.log(event.target); // 触发事件的元素
    }
  }
}
</script>

2.修饰符：

.stop：阻止事件冒泡。等同于在 JavaScript 中调用 event.stopPropagation()。

<template>
  <div @click.stop="handleClick">
    <button>Click me</button>
  </div>
</template>

.prevent：阻止事件的默认行为。等同于在 JavaScript 中调用 event.preventDefault()。

<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit">Submit</button>
  </form>
</template>

.self：只当事件在该元素自身触发时才触发回调，不冒泡的情况下不会触发。

<template>
  <div @click.self="handleClick">
    <button>Click me</button>
  </div>
</template>

3. 使用 `v-on` 指令

v-on 是 Vue.js 中用于绑定事件监听器的指令。你可以在模板中直接使用它来绑定 DOM 事件到组件的方法。

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button was clicked');
    }
  }
}
</script>

在 Vue.js 2.x 中，v-on 可以简写为 @ 符号，这样代码更简洁。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button was clicked');
    }
  }
}
</script>

4.双向数据绑定

Vue.js 使用 v-model 指令来实现双向数据绑定。v-model 通常用在表单输入和组件上，以便于创建双向绑定的数据。在表单元素中，v-model 可以自动处理数据的双向绑定。

<template>
  <input v-model="message" placeholder="Edit me">
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

5.绑定文本与HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p v-text = "link1"></p>
        <p v-html = "link2"></p>
    </div>
    <script>
        const {createApp} = Vue;
        createApp({
            data() {
                return {
                    link1: "<a href='https://www.baidu.com'>百度</a>",
                    link2: "<a href='https://www.baidu.com'>百度</a>"
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

6.绑定clss和style属性

在 Vue.js 中，你可以通过几种方式动态绑定元素的 class 和 style 属性。

如何在同一个组件中同时动态绑定 class 和 style

isActive: 用于控制 active 类和 activeColor 样式。

error: 用于控制 text-danger 类和 errorColor 样式。

fontSize: 用于控制字体大小的 style。

activeColor: 激活状态下的文本颜色。

errorColor: 错误状态下的文本颜色。

<template>
  <div
    :class="classObject"
    :style="styleObject"
    @click="toggleActive"
  >
    Toggle Active
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      error: false,
      fontSize: 16,
      activeColor: 'blue',
      errorColor: 'red'
    };
  },
  computed: {
    // 使用计算属性来合并类对象
    classObject() {
      return {
        active: this.isActive,
        'text-danger': this.error,
        'text-large': this.fontSize > 14
      };
    },
    // 使用计算属性来合并样式对象
    styleObject() {
      return {
        color: this.isActive ? this.activeColor : this.errorColor,
        fontSize: this.fontSize + 'px'
      };
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
      this.error = !this.error;
    }
  }
};
</script>

<style>
.active {
  background-color: yellow;
}
.text-danger {
  font-weight: bold;
}
.text-large {
  font-size: 18px;
}
</style>

7.条件渲染

在 Vue.js 中，条件渲染是一种常见的需求，它允许你根据数据的值来决定是否渲染某个元素或组件。Vue 提供了几种指令来实现条件渲染，包括 v-if、v-else、v-else-if 和 v-show

<template>
  <div>
    <!-- 使用 v-if, v-else-if, v-else 进行条件渲染 -->
    <p v-if="type === 'admin'">欢迎管理员</p>
    <p v-else-if="type === 'user'">欢迎用户</p>
    <p v-else>欢迎游客</p>

    <!-- 使用 v-show 进行条件渲染 -->
    <p v-show="isVisible">这段文本会根据 isVisible 的值显示或隐藏。</p>

    <!-- 切换 isVisible 状态的按钮 -->
    <button @click="toggleVisibility">切换可见性</button>

    <!-- 使用 v-if 与列表 -->
    <ul>
      <li v-for="item in items" v-if="item.isVisible" :key="item.id">
        {{ item.text }}
      </li>
    </ul>

    <!-- 切换列表项可见性的按钮 -->
    <button @click="toggleItemVisibility">切换列表项可见性</button>

    <!-- 使用 v-if 与组件 -->
    <child-component v-if="isComponentVisible" />
    <button @click="toggleComponentVisibility">切换组件可见性</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      type: 'user', // 可以是 'admin', 'user', 或其他值
      isVisible: true,
      items: [
        { id: 1, text: 'Item 1', isVisible: true },
        { id: 2, text: 'Item 2', isVisible: false },
        { id: 3, text: 'Item 3', isVisible: true }
      ],
      isComponentVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
    toggleItemVisibility() {
      this.items.forEach(item => {
        item.isVisible = !item.isVisible;
      });
    },
    toggleComponentVisibility() {
      this.isComponentVisible = !this.isComponentVisible;
    }
  }
};
</script>

<style>
/* 可以在这里添加一些样式 */
</style>

8.列表渲染

在 Vue.js 中，列表渲染通常是通过 v-for 指令来完成的。v-for 可以绑定到数组上，以便为数组中的每个元素渲染一个元素

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    };
  }
};
</script>

9.计算属性

在 Vue.js 中，计算属性（Computed Properties）是一种特殊的方法，它们根据组件中响应式数据的变化自动更新。计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。这使得计算属性非常适合用于当你需要根据现有数据派生出一些状态时。

基本用法

计算属性在组件的 computed 选项中定义，它们可以接收一个 getter 函数，也可以同时接收 getter 和 setter 函数。

只读计算属性

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

在这个例子中，fullName 是一个计算属性，它根据 firstName 和 lastName 的值派生出全名。

可读写计算属性

计算属性也可以定义 setter 函数，使其成为可读写的属性。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        var names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};

10.监视属性

在 Vue.js 中，监视属性（Watching Properties）是指使用 watch 选项来观察和响应 Vue 实例上的数据变动。当你需要在数据变化时执行异步操作或开销较大的操作时，watch 是非常有用的。

基本用法

在 Vue 组件中，你可以在 watch 选项中定义监视器，来观察一个或多个数据属性的变化。

export default {
  data() {
    return {
      question: ''
    };
  },
  watch: {
    // 监视 question 的变化
    question(newQuestion, oldQuestion) {
      console.log(`Question changed from ${oldQuestion} to ${newQuestion}`);
    }
  }
};