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

本文详细介绍了Vue3的核心特点和与Vue2的主要区别，涵盖了从环境搭建到基础语法、常用指令、路由与状态管理等多个方面的内容，帮助读者快速掌握Vue3入门知识，轻松上手开发Vue3项目。

Vue3的核心特点

Vue 3 是 Vue.js 的最新版本，它在性能、兼容性、开发体验等方面进行了重大改进。以下是 Vue 3 的主要特点：

1. 性能提升：Vue 3 通过使用 Proxy 对象来替代 Object.defineProperty，实现了更好的响应式系统。这使得 Vue 3 的渲染速度和更新速度比 Vue 2 更快。

2. Composition API：Vue 3 引入了 Composition API，允许开发者在组件中通过 setup 函数来更好地组织逻辑，提高了代码的可读性和可维护性。

3. Tree Shaking：Vue 3 的核心库更小，可以进行 Tree Shaking，这使得最终打包后的文件更小，加载速度更快。

4. 更好的兼容性：Vue 3 对 TypeScript 和自定义渲染器有更好的支持。

5. Teleport 和 KeepAlive：Vue 3 引入了新的组件 Teleport 和 KeepAlive，可以更好地处理跨层级组件的渲染和组件的持久化。

Vue3与Vue2的主要区别

1. 响应式系统：Vue 3 使用 Proxy 来实现响应式，而 Vue 2 使用的是 Object.defineProperty。这使得 Vue 3 的响应式系统更强大，支持监视数组和对象的深层变化。

2. Composition API：Vue 3 引入了 Composition API，这是一个新的 API，允许开发者以函数的方式组织代码，更好地管理组件的逻辑和状态。

3. 更好的类型支持：Vue 3 提供了更好的 TypeScript 支持，可以更方便地定义组件的类型和接口。

4. 更小的体积：Vue 3 的核心库体积更小，更适合现代前端开发的需求。

5. 改进的虚拟 DOM：Vue 3 的虚拟 DOM 实现进一步优化，使得渲染更高效。

安装Node.js

在开始之前，确保你的开发环境中已经安装了 Node.js。Node.js 是 Vue 开发的重要工具。你可以通过 Node.js 官网下载安装包，或者使用包管理器如 nvm（Node Version Manager）来安装 Node.js。

使用 nvm 安装 Node.js

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

# 使用 nvm 安装 Node.js
nvm install --lts

安装Vue CLI

Vue CLI 是 Vue.js 的官方脚手架工具，可以帮助你快速搭建 Vue 项目。Vue CLI 4 及以上版本支持 Vue 3。

# 全局安装 Vue CLI
npm install -g @vue/cli

创建Vue3项目

使用 Vue CLI 创建一个新的 Vue 3 项目。

# 创建一个新的 Vue 3 项目
vue create my-vue3-app

# 在项目生成过程中，选择 Vue 3
# 或者直接指定版本
vue create --default-vue=vue3 my-vue3-app

创建完成后，进入项目目录并启动开发服务器。

cd my-vue3-app
npm run serve

模板语法

Vue 使用基于 HTML 的模板语法，允许开发者在普通的 HTML 中混合使用 Vue 的特性。模板被编译为虚拟 DOM 渲染函数。Vue 虚拟 DOM 渲染函数会描述如何将虚拟 DOM 转换为实际的 DOM 元素，并将每个节点与应用程序内部的其他代码进行关联。

示例代码

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

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue 3',
      message: 'Welcome to Vue 3'
    };
  }
};
</script>

计算属性与方法

计算属性基于它们的依赖关系进行缓存，只有在依赖发生变化时才会重新计算。计算属性适合用于复杂的逻辑计算，而方法则适合用于临时性的操作。

计算属性

<template>
  <div>
    <p>原始值: {{ originalValue }}</p>
    <p>计算值: {{ computedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalValue: 'Hello Vue 3'
    };
  },
  computed: {
    computedValue() {
      return this.originalValue.toUpperCase();
    }
  }
};
</script>

方法

<template>
  <div>
    <p>原始值: {{ originalValue }}</p>
    <p>方法值: {{ methodValue() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalValue: 'Hello Vue 3'
    };
  },
  methods: {
    methodValue() {
      return this.originalValue.toUpperCase();
    }
  }
};
</script>

组件基础

Vue 组件是可重用的 Vue 实例片段。组件可以封装可复用的代码，使 Vue 项目更加模块化和更易于维护。

声明式组件

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  }
};
</script>

选项式组件

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  components: {
    MyComponent: {
      template: '<div>My Component</div>',
      data() {
        return {
          message: 'Hello from MyComponent'
        };
      }
    }
  }
};
</script>

v-bind和v-model

v-bind

v-bind 指令用于动态绑定 HTML 属性或 Vue 实例的值。

<template>
  <div>
    <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imagePath" alt="Vue 3 Logo">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagePath: 'https://vuejs.org/images/logo.png'
    };
  }
};
</script>

v-model

v-model 指令用于双向绑定表单元素的值。

<template>
  <div>
    <input v-model="message" placeholder="Enter something">
    <p>{{ message }}</p>
  </div>
</template>

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

v-if和v-for

v-if

v-if 指令用于条件渲染元素。

<template>
  <div>
    <p v-if="show">Hello, Vue 3!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

v-for

v-for 指令用于列表渲染。

<template>
  <div>
    <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: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    };
  }
};
</script>

其他常用指令

v-on

v-on 指令用于绑定事件处理器。

<template>
  <div>
    <button v-on:click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

v-show

v-show 指令用于条件渲染元素，与 v-if 类似，但 v-show 是通过 CSS 的 display 属性控制显示和隐藏。

<template>
  <div>
    <p v-show="show">Hello, Vue 3!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

Vue Router基本使用

Vue Router 是 Vue.js 官方的路由管理器，用于实现单页面应用(SPA)的导航。

安装 Vue Router

npm install vue-router@next

基本配置

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { createRouter, createWebHistory, createWebHashHistory } 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;
</script>

路由跳转

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

Vuex入门指南

Vuex 是 Vue.js 的状态管理库，用于在应用中集中管理状态。

安装 Vuex

npm install vuex@next

基本配置

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

<script>
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

export default store;
</script>

使用 Vuex

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

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const count = store.getters.count;
    const increment = () => store.commit('increment');

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

创建简单的待办事项应用

创建一个简单的待办事项应用，可以添加、删除和编辑待办事项。

安装依赖

npm install

创建待办事项组件

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" placeholder="Add a new todo" @keyup.enter="addTodo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span v-if="!todo.editing">{{ todo.text }}</span>
        <input v-else v-model="todo.text" @blur="updateTodo(todo)" @keyup.enter="updateTodo(todo)" @keyup.esc="cancelEdit(todo)" />
        <button @click="editTodo(todo)">Edit</button>
        <button @click="removeTodo(todo)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: 1, text: 'Learn Vue 3', editing: false },
        { id: 2, text: 'Build a Todo App', editing: false }
      ]
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ id: Date.now(), text: this.newTodo, editing: false });
        this.newTodo = '';
      }
    },
    removeTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
    },
    editTodo(todo) {
      todo.editing = true;
    },
    updateTodo(todo) {
      todo.editing = false;
    },
    cancelEdit(todo) {
      todo.editing = false;
    }
  }
};
</script>

项目部署与上线

构建项目

npm run build

部署到服务器

将生成的 dist 目录中的文件部署到服务器。可以使用 nginx 或 Apache 服务器来托管这些静态文件。

scp -r dist/* username@yourserver:/path/to/deploy/

配置服务器

确保服务器上安装了 nginx 或 Apache，并正确配置。

参考资料

• Vue.js 官方文档
• Vue Router 官方文档
• Vuex 官方文档
• 慕课网