首页手记 Vue3入门：新手必读的简单教程

Vue3入门：新手必读的简单教程

标签：

Vue.js

本文详细介绍了Vue3入门的相关内容，包括环境搭建、项目创建与调试、基本概念和组件开发等。文章还涵盖了Vue3的新特性，并提供了实战案例和技巧，帮助读者快速掌握Vue3的使用方法。从基础概念到实战应用，本文全面覆盖了Vue3开发的各个重要环节。

Vue3简介与环境搭建

什么是Vue.js

Vue.js 是一个轻量级的前端开发框架，提供了丰富的功能，如双向数据绑定、组件化开发、路由管理和状态管理等。Vue.js 是一个渐进式框架，这意味着你可以逐步引入其功能，而不需要一次性重构应用程序。此外，Vue.js 的 API 设计简洁友好，易于学习和使用。

Vue3的新特性

Vue 3 是 Vue.js 的最新稳定版本，它包含了许多重要的新特性和改进，包括：

更快的渲染性能：Vue 3 通过改进虚拟 DOM 的算法，使得渲染速度相比 Vue 2 更快。
更小的打包体积：Vue 3 通过 Tree-shaking 优化，使得最终打包出来的代码体积更小。
Composition API：相较于 Vue 2 的 Options API，Composition API 提供了更好的代码复用性，使得逻辑组织更加清晰。
更好支持 TypeScript：Vue 3 对 TypeScript 的支持更加完善，提升了开发效率。
更多的新特性，如响应式系统重构、Teleports、Suspense 等。

安装Node.js和Vue CLI

要开始使用 Vue 3，首先需要确保安装了 Node.js。可以通过浏览器访问 Node.js 官方网站（https://nodejs.org/）下载最新的 LTS 版本。安装完成后，可以通过命令行工具检查 Node.js 版本，确保安装成功：

node -v

接着，需要安装 Vue CLI。Vue CLI 是一个命令行工具，方便快速搭建和开发 Vue 应用。打开命令行工具，输入以下命令安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以使用 vue --version 检查 Vue CLI 是否安装成功。

创建Vue3项目

使用 Vue CLI 创建一个新的 Vue 3 项目，首先需要创建新目录，进入该目录并执行 vue create 命令。例如：

mkdir my-vue-app
cd my-vue-app
vue create my-vue-app

在创建项目的过程中，Vue CLI 会提示选择一些预设的配置。选择默认的 Vue 3 预设即可，它会安装 Vue 3 相关的依赖和配置。

运行与调试项目

创建项目后，可以通过以下命令启动开发服务器：

npm run serve

开发服务器启动后，会在浏览器中自动打开默认的开发地址，通常是 http://localhost:8080。此时，你可以看到默认的 Vue 3 项目页面，并开始进行开发。

Vue3的基本概念

组件化开发

组件化是 Vue 的核心特性之一。组件可以看作是页面中的可重用模块，每个组件都有自己的模板、样式和逻辑。在 Vue 中，创建组件的基本步骤如下：

创建一个新的 Vue 文件，例如 MyComponent.vue。
在文件中添加 <template>、<script> 和 <style> 区块。
在 <template> 区块中编写组件的 HTML 结构。
在 <script> 区块中定义组件的逻辑。
在 <style> 区块中定义组件的样式。

示例代码：

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

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      name: 'Vue 3'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

数据绑定和响应式系统

Vue 使用数据绑定和响应式系统来实现页面的动态更新。在 Vue 中，可以通过 v-bind 指令绑定数据到 HTML 属性，例如 v-bind:text 可以绑定文本内容。此外，Vue 3 还引入了 {{}} 语法来绑定数据到页面元素。

示例代码：

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  }
});

指令和插值

Vue 提供了许多指令来帮助我们操作 DOM。常见的指令包括 v-if、v-for、v-bind 和 v-model。

v-if：根据条件渲染元素。
v-for：根据数组或对象渲染列表。
v-bind：绑定 HTML 属性。
v-model：双向数据绑定。

示例代码：

<div id="app">
  <p v-if="ok">I'm visible.</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <input v-model="message" />
</div>

new Vue({
  el: '#app',
  data() {
    return {
      ok: true,
      items: ['Apple', 'Banana', 'Orange'],
      message: ''
    }
  }
});

计算属性和侦听器

计算属性和侦听器是 Vue 中两个非常有用的概念，它们可以简化代码逻辑并提高代码的可读性。

计算属性适用于依赖其他数据计算得出的结果。计算属性会自动追踪依赖并实现缓存。
侦听器可以监听数据的变化并在数据变化时执行相应的回调函数。

示例代码：

<div id="app">
  <p>Computed: {{ fullName }}</p>
  <p>Watcher: {{ message }}</p>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      message: 'Hello'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  watch: {
    firstName(newVal, oldVal) {
      console.log(`firstName changed from ${oldVal} to ${newVal}`)
    }
  }
});

Vue3的组件开发

组件的基本结构

每个 Vue 组件都有三个部分：<template>、<script> 和 <style>。模板定义组件的 HTML 结构，脚本定义组件的逻辑，样式定义组件的 CSS 样式。

示例代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue 3',
      message: 'This is a Vue 3 component'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

属性传递与事件绑定

可以将数据从父组件传递给子组件，通过 props 属性定义接收的数据。同时通过 v-on 指令绑定事件，实现子组件与父组件之间的通信。

示例代码：

<template>
  <ChildComponent :message="parentMessage" @message-event="handleMessage"/>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('message-event', 'Hello from child')
    }
  }
}
</script>

组件间的通信

在 Vue 中，组件间通信可以通过多种方式实现，包括使用 $emit、$parent/$children 或 Vuex 状态管理库。以下是使用 $emit 和 $parent/$children 实现子组件向父组件传递数据的示例：

<template>
  <ChildComponent @update-message="updateMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateMessage(message) {
      console.log(`Message from child: ${message}`)
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Message from child'
    }
  },
  methods: {
    sendMessage() {
      this.$emit('update-message', this.message)
    }
  }
}
</script>

生命周期钩子

Vue 组件有多个生命周期钩子，可以在特定的生命周期阶段执行相应的逻辑。常见的生命周期钩子包括：

beforeCreate：在实例初始化之前。
created：实例初始化完成。
beforeMount：在挂载到 DOM 前调用。
mounted：挂载完成后调用。
beforeUpdate：数据变化触发重新渲染前调用。
updated：完成更新操作后调用。
beforeDestroy：实例销毁前调用。
destroyed：实例销毁后调用。

示例代码：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'LifecycleComponent',
  data() {
    return {
      message: 'Lifecycle Component'
    }
  },
  beforeCreate() {
    console.log('Before Create')
  },
  created() {
    console.log('Created')
  },
  beforeMount() {
    console.log('Before Mount')
  },
  mounted() {
    console.log('Mounted')
  },
  beforeUpdate() {
    console.log('Before Update')
  },
  updated() {
    console.log('Updated')
  },
  beforeDestroy() {
    console.log('Before Destroy')
  },
  destroyed() {
    console.log('Destroyed')
  }
}
</script>

插槽与动态组件

插槽是 Vue 中用于实现子组件内容插槽的机制。可以使用 slot 标签在子组件中定义插槽，父组件可以将任意内容插入到这些插槽中。

动态组件允许在一个元素上渲染不同的组件，并根据需要切换这些组件。

示例代码：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

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

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

<template>
  <DynamicComponent>
    <template v-slot:header>
      <h1>Header</h1>
    </template>
    <template v-slot:footer>
      <footer>Footer</footer>
    </template>
  </DynamicComponent>
</template>

路由管理

配置路由

使用 Vue Router 进行页面导航。首先安装 Vue Router：

npm install vue-router

在项目中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

在主组件中引入路由实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

路由参数与查询参数

可以通过 this.$router.push({ name: 'routeName', params: { id: 123 } }) 传递路由参数，通过 this.$router.push({ name: 'routeName', query: { page: 1 } }) 传递查询参数。

示例代码：

this.$router.push({ name: 'User', params: { id: 123 } })
this.$router.push({ name: 'Search', query: { q: 'Vue 3' } })

路由守卫

路由守卫可以在导航进行前进行拦截验证操作。例如，在导航进行前验证用户是否登录。

示例代码：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

嵌套路由与命名视图

在页面中嵌套其他页面，可以使用嵌套路由。命名视图允许在一个路由下渲染多个视图组件。

示例代码：

const routes = [
  {
    path: '/user/:id',
    component: UserLayout,
    children: [
      { path: '', component: UserHome },
      { path: 'profile', component: UserProfile }
    ]
  }
]

<router-view></router-view>
<router-view name="sidebar"></router-view>

Vue3的状态管理

Vuex的基本概念

Vuex 是 Vue 的状态管理库，它提供了一种集中管理应用状态的方式。使用 Vuex 可以更好地管理应用中的共享状态，确保数据的唯一性和一致性。

安装Vuex

在 Vue 项目中安装 Vuex，可以通过 npm 或 yarn 安装 Vuex：

npm install vuex --save

或

yarn add vuex

创建Store

创建 Vuex Store 的方式是定义一个包含状态、getter、mutation 和 action 的对象。然后通过 Vuex 提供的 createStore 方法来创建 Store 实例。

示例代码：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

状态管理与操作

在 Vue 组件中，可以通过 store 实例来访问和操作状态。可以通过 mapState 和 mapMutations 辅助函数将 Store 中的状态映射到组件的 data 和 methods 中。

示例代码：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>

模块化Store

为了更好地组织代码，可以将 Store 分成多个模块。每个模块都可以有自己的状态、getter、mutation 和 action。

示例代码：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  modules: {
    moduleA: {
      state: {
        name: 'Module A'
      },
      getters: {
        fullName(state) {
          return state.name + ' Module A'
        }
      },
      mutations: {
        setName(state, name) {
          state.name = name
        }
      },
      actions: {
        setName({ commit }, name) {
          commit('setName', name)
        }
      }
    }
  }
})

实战案例与实战技巧

创建一个简单的CRUD应用

这里我们将创建一个简单的 CRUD 应用，实现基本的数据增删改查功能。首先创建一个 Vue 项目，然后安装 Axios 进行 HTTP 请求。

vue create crud-app
cd crud-app
npm install axios

API请求与数据处理

在 Vue 组件中，使用 Axios 发送 HTTP 请求来获取数据。这里演示一个简单的 GET 请求。

示例代码：

import axios from 'axios'

export function fetchData(url) {
  return axios.get(url).then(response => {
    return response.data
  })
}

在组件中使用：

import { fetchData } from '@/utils/api'

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    this.items = await fetchData('/api/items')
  }
}

路由与导航

使用 Vue Router 进行页面导航。首先安装 Vue Router：

npm install vue-router

在项目中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

在主组件中引入路由实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

表单验证与错误处理

使用 VeeValidate 来进行表单验证。首先安装 VeeValidate：

npm install vee-validate

在组件中使用 VeeValidate：

import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

extend('required', {
  ...required,
  message: 'This field is required'
})

extend('email', {
  ...email,
  message: 'This field must be a valid email'
})

export default {
  components: {
    ValidationObserver,
    ValidationProvider
  },
  methods: {
    submit() {
      this.$refs.observer.validate()
    }
  }
}

在模板中使用：

<template>
  <ValidationObserver ref="observer">
    <form @submit.prevent="submit">
      <ValidationProvider name="name" rules="required">
        <input type="text" name="name" v-model="name" />
      </ValidationProvider>
      <ValidationProvider name="email" rules="email">
        <input type="email" name="email" v-model="email" />
      </ValidationProvider>
      <button type="submit">Submit</button>
    </form>
  </ValidationObserver>
</template>

项目部署到服务器

项目部署到服务器通常需要构建项目。使用 npm run build 进行构建：

npm run build

构建完成后，会在 dist 目录下生成静态文件。可以将这些文件上传到服务器，配置服务器的静态文件服务即可。

示例代码：

scp -r dist/* user@yourserver:/path/to/app

然后配置服务器上的静态文件服务，例如使用 Nginx 配置：

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    root /path/to/app;
    try_files $uri /index.html;
  }
}

通过以上步骤，可以将 Vue 3 项目成功部署到服务器上。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

一只斗牛犬

手记
篇

粉丝

49

获赞与收藏

300

关注作者，订阅最新文章

相关文章推荐

新手必读：javascript入门书籍推荐

【笔记】MindManager 2018新手入门教程

松哥手把手教你在 Vue3 中自定义插件

【MobX】MobX 简单入门教程

vue3 深入浅出（连载三）手摸手实现 vue3

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3入门：新手必读的简单教程

Vue3简介与环境搭建

什么是Vue.js

Vue3的新特性

安装Node.js和Vue CLI

创建Vue3项目

运行与调试项目

Vue3的基本概念

组件化开发

数据绑定和响应式系统

指令和插值

计算属性和侦听器

Vue3的组件开发

组件的基本结构

属性传递与事件绑定

组件间的通信

生命周期钩子

插槽与动态组件

路由管理

配置路由

路由参数与查询参数

路由守卫

嵌套路由与命名视图

Vue3的状态管理

Vuex的基本概念

安装Vuex

创建Store

状态管理与操作

模块化Store

实战案例与实战技巧

创建一个简单的CRUD应用

API请求与数据处理

路由与导航

表单验证与错误处理

项目部署到服务器

相关文章推荐

阅读免费教程