vue3基础

前言

Vue 3 是一个渐进式JavaScript框架，用于构建用户界面和单页应用程序。以下是一些Vue 3的基础知识：

创建Vue应用

在Vue 3中，我们通过创建一个Vue应用实例来开始：

const { createApp } = Vue

createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#app')

HTML部分：

<div id="app">{{ message }}</div>

响应式数据

Vue使用响应式系统，当数据变化时，视图会自动更新。

• data 函数返回一个对象，该对象的属性是响应式的。

模板语法

Vue使用基于HTML的模板语法，允许你声明式地将数据渲染进DOM。

• 插值：{``{ variable }}
• 指令：v-bind:href="url" 或简写为 :href="url"

属性和方法

• methods 对象包含Vue实例的方法。

  methods: {
  reverseMessage() {
  this.message = this.message.split('').reverse().join('');
  }
  }

计算属性和侦听器

• computed 属性是声明式的依赖性计算值。

  computed: {
  reversedMessage() {
  return this.message.split('').reverse().join('');
  }
  }

• watch 侦听器用于观察和响应Vue实例上的数据变动。

  watch: {
  message(newVal, oldVal) {
  // 执行操作
  }
  }

类和样式绑定

• v-bind:class 和 v-bind:style 用于动态绑定类和样式。

条件渲染

• v-if、v-else-if、v-else 用于条件性地渲染一块内容。

列表渲染

• v-for 指令基于一个数组来渲染一个列表。

• {{ item.text }}

事件处理

• v-on 或简写 @ 用于监听DOM事件。

  <button @click="reverseMessage">Reverse Message

表单输入绑定

• v-model 指令在表单输入和应用状态之间创建双向绑定。

生命周期钩子

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程，我们可以在这些过程中使用生命周期钩子。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted

组件

组件是Vue应用的核心，它们是可复用的Vue实例。

const MyComponent = {
  data() {
    return { /* ... */ }
  },
  template: `<div>...</div>`
}

createApp(MyComponent).mount('#app')