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:classv-bind:style 用于动态绑定类和样式。

条件渲染

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

列表渲染

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

  • {{ item.text }}

事件处理

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

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

表单输入绑定

  • 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')
相关推荐
苹果醋318 分钟前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫26 分钟前
Vue初始化脚手架
前端·javascript·vue.js
一 乐29 分钟前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐
晨枫阳38 分钟前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng2 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪2 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛2 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能2 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost2 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu2 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程