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 指令基于一个数组来渲染一个列表。

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

 事件处理

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

<button @click="reverseMessage">Reverse Message</button>

表单输入绑定

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

<input v-model="message" />

 生命周期钩子

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

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

 组件

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

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

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

原文地址：https://blog.csdn.net/m0_63843858/article/details/142446428

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！