Vue3学习入门：从零开始的简易教程

Vue3 是由 Vue.js 团队推出的最新版本，以强调性能优化、可维护性和易用性为核心目标。为了开始探索 Vue3 的世界，首先需要搭建一个基本的开发环境。以下步骤将引导您安装 Vue CLI 和创建新项目：

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

# 创建新项目
vue create my-app

# 进入项目目录
cd my-app

组件基础与模板语法

Vue3 强调组件化开发，每个组件都有其生命周期和状态管理。模板语法是 Vue3 实现数据绑定与模板渲染的核心。下面通过一个简单的组件来了解 Vue3 的模板语法：

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Welcome to Vue3!'
    };
  },
  methods: {
    sayHello() {
      alert('Hello, World!');
    }
  }
};
</script>

响应式系统与Composition API

Vue3 的响应式系统让数据变化自动影响视图，而 Composition API 则提供了一种更灵活的方式来组合逻辑与状态。下面是一个使用 Composition API 的简单示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const message = ref('Welcome');
const count = ref(0);

function increment() {
  count.value++;
}
</script>

数据绑定原理与实践

Vue3 通过单向数据流和双向数据绑定确保应用的响应性和安全。以下示例展示了使用双向绑定：

<template>
  <input v-model="message" placeholder="Type something...">
</template>

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

事件监听与自定义事件

Vue3 支持自定义事件的创建与监听：

<!-- Event Emit -->
<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('button-clicked'); // Emit an event with data
    }
  }
};
</template>

<!-- Event Listen -->
<template>
  <div>
    <h1>{{ info }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: ''
    };
  },
  methods: {
    handleButtonClick(event) {
      this.info = `Button clicked: ${event.detail.value}`;
    }
  },
  mounted() {
    this.$on('button-clicked', this.handleButtonClick);
  },
  beforeDestroy() {
    this.$off('button-clicked'); // Clean up listeners
  }
};
</script>

v-if, v-else, v-show的使用

Vue3 的条件渲染允许根据表达式结果控制元素的显示：

<template>
  <div>
    <p v-if="isUserLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUserLoggedIn: false
    };
  }
};
</script>

v-for循环遍历数据

Vue3 使用 v-for 进行列表渲染：

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

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

Vue Router基本使用

Vue Router 是 Vue.js 的官方路由管理工具：

// router.js
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 }
];

export default new VueRouter({
  routes
});

部署与优化

构建完成的项目使用 Vue CLI 的 build 命令生成生产环境版本：

vue build

部署至服务器或 CDN，并进行性能优化：

• 代码分割：多页面支持下的代码分割
• 懒加载：非入口页面的懒加载策略
• 压缩与优化：webpack 的优化插件
• CDN：近源缓存的 CDN 服务

通过以上步骤，您已从零开始学习 Vue3，并构建了一个基本应用。后续实践将帮助您深入理解 Vue3 的各种特性与应用。