首页手记 Vue3教程：初学者快速上手指南

Vue3教程：初学者快速上手指南

标签：

Vue.js

概述

本文为初学者提供了详细的Vue3教程，涵盖了从环境搭建到应用开发的各项内容，包括Vue3的主要特点、安装步骤、基本语法、组件化开发、路由和状态管理。通过本文，初学者可以快速掌握Vue3的核心概念和开发技巧。

Vue3教程：初学者快速上手指南

Vue3简介

Vue3的主要特点

Vue3是由尤雨曦（Evan You）开发的前端框架的最新版本，自Vue2发布以来，Vue3引入了多项改进，包括性能提升、更小的体积、更好的TypeScript支持等。以下是Vue3的一些主要特点：

Composition API：新的Composition API提供了一种更灵活、可复用的方式来组织代码。
更小的体积：Vue3的体积比Vue2更小，这对提升应用的加载速度非常有帮助。
性能增强：Vue3在渲染性能方面有显著提升，特别是在处理复杂列表时。
更好的TypeScript支持：Vue3在设计时就考虑了TypeScript的支持，提供了更好的类型推断和类型定义。
更严格的TypeScript支持：Vue3引入了更严格的类型检查，有助于开发者发现并预防错误。
新的API设计：Vue3对许多内部API进行了重构和优化，简化了开发流程，改善了开发体验。
更好的错误信息：Vue3提供了更友好的错误提示，帮助开发者更快地定位问题。

安装Vue3环境

为了开始使用Vue3，首先需要安装Node.js环境。确保你的系统中安装了Node.js。你可以通过Node.js官网下载最新版本。安装完成后，可以使用npm或yarn作为包管理器来安装Vue3。

使用npm安装Vue CLI：

安装Vue CLI，这是一个用于创建和管理Vue项目的命令行工具：
```
npm install -g @vue/cli
```
创建一个新的Vue3项目：

使用Vue CLI快速创建一个新的Vue3项目：
```
vue create my-vue3-project
```
按照提示选择Vue3版本（选择最新的Vue3版本）。
进入项目并启动开发服务器：
```
cd my-vue3-project
npm run serve
```

创建第一个Vue3项目

创建一个简单的Vue3项目，包含一个Hello World的应用。

创建Vue项目：
```
vue create hello-vue3
```
选择Vue3版本，等待项目创建完成。

查看项目结构：

新创建的项目会有以下结构：

hello-vue3/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

App.vue是应用的根组件。
main.js是应用的入口文件。

编辑App.vue文件：

在src目录下找到App.vue文件，编辑其内容：

<template>
    <div id="app">
        <h1>Hello World, Vue3!</h1>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>
/* 可以在这里添加CSS样式 */
</style>

运行项目：

在项目根目录执行以下命令启动开发服务器：
```
npm run serve
```
在浏览器中打开http://localhost:8080，可以看到Hello World的应用在运行。

基本语法

模板语法

Vue3使用模板语法来解释HTML，以便将数据绑定到DOM上。最基本的模板语法是插值表达式，使用双大括号{{ }}来显示数据。

定义数据：

在src/main.js中，定义一个简单的Vue实例：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

app.config.globalProperties.$message = 'Hello from global property!';

app.provide('customMessage', 'Hello from provide!');

在模板中使用插值表达式：

在App.vue中，使用插值表达式显示数据：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

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

计算属性与方法

计算属性和方法都是用来处理数据的，但它们工作方式不同。计算属性是基于数据的变化而变化的，而方法则是每次调用都会执行。

定义计算属性：

在App.vue的export default对象中定义一个计算属性：

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}
</script>

在模板中使用计算属性：

<template>
  <div id="app">
    <h1>{{ fullName }}</h1>
  </div>
</template>

定义方法：

在App.vue中定义一个方法：

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  }
}
</script>

在模板中绑定事件：

<template>
  <div id="app">
    <h1>Count: {{ count }}</h1>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

指令和事件绑定

Vue3提供了丰富的指令来简化DOM操作。常用指令包括v-for、v-on和v-bind等。

使用v-for遍历数组：

<template>
  <div id="app">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
}
</script>

使用v-on绑定事件：

<template>
  <div id="app">
    <input v-model="inputValue" @input="handleInput">
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      console.log('Input value:', event.target.value);
    }
  }
}
</script>

使用v-bind绑定属性：

<template>
  <div id="app">
    <a v-bind:href="url">Visit Website</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org'
    };
  }
}
</script>

组件化开发

创建第一个组件

Vue3的组件化开发是其一大特点，可以通过组件拆分复杂应用，提高代码的复用性和可维护性。

创建一个组件文件：

在src/components目录下创建一个名为HelloComponent.vue的组件：

<template>
  <div>
    <h2>Hello, {{ name }}!</h2>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

在主组件中使用该组件：

修改App.vue文件，引入并使用HelloComponent组件：

<template>
  <div id="app">
    <HelloComponent name="World" />
  </div>
</template>

<script>
import HelloComponent from './components/HelloComponent.vue';

export default {
  components: {
    HelloComponent
  }
}
</script>

组件传值与事件

通过props和event来实现组件间的数据传递和事件通信。

使用props传递数据：

<template>
  <div>
    <h2>Parent Component</h2>
    <ChildComponent message="Hello from parent!" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

<template>
  <div>
    <h3>Child Component</h3>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

使用事件传递数据：

<template>
  <div>
    <h2>Parent Component</h2>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received data from child:', data);
    }
  }
}
</script>

<template>
  <div>
    <h3>Child Component</h3>
    <button @click="sendDataToParent">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('child-event', 'Data from child');
    }
  }
}
</script>

插槽与具名插槽

插槽用于实现组件的自定义内容，具名插槽则允许更灵活的内容组织。

定义具名插槽：

<template>
  <div>
    <h2>Header</h2>
    <slot name="header"></slot>
    <h2>Footer</h2>
    <slot name="footer"></slot>
  </div>
</template>

使用具名插槽：

<template>
  <div id="app">
    <CustomComponent>
      <template v-slot:header>
        <p>This is the header content.</p>
      </template>
      <template v-slot:footer>
        <p>This is the footer content.</p>
      </template>
    </CustomComponent>
  </div>
</template>

<script>
import CustomComponent from './components/CustomComponent.vue';

export default {
  components: {
    CustomComponent
  }
}
</script>

Vue3的响应式系统

数据响应原理

Vue3的响应式系统是其核心特性之一，它通过依赖追踪和变更通知来实现高效的DOM更新。Vue3使用Proxy来实现响应式，而不是Vue2中的Object.defineProperty。Proxy可以拦截整个对象的操作，使得Vue3的响应式更为灵活。

创建响应式数据：

import { reactive, ref } from 'vue';

const state = reactive({
  message: 'Hello Vue3!'
});

const count = ref(0);

响应式数据的使用：

<template>
  <div id="app">
    <h1>{{ state.message }}</h1>
    <button @click="incrementCount">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue3!'
    });

    const count = ref(0);

    const incrementCount = () => {
      count.value++;
    };

    return {
      state,
      count,
      incrementCount
    };
  }
}
</script>

使用ref和reactive

ref和reactive是Vue3中创建响应式数据的主要工具。

创建简单响应式数据：

import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({
  message: 'Hello Vue3!'
});

在模板中使用响应式数据：

<template>
  <div id="app">
    <h1>{{ state.message }}</h1>
    <button @click="incrementCount">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      message: 'Hello Vue3!'
    });

    const incrementCount = () => {
      count.value++;
    };

    return {
      state,
      count,
      incrementCount
    };
  }
}
</script>

响应式数组和对象

在Vue3中，可以通过reactive直接创建响应式数组和对象。

创建响应式数组：

import { reactive } from 'vue';

const items = reactive([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]);

在模板中使用响应式数组：

<template>
  <div id="app">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const items = reactive([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' }
    ]);

    const addItem = () => {
      items.push({ id: items.length + 1, name: `Item ${items.length + 1}` });
    };

    return {
      items,
      addItem
    };
  }
}
</script>

Vue Router基础

安装与配置Vue Router

Vue Router是Vue.js的官方路由库，用于管理应用的URL和组件。安装和配置Vue Router是基于Vue3的应用开发的基础。

安装Vue Router：
```
npm install vue-router@next
```

创建路由配置文件：

在src目录下创建一个名为router.js的文件：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

引入并使用Vue Router：

修改main.js文件，引入并使用Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

创建路由组件

创建简单的路由组件来替换默认视图。

创建Home组件：

在src/views目录下创建Home.vue文件：

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

创建About组件：

在src/views目录下创建About.vue文件：

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

路由参数与重定向

Vue Router支持路由参数和重定向，使得应用导航更为灵活。

使用路由参数：

修改router.js文件，添加一个带有参数的路由：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
];

在User.vue组件中使用路由参数：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

使用重定向：

在router.js文件中配置重定向：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User },
  { path: '*', redirect: '/' }
];

Vuex基础

安装与配置Vuex

Vuex是一个状态管理模式，用于管理应用中的全局状态。安装和配置Vuex是构建大型应用的基础步骤。

安装Vuex：
```
npm install vuex@next
```

创建Vuex Store：

在src目录下创建一个名为store.js的文件：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count,
    doubleCount: state => state.count * 2
  }
});

export default store;

引入并使用Vuex Store：

修改main.js文件，引入并使用Vuex Store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);

app.use(store);

app.mount('#app');

使用Store管理状态

在组件中通过Vuex Store管理状态，实现状态的集中化管理。

在组件中使用Store：

<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <h2>{{ doubleCount }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed, inject, onMounted } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.getters.count);
    const doubleCount = computed(() => store.getters.doubleCount);

    const increment = () => {
      store.dispatch('increment');
    };

    onMounted(() => {
      console.log('App mounted');
    });

    return {
      count,
      doubleCount,
      increment
    };
  }
}
</script>

Getter与Mutation

通过Getter和Mutation来读取和修改状态。

定义Getter：

在store.js中定义一个Getter：

getters: {
  count: state => state.count,
  doubleCount: state => state.count * 2
}

使用Getter：

在组件中使用Getter：

<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <h2>{{ doubleCount }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed, inject, onMounted } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.getters.count);
    const doubleCount = computed(() => store.getters.doubleCount);

    const increment = () => {
      store.dispatch('increment');
    };

    onMounted(() => {
      console.log('App mounted');
    });

    return {
      count,
      doubleCount,
      increment
    };
  }
}
</script>

通过以上步骤，你已经掌握了Vue3的基本使用方法、组件化开发、路由管理以及状态管理。希望这篇文章能帮助你快速上手Vue3，更好地开发应用。更多高级用法和最佳实践，你可以参考Vue官方文档或在慕课网等社区寻找更多资源。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

守候你守候我

手记
篇

粉丝

14

获赞与收藏

36

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空