首页手记 Vue入门教程：从零开始搭建你的第一个Vue项目

Vue入门教程：从零开始搭建你的第一个Vue项目

标签：

Vue.js

概述

Vue.js 是一个渐进式前端框架，它允许开发者逐步采用其功能，快速开发复杂应用。Vue 提供了响应式数据绑定、组件化开发等特性，易于融入现有项目中。它具有丰富的生态系统，包括 Vue CLI、Vue Router 和 Vuex 等工具，帮助开发者提升开发效率。

Vue简介

Vue是什么

Vue.js 是一个用于构建用户界面的渐进式框架。与其他前端框架相比，Vue 更强调简单易用性，易于融入现有项目中。它允许开发者逐步采用其功能，从而实现快速且可扩展地开发复杂应用。Vue 具有丰富的生态系统，提供了从模板到状态管理的各种工具。

Vue的特点和优势

Vue 提供了响应式的数据绑定、组件化开发、虚拟 DOM 等特性，这些特性的结合使得 Vue 成为快速开发交互式应用程序的理想选择。以下是一些关键特点和优势：

声明式渲染：通过简单的模板语法，Vue 可以将 HTML 结构与应用数据绑定在一起，使得界面能够随着数据的变化而更新。
组件系统：组件是 Vue 最强大的功能之一，它将应用程序分割成独立的、可复用的小块。每个组件都有自己的状态和逻辑，使得代码更加模块化和可维护。
渐进式框架：Vue 可以只用它的核心库（不含插件和框架的附加部分），也就是说，Vue 可以无缝地与已有的项目集成，用户可以选择性地添加如路由、状态管理等功能模块。
易于学习：Vue 的 API 设计直观简洁，使得开发者可以快速上手。
丰富的插件和工具：Vue 社区提供了许多第三方库和工具，比如 Vue CLI、Vue Router、Vuex 等，这些都可以提升开发效率。
高性能：Vue 使用虚拟 DOM 和异步更新机制来提高渲染效率，确保应用在大规模数据操作时仍能保持流畅。

Vue的发展历史和社区支持

Vue.js 由尤雨溪（Evan You）于 2014 年 2 月发布。最初，Vue 并没有被设计成一个完整的框架，而是一个仅包含视图层的库，旨在解决 Angular 和 React 等框架存在的问题。随着其版本的不断更新和功能的增强，Vue 已经成长为了一个全面的前端框架，被广泛应用于企业级项目中。

在社区支持方面，Vue 拥有一个庞大且活跃的开发者社区，社区提供了大量的教程、插件、模板和文档，帮助开发者快速上手和解决问题。

历史里程碑

Vue 的早期版本中，尤雨溪引入了 Vue 的核心特性，如响应式数据绑定和组件化开发。Vue 2.0 的发布标志着 Vue 的重大升级，包括更好的性能优化和更简化的 API。以下是 Vue 的一些重要版本：

Vue 1.0：首次发布，在该版本中引入了响应式数据绑定和组件化开发。
Vue 2.0：发布于 2016 年，带来了更好的性能，更简化的 API，并支持异步组件和虚拟 DOM。
Vue 3.0：发布于 2020 年，引入了更好的性能和更小的体积，同时支持 TypeScript 和更高级的 API。

Vue环境搭建

安装Node.js和npm

在搭建 Vue 项目环境前，需要确保安装了 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，而 npm（Node Package Manager）是 Node.js 的官方包管理器，用于下载、安装和管理依赖库。

访问 Node.js 官网（https://nodejs.org/），下载最新版本的 LTS（长期支持）版本，根据自己的操作系统（Windows、macOS、Linux）选择合适的安装包。
安装完成后，打开命令行工具（如 Windows 的命令提示符、macOS 和 Linux 的终端），输入以下命令检查 Node.js 和 npm 是否安装成功：
```
node -v
npm -v
```
如果安装成功，将会显示对应的版本号。

安装Vue CLI

Vue CLI 是 Vue.js 的官方脚手架工具，能够快速搭建 Vue 项目。它提供了预设的项目结构和配置，帮助开发者快速开始开发过程。

打开命令行工具，输入以下命令全局安装 Vue CLI：
```
npm install -g @vue/cli
```
安装完成后，可以通过输入以下命令验证 Vue CLI 是否安装成功：
```
vue --version
```

使用Vue CLI创建新项目

使用 Vue CLI 创建新项目有多种方式，包括创建一个带有默认配置的 Vue 项目，或者选择预设的模板。这里以创建一个默认的 Vue 项目为例。

在命令行工具中，运行以下命令创建一个新项目，命名为 my-vue-app：
```
vue create my-vue-app
```
运行命令后，CLI 会询问是否使用默认配置。选择 "Manually select features"（手动选择特性），或直接按回车键选择默认配置。
进入项目目录并安装依赖：
```
cd my-vue-app
npm install
```
运行项目：
```
npm run serve
```
这将会启动开发服务器，你可以在浏览器中访问 http://localhost:8080 查看项目。

Vue基础语法

变量绑定和事件处理

在 Vue 中，借助于 v-bind 和 v-on 指令，可以实现数据绑定和事件处理。以下分别介绍这两个指令的用法。

变量绑定

v-bind 指令用于将元素的属性值绑定到 Vue 实例的属性上。例如，可以将一个元素的 src 属性绑定到 imageUrl 变量上，当 imageUrl 变量发生变化时，图片的 src 属性也会随之更新。

<img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageUrl" alt="Vue logo">

也可以省略冒号 : 来简化语法：

<img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageUrl" alt="Vue logo">

事件处理

v-on 指令用于为元素绑定事件处理器，例如 click 事件。当元素触发该事件时，绑定的事件处理器将被执行。

<button v-on:click="handleClick">点击我</button>

同样，可以省略冒号 : 来简化语法：

<button @click="handleClick">点击我</button>

示例代码

假设有一个 Vue 实例，它有一个变量 count 和一个方法 increment，用于在点击按钮时增加变量 count 的值。

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

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count += 1;
    }
  }
});

模板语法

Vue 的模板语法允许用简单的 HTML 来定义应用的结构，同时在 HTML 中嵌入 Vue 的指令来实现数据绑定。模板语法主要包括插值表达式、指令和事件处理器等。

插值表达式

插值表达式使用双大括号 {{ }} 来表示，用于在 HTML 中展示 Vue 实例的数据。例如：

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

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

指令

指令是带有 v- 前缀的特殊属性，用于在 Vue 实例的数据和 HTML DOM 之间建立动态绑定。除了前面提到的 v-bind 和 v-on，还有其他指令，如 v-if 用于条件渲染，v-for 用于列表渲染。

事件处理器

事件处理器用于在元素上绑定事件，如 click，可以使用 v-on 或者 @ 来绑定事件处理器。

示例代码

下面的例子展示了如何使用插值表达式和 v-on 指令来创建一个简单的待办事项列表。

<div id="app">
  <p>{{ message }}</p>
  <input v-model="newTodo" placeholder="添加新待办事项">
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '这是一个待办事项列表',
    newTodo: '',
    todos: [
      { id: 1, text: '学习 Vue' },
      { id: 2, text: '完成项目' },
      { id: 3, text: '部署应用' }
    ]
  },
  methods: {
    addTodo: function () {
      this.todos.push({
        id: this.todos.length + 1,
        text: this.newTodo
      });
      this.newTodo = '';
    }
  },
  mounted: function () {
    this.$watch('newTodo', function (val) {
      if (val !== this.newTodo) {
        this.addTodo();
      }
    }, { immediate: true });
  }
});

Vue实例和生命周期

Vue 实例是由 new Vue({...}) 创建的，它包含数据、方法、生命周期钩子等。每个 Vue 实例都有不同的生命周期阶段，例如 beforeCreate、created、mounted 等。在这些阶段，可以执行特定的初始化操作或清理工作。

生命周期钩子

生命周期钩子是为每个 Vue 实例定义的方法，它们在特定的生命周期阶段被自动调用。例如：

beforeCreate：在这个钩子中，组件实例将被创建，数据属性和方法尚未初始化。
created：在这里，实例已经创建，数据属性和方法已经准备好。
mounted：在挂载阶段，此时 DOM 已经渲染完毕，可以操作 DOM。
beforeDestroy：在组件销毁之前调用，可以在这里进行清理操作。
destroyed：组件的生命周期结束，在这里执行一些清理工作。

示例代码

下面的例子展示了如何使用生命周期钩子来控制 Vue 实例的状态。

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

var app = new Vue({
  el: '#app',
  data: {
    message: '这是一个示例应用'
  },
  beforeCreate: function () {
    console.log('beforeCreate, 数据和方法尚未初始化');
  },
  created: function () {
    console.log('created, 数据和方法已经准备就绪');
  },
  mounted: function () {
    console.log('mounted, DOM 已经渲染完毕');
  },
  beforeDestroy: function () {
    console.log('beforeDestroy, 准备销毁组件');
  },
  destroyed: function () {
    console.log('destroyed, 组件已经销毁');
  }
});

Vue组件化开发

创建和使用Vue组件

组件是 Vue 中重要的概念，它将应用分割为可复用的组件，每个组件包含自己的模板、样式和逻辑。组件文件通常包含 .vue 后缀，内容由 <template>、<script> 和 <style> 三部分组成。

基本结构

一个简单的组件定义如下：

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

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

<style scoped>
/* 组件样式 */
</style>

示例代码

以下是一个简单的组件 HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>这是一个简单的组件</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      message: '这是一条消息'
    };
  }
};
</script>

<style scoped>
.hello {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  text-align: center;
}
</style>

使用组件

在父组件中使用子组件 HelloWorld，可以通过 components 选项来注册组件，然后在模板中使用 <HelloWorld> 标签：

<div id="app">
  <HelloWorld msg="这是传递给组件的消息" />
</div>

import HelloWorld from './components/HelloWorld.vue';

var app = new Vue({
  el: '#app',
  components: {
    HelloWorld
  }
});

组件间的传值

在组件间传递数据可以通过 props 和 $emit 来实现。props 用于从父组件向子组件传递数据，而 $emit 则用于从子组件向父组件传递数据。

使用 Props

父组件向子组件传递数据的步骤如下：

在子组件定义 props，指定可接受的数据类型。
在父组件中使用子组件标签，并将数据传递给 props。

示例代码

假设有一个子组件 ChildComponent.vue，需要接收来自父组件的消息：

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

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
};
</script>

在父组件中使用子组件，并将数据传递给 message：

<div id="app">
  <ChildComponent :message="parentMessage" />
</div>

import ChildComponent from './components/ChildComponent.vue';

var app = new Vue({
  el: '#app',
  components: {
    ChildComponent
  },
  data: {
    parentMessage: '来自父组件的消息'
  }
});

使用 `$emit`

子组件向父组件传递数据可以通过 $emit 方法触发自定义事件，父组件通过 v-on 监听这些事件。

示例代码

在子组件中使用 $emit 触发事件：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessage() {
      this.$emit('child-event', '来自子组件的消息');
    }
  }
};
</script>

在父组件中监听子组件触发的事件：

<div id="app">
  <ChildComponent @child-event="handleChildEvent" />
</div>

import ChildComponent from './components/ChildComponent.vue';

var app = new Vue({
  el: '#app',
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(message) {
      console.log(message);
    }
  }
});

父子组件通信

父子组件之间的通信通常涉及数据的传递和事件的触发。父组件可以通过 props 向子组件传递数据，子组件可以通过 $emit 向父组件发送事件，父组件通过监听这些事件来接收子组件传递的数据。

示例代码

假设有一个父组件 ParentComponent.vue 和一个子组件 ChildComponent.vue，需要实现从父组件向子组件传递数据，以及从子组件向父组件发送事件。

父组件 ParentComponent.vue：

<template>
  <div>
    <ChildComponent :message="parentMessage" @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    };
  },
  methods: {
    handleChildEvent(message) {
      console.log(message);
    }
  }
};
</script>

子组件 ChildComponent.vue：

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('child-event', '来自子组件的消息');
    }
  }
};
</script>

Vue路由和状态管理

使用Vue Router实现单页面应用

Vue Router 是 Vue.js 的官方路由库，它允许开发者构建单页面应用（SPA）。使用 Vue Router 可以实现页面的逻辑路由、组件缓存等功能。

安装 Vue Router

首先安装 Vue Router：

npm install vue-router

基本使用

定义路由：创建路由对象，定义不同的路由和对应的组件。
挂载路由：在应用实例中使用 router 选项。

示例代码

首先，创建路由配置文件 router.js：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

然后，在主应用文件中使用路由：

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

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

在 App.vue 中使用 <router-view> 显示当前路由的组件：

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

动态路由

动态路由允许根据路径参数动态加载组件。例如，可以创建一个路由来处理 /user/:id 的路径，其中 :id 是动态参数。

示例代码

在 router.js 中配置动态路由：

import User from './components/User.vue';

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
});

在 User.vue 中访问路径参数：

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

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

编程式导航

除了通过 <router-link> 标签进行导航，还可以使用编程方式导航。例如，可以在方法中调用 router.push 方法来导航到新的路由。

示例代码

在组件中使用编程式导航：

methods: {
  goToUser() {
    this.$router.push({ name: 'user', params: { id: 123 } });
  }
}

示例组件代码

以下是一个简单的示例组件 Home.vue 和 About.vue：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

Vuex状态管理基础

Vuex 是 Vue.js 的状态管理库，用于集中管理应用的状态。它提供了一个全局可用的状态树，使得数据能够被所有组件访问。Vuex 的核心概念包括状态（state）、突变（mutations）、动作（actions）、计算属性（getters）和模块（modules）。

安装 Vuex

首先安装 Vuex：

npm install vuex

基本使用

创建 Vuex 实例：创建一个 Vuex 实例对象，定义状态、突变、动作和计算属性。
挂载 Vuex 实例：在应用实例中使用 store 选项。

示例代码

首先，创建 Vuex 状态管理文件 store.js：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

然后，在主应用文件中使用 Vuex 实例：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

在组件中访问 Vuex 状态：

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

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};
</script>

模块化

模块化允许将复杂的状态管理拆分为多个小模块，每个模块包含独立的状态、突变、动作和计算属性。

示例代码

创建一个模块 module.js：

const module = {
  state: {
    user: 'John Doe'
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    setUser({ commit }, user) {
      commit('setUser', user);
    }
  },
  getters: {
    user: state => state.user
  }
};

export default module;

在 store.js 中引入模块：

import Vue from 'vue';
import Vuex from 'vuex';
import module from './module';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  },
  modules: {
    module
  }
});

在组件中访问模块中的状态：

<template>
  <div>
    <p>User: {{ user }}</p>
    <button @click="changeUser">Change User</button>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.getters['module/user'];
    }
  },
  methods: {
    changeUser() {
      this.$store.dispatch('module/setUser', 'Jane Doe');
    }
  }
};
</script>

Vue项目实战

构建一个简单的待办事项应用

待办事项应用是前端开发中最常见的示例之一，它可以帮助用户管理任务列表。本节将展示如何使用 Vue 实现一个简单的待办事项应用。

功能需求

添加任务：用户可以输入任务内容，并添加到列表中。
删除任务：用户可以删除列表中的任务。
标记任务完成：用户可以通过点击任务前的复选框来标记任务为完成。

实现步骤

创建 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。
编写 HTML 模板：创建相应的 HTML 结构。
编写 JavaScript 代码：处理任务的添加、删除和标记完成。
编写样式：为应用添加必要的样式。

示例代码

首先，创建 Vue 项目：

vue create todo-app

然后，在 src/App.vue 文件中编写应用代码：

<template>
  <div id="app">
    <h1>待办事项应用</h1>
    <input v-model="newTodo" placeholder="添加新任务" @keyup.enter="addTodo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id" @click="toggleComplete(todo)">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(todo)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: 1, text: '学习 Vue', completed: false },
        { id: 2, text: '完成项目', completed: false },
        { id: 3, text: '部署应用', completed: false }
      ]
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return;
      this.todos.push({
        id: this.todos.length + 1,
        text: this.newTodo,
        completed: false
      });
      this.newTodo = '';
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(t => t !== todo);
    },
    toggleComplete(todo) {
      todo.completed = !todo.completed;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.completed {
  text-decoration: line-through;
  color: #ccc;
}
</style>

运行应用

在命令行中运行以下命令启动开发服务器：

npm run serve

在浏览器中访问 http://localhost:8080 查看应用。

项目部署到线上服务器

部署 Vue 项目到线上服务器通常需要先构建项目，然后将构建后的静态文件上传到服务器。以下是具体的步骤：

构建项目

使用 npm run build 命令构建 Vue 项目，将会在 dist 目录生成静态文件。

示例代码

在命令行中运行以下命令：

npm run build

构建完成后，会在 dist 目录生成 index.html 和其他静态文件。

上传文件

将构建后的文件上传到服务器，例如使用 scp 或者 FTP 工具上传文件到服务器的指定目录。

示例代码

假设服务器地址为 192.168.1.1，用户名为 user，密码为 password，上传目录为 /var/www/html：

scp -r dist/* user@192.168.1.1:/var/www/html

配置服务器

确保服务器已经安装了必要的运行环境（如 Nginx 或 Apache），并正确配置了服务器的静态文件服务。

示例代码

假设使用 Nginx 作为服务器，配置文件 nginx.conf 中的配置如下：

server {
  listen 80;
  server_name example.com;

  root /var/www/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

测试项目

在服务器上启动 Nginx 或 Apache 服务，然后在浏览器中访问服务器的 URL 查看部署的 Vue 项目。

示例代码

启动 Nginx 服务：

sudo systemctl start nginx

访问 http://example.com 查看应用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

紫衣仙女

手记
篇

粉丝

71

获赞与收藏

334

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue入门教程：从零开始搭建你的第一个Vue项目

变量绑定

事件处理

示例代码

插值表达式

指令

事件处理器

示例代码

生命周期钩子

示例代码

基本结构

示例代码

使用组件

使用 Props

示例代码

使用 $emit

示例代码

示例代码

安装 Vue Router

基本使用

示例代码

动态路由

示例代码

编程式导航

示例代码

示例组件代码

安装 Vuex

基本使用

示例代码

模块化

示例代码

功能需求

实现步骤

示例代码

运行应用

构建项目

示例代码

上传文件

示例代码

配置服务器

示例代码

测试项目

示例代码

阅读免费教程

使用 `$emit`