首页 前端知识 Vue 3基础知识快速入门

Vue 3基础知识快速入门

2024-08-21 22:08:04 前端知识 前端哥 499 300 我要收藏

Vue 3基础知识快速入门

    • 1. Vue 3 概述
    • 2. 环境搭建
    • 3. Vue 3 项目结构
    • 4. 基础语法
    • 5. 组合式API
    • 6. 组件基础
    • 7. 组件通信
    • 8. 动态与异步组件
    • 9. 计算属性和侦听器
    • 10. 生命周期钩子
    • 11. 路由与状态管理
    • 12. 类型化开发
    • 13. 调试与测试
    • 14. 实战演练
    • 15. 持续学习

1. Vue 3 概述

Vue 3是渐进式的JavaScript框架,它让构建用户界面变得既简单又强大。新特性比如组合式API,让代码组织更灵活;还有对TypeScript的支持,让静态类型检查变得容易。

  • 官网: https://cn.vuejs.org/
    在这里插入图片描述

  • Vue3js.cn(非官方,Vue 3的学习资源聚合网站): https://vue3js.cn/
    在这里插入图片描述

2. 环境搭建

在你开始大冒险之前,得确保你的武器库(开发环境)已经准备好了。安装Node.js,然后选择Vue CLI或Vite来创建你的Vue 3项目。

创建Vue 3项目的例子:

# 使用Vue CLI创建项目
vue create my-vue-app

# 或者使用Vite
npm create vite@latest my-vue-app -- --template vue-ts

3. Vue 3 项目结构

每个Vue 3项目都像一个小城镇,有它自己的布局。主要的部件包括src文件夹,里面有components(组件)、views(视图)、router(路由)等。

4. 基础语法

模板语法是Vue的超级力量,让你能够把数据和逻辑直接写进HTML。

模板语法的例子:

<template>
  <div>{{ message }}</div>
  <button v-on:click="counter++">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      counter: 0
    };
  }
}
</script>

5. 组合式API

setup函数是Vue 3的新招式,它是组合式API的中心舞台。

组合式API的例子:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    onMounted(() => console.log('Component is mounted'));

    return { count };
  }
};

6. 组件基础

组件就像是Vue的乐高积木,你可以用它们搭建任何东西。

定义组件的例子:

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      title: 'My Component'
    };
  }
});
</script>

7. 组件通信

组件间通信就像是组件们在说悄悄话。Props用于父子间,事件用于更广范围。

组件通信的例子:

<!-- Child.vue -->
<template>
  <h1 :title="msg">{{ msg }}</h1>
</template>

<script>
export default {
  props: ['msg']
};
</script>

<!-- Parent.vue -->
<template>
  <ChildComponent :msg="parentMsg" @update:msg="parentMsg = $event" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMsg: 'Hello from parent'
    };
  }
};
</script>

8. 动态与异步组件

动态组件就像是变形金刚,可以根据需要变换形态。

动态组件的例子:

<template>
  <component :is="currentComponent" />
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: ComponentA
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === ComponentA ? ComponentB : ComponentA;
    }
  }
};
</script>

9. 计算属性和侦听器

计算属性就像是超级智能的计算器,而侦听器就像是你的私人侦探,帮你盯着数据的变化。

计算属性和侦听器的例子:

import { ref, computed, watch } from 'vue';

const count = ref(0);
const doubledCount = computed(() => count.value * 2);
watch(count, (newValue) => console.log(`Count is now: ${newValue}`));

// 试着改变count的值,看看doubledCount和控制台输出的变化

10. 生命周期钩子

生命周期钩子就像是生命周期中的关键时刻,你可以在这些时刻做特定的操作。

生命周期钩子的例子:

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => console.log('The component is mounted!'));
    
    return {};
  }
};

11. 路由与状态管理

Vue Router和Vuex是Vue的两个超能力小伙伴,帮你管理路由和应用状态。

Vue Router的例子:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    // ...其他路由
  ]
});

export default router;

12. 类型化开发

TypeScript是Vue 3的好朋友,帮你提前发现错误。

TypeScript的例子:

import { defineComponent, ref } from 'vue';

interface Person {
  name: string;
  age: number;
}

export default defineComponent({
  setup() {
    const person = ref<Person | null>(null);

    // TypeScript会确保person是Person类型或null
    person.value = { name: 'John Doe', age: 30 };

    return { person };
  }
});

13. 调试与测试

调试和测试就像是给你的应用做体检,确保它健康运行。

单元测试的例子(使用Vitest):

import { describe, it, expect } from 'vitest';
import { sum } from '../src/utils';

describe('sum function', () => {
  it('adds 1 + 1 to equal 2', () => {
    expect(sum(1, 1)).toBe(2);
  });

  // 可以添加更多的测试案例
});

14. 实战演练

通过构建小型应用,比如待办事项列表或者天气应用,将所学知识付诸实践。

15. 持续学习

Vue的社区非常活跃,加入社区,比如Vue Discord服务器,可以帮助你更快地学习和解决问题。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16460.html
标签
评论
发布的文章

HTML5入门基础

2024-06-16 09:06:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!