Vue3快速上手

郭宝

已于 2024-09-09 09:38:12 修改

阅读量784

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： vue.js 前端 javascript

于 2023-09-09 11:17:25 首次发布

本文链接：https://blog.csdn.net/qq_35366269/article/details/132762856

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文详细介绍了Vue3的入门知识，包括Vue3的新特性、API风格、组合式API的使用，如setup、reactive、ref、computed、watch等功能，并通过create-vue搭建Vue3项目，讲解了Vue3与Vue2的区别以及优势。此外，还深入探讨了Vue3中的父子通信、模板引用、Pinia状态管理和VueUse实用函数。最后，通过一个Vue3小兔仙电商项目实战，展示了Vue3在实际项目中的应用和技术栈，包括ElementPlus的按需引入、axios配置以及路由设计等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始

API风格

Vue的组件按两种不同的风格进行书写：选项式API和组合式API

选项式API

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如：data、methods、mounted。选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

<script >
export default {
  setup() {
    console.log("setup")
    // 定义一个变量
    const name = "张三";

    // 定义一个函数
    const pringLog = ()=> {
      console.log("pringLog")
    }

    // 如果想在template中使用该变量和函数，那么就需要以一个对象的形式将其返回出去
    return {
      name,
      pringLog
    }
  },
  beforeCreate() {
    console.log("beforeCreate")
  }
}
</script>

<template>
  <div >
<!--  使用变量  -->
    {
  
  {name}}

<!--  调用函数  -->
    <div @click="pringLog">点我获取姓名</div&g