Vue3 详细教程

文章目录

• 一、API 风格
• • 1.1 选项式 API
  • 1.2 组合式 API
• 二、Vue 指令
• • 2.1 {{}} 文本插值
  • 2.2 v-html 标签元素
  • 2.3 v-on 绑定事件
  • 2.4 v-show 隐藏元素
  • 2.5 v-if 消除元素
  • 2.6 v-bind 属性渲染
  • 2.7 v-for 列表渲染
  • 2.8 v-model 数据双向绑定
• 三、组件
• • 3.1 组件组合
  • 3.2 Props 组件交互
  • 3.3 自定义事件组件交互
  • 3.4 组件生命周期
• 四、Vue 引入第三方 Swiper
• 五、Axios 网络请求库
• • 5.1 基本使用
  • 5.2 Axios 网络请求封装
  • 5.3 网络请求跨域解决方案
• 六、Vue Router 路由
• • 6.1 引入路由
  • 6.2 根据URL参数路由
  • 6.3 多级路由嵌套
• 七、Vuex 状态管理
• • 7.1 State 数据存储
  • 7.2 Getter 数据过滤
  • 7.3 Mutation 数据更改
  • 7.4 Action 异步更改
• 八、Vue3 组合式 API
• • 8.1 ref 和 reactive
  • 8.2 setup() 定义方法
  • 8.3 props 和 context
  • 8.4 Provide 和 Inject
  • 8.5 setup中生命周期钩子
• 九、Element-plus
• • 9.1 加载组件
  • 9.2 加载字体图标

官网：https://cn.vuejs.org

一、API 风格

1.1 选项式 API

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

<template><button @click="increment">Count is: {{ count }}button>
template><script>export default {data() {return {count: 0}},methods: {increment() {this.count++}},mounted() {// 该函数就会在组件挂载完成后被调用// 一般进行网络请求，重新渲染数据}}
script>

1.2 组合式 API

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与