l-blog

主题模式

Vue.js入门指南 ​

官方网站: Vue.js 官方文档

Vue.js是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。

什么是Vue.js？ ​

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue的核心特性 ​

1. 响应式数据绑定 ​

Vue.js最核心的特性之一就是响应式数据绑定系统。当你修改数据时，视图会自动更新。

javascript
// 创建一个Vue实例
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
html
<!-- HTML模板 -->
<div id="app">
  {{ message }}
</div>

2. 组件化开发 ​

组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

javascript
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: `
    <button v-on:click="count++">
      You clicked me {{ count }} times.
    </button>
  `
})

3. 指令系统 ​

Vue.js提供了许多内置指令，如v-if、v-for、v-bind、v-on等。

html
<!-- 条件渲染 -->
<div v-if="seen">现在你看到我了</div>

<!-- 列表渲染 -->
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

<!-- 事件处理 -->
<button v-on:click="doSomething">点击我</button>

Vue实例生命周期 ​

Vue实例有一个完整的生命周期，从创建到销毁的过程叫做生命周期。

javascript
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // 实例已经创建完成之后被调用
    console.log('a is: ' + this.a)
  },
  mounted: function () {
    // 实例挂载到DOM之后被调用
    console.log('实例已挂载')
  },
  updated: function () {
    // 数据更改导致虚拟DOM重新渲染和打补丁之后被调用
    console.log('视图已更新')
  },
  destroyed: function () {
    // Vue实例销毁后调用
    console.log('实例已销毁')
  }
})

计算属性和侦听器 ​

计算属性 ​

计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时才会重新求值。

javascript
computed: {
  // 计算属性的getter
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

侦听器 ​

当你需要在数据变化时执行异步或开销较大的操作时，侦听器是最有用的。

javascript
watch: {
  question: function (newQuestion, oldQuestion) {
    this.answer = 'Waiting for you to stop typing...'
    this.getAnswer()
  }
}

Vue CLI ​

Vue CLI是一个基于Vue.js进行快速开发的完整系统，提供：

  1. 终端里的vue命令
  2. 一个GUI图形化界面
  3. 插件系统
  4. 图形化的项目管理工具

安装Vue CLI： ​

bash
npm install -g @vue/cli

创建新项目： ​

bash
vue create my-project

在创建项目时，CLI会提示你选择预设配置或手动选择功能：

  1. 选择默认预设（Default）快速创建项目
  2. 或选择手动选择功能（Manually select features）来自定义项目配置

使用Vite创建Vue项目（推荐）： ​

Vite是新一代前端构建工具，由Vue作者尤雨溪开发，具有更快的冷启动速度和热更新。

bash
# 使用npm
npm create vue@latest

# 使用yarn
yarn create vue

# 使用pnpm
pnpm create vue

按照提示选择所需功能：

  • 是否使用TypeScript
  • 是否启用JSX支持
  • 是否引入Vue Router
  • 是否引入Pinia（状态管理）
  • 是否引入Vitest（单元测试）
  • 是否引入Cypress或Playwright（端到端测试）
  • 是否启用ESLint和Prettier

创建完成后进入项目目录并安装依赖：

bash
cd my-project
npm install

启动开发服务器：

bash
npm run dev

生态系统 ​

Vue有着丰富的生态系统：

  • Vuex：状态管理模式
  • Vue Router：官方路由管理器
  • Vue DevTools：浏览器开发调试工具
  • Nuxt.js：服务端渲染应用框架

总结 ​

Vue.js以其简洁的API、灵活的设计和良好的性能成为前端开发者的热门选择。它的学习曲线相对平缓，适合初学者入门，同时也具备足够的功能满足复杂应用的需求。

通过本文的介绍，你应该对Vue.js有了基本的了解。接下来可以深入学习组件通信、路由管理、状态管理等内容，逐步掌握Vue.js的全部功能。