首页手记 Vue资料入门教程：从零开始学习Vue.js

Vue资料入门教程：从零开始学习Vue.js

标签：

Vue.js

概述

Vue.js 是一个轻量级且易于学习的前端框架，广泛应用于各种规模的项目中。本文将详细介绍 Vue.js 的特点、应用场景、环境搭建、基础语法以及组件化开发等内容，帮助读者全面了解和掌握 Vue.js。此外，文章还包括路由与状态管理的实现方法，以及通过一个小项目的实战来加深理解。这里提供了丰富的 Vue资料，帮助开发者快速入门并深入学习Vue.js。

Vue.js 简介

什么是 Vue.js

Vue.js 是一个轻量级的前端框架，由尤雨溪（Evan You）在 2014 年开发。它是一个用于构建用户界面的渐进式框架，能够轻松地嵌入到现有的项目中。Vue.js 旨在通过组件化开发、响应式数据绑定和高效的渲染更新机制来简化前端开发。

Vue.js 的特点与优势

Vue.js 具有以下特点和优势：

轻量级：Vue.js 的体积小，初始加载速度快，适合各种规模的应用。
渐进式：Vue.js 可以逐步集成到现有的项目中，也可以在大型应用程序中构建复杂界面。
易于学习：Vue.js 的语法简单明了，上手容易。
双核心：Vue.js 支持两种核心：服务端渲染（SSR）和客户端渲染（CSR），为不同场景提供灵活性。
组件化：Vue.js 支持高度可复用的组件，有利于模块化开发。
响应式：Vue.js 使用数据绑定和计算属性来实现页面的动态更新。
可扩展性：Vue.js 提供了丰富的插件和工具，如 Vuex 和 Vue Router。

Vue.js 的应用场景

Vue.js 很适合用于以下场景：

单页面应用：Vue.js 的路由管理使得单页面应用开发变得简单。
大型前端项目：Vue.js 的组件化开发使得代码组织更加清晰。
后端渲染：Vue.js 支持服务端渲染，加速页面首次加载速度。
混合开发：Vue.js 可以与原生应用结合，实现混合开发。
动态网站：Vue.js 的响应式特性使其非常适合构建复杂的动态网站。

例如，在单页面应用中，可以使用 Vue Router 实现页面导航：

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
    }
  ]
});

在大型前端项目中，利用组件化开发，可以更好地管理复杂的界面逻辑：

Vue.component('my-component', {
  template: '<div>A custom component</div>'
});

在后端渲染场景中，可以使用 Nuxt.js 实现服务端渲染：

npm install -g @nuxt/cli
npx create-nuxt-app my-nuxt-project

在混合开发中，可以使用 Vue Native 与原生应用结合：

import Vue from 'vue';
import VueNative from 'vue-native';

Vue.use(VueNative);

Vue.js 环境搭建

安装 Node.js 与 npm

首先需要安装 Node.js 和 npm。Node.js 是一个开源的、跨平台的 JavaScript 运行环境，而 npm 是 Node.js 的包管理工具。访问 Node.js 官方网站下载并安装最新版本的 Node.js。安装完成后，可以通过以下命令验证安装是否成功：

node -v
npm -v

这两个命令会返回 Node.js 和 npm 的版本号，说明安装成功。

创建 Vue.js 项目

安装完 Node.js 和 npm 后，可以开始创建 Vue.js 项目。有两种主要的方法来创建 Vue.js 项目：手动创建和使用 Vue CLI 快速搭建。

手动创建项目

手动创建项目需要先创建一个项目目录，然后安装 Vue.js。以下是一个例子：

mkdir my-vue-project
cd my-vue-project
npm install vue

接下来，创建一个 main.js 文件，并在其中引入 Vue.js：

import Vue from 'vue';

new Vue({
  el: '#app',
  template: '<div id="app">Hello, Vue!</div>',
  mounted() {
    console.log('Vue instance mounted');
  }
});

创建一个 HTML 文件（例如 index.html），并引入 main.js：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Example</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

使用 Vue CLI 快速搭建项目

Vue CLI 是一个命令行工具，可以快速搭建 Vue.js 项目。首先，安装 Vue CLI：

npm install -g @vue/cli

安装完成后，使用以下命令创建一个新的 Vue.js 项目：

vue create my-vue-project

按照提示选择所需的配置，例如项目结构、配置预编译器等。完成后，进入项目目录并启动开发服务器：

cd my-vue-project
npm run serve

这将启动开发服务器，并打开浏览器自动访问开发服务器地址。

Vue.js 基础语法

模板语法

Vue.js 使用模板语法来将 DOM 结构和数据绑定在一起。模板语法使用双大括号 {} 来插入数据，使用 v- 开头的指令来添加行为。

插值

插值是指在 HTML 中插入数据。例如：

<div id="app">
  <span>Message: {{ message }}</span>
</div>

在 main.js 中定义 message 数据：

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

指令

指令用于执行 DOM 操作。例如 v-if 和 v-for：

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

在 main.js 中定义 items 数据：

new Vue({
  el: '#app',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3']
  }
});

数据绑定

Vue.js 使用数据绑定来实现视图和数据之间的同步。数据绑定分为两种形式：单向绑定和双向绑定。

单向绑定

单向绑定通过 v-bind 指令实现。例如：

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

双向绑定

双向绑定通过 v-model 指令实现。例如：

<div id="app">
  <input v-model="message" />
  <span>{{ message }}</span>
</div>

在 main.js 中定义 message 数据：

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

计算属性与侦听器

计算属性与侦听器用于处理复杂的逻辑和数据转换。

计算属性

计算属性基于依赖缓存，只有依赖发生变化时才会重新计算。例如：

<div id="app">
  <span>{{ fullName }}</span>
</div>

在 main.js 中定义计算属性：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

侦听器

侦听器用于监听数据的变化并执行相应的操作。例如：

<div id="app">
  <input v-model="message" />
  <span>{{ messageLength }}</span>
</div>

在 main.js 中定义侦听器：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    messageLength: function () {
      return this.message.length;
    }
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log('Message changed from ' + oldValue + ' to ' + newValue);
    }
  }
});

Vue.js 组件化开发

Vue.js 的组件化开发使得代码更加模块化和复用。组件是可复用的 Vue 实例，可以包含自己的模板、样式和逻辑。

创建组件

创建组件需要定义一个 Vue 实例，并通过 Vue.component 或 setup 函数来注册组件。

基础组件

通过 `Vue.component` 注册

Vue.component('my-component', {
  template: '<div>A custom component</div>'
});

在 HTML 中使用组件：

<div id="app">
  <my-component></my-component>
</div>

通过 `setup` 函数注册

import { createApp, h, defineComponent } from 'vue';

const app = createApp({
  setup() {
    return () => h('div', 'A custom component');
  }
});

app.mount('#app');

带有数据和方法的组件

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, custom component!'
    };
  }
});

在 HTML 中使用组件：

<div id="app">
  <my-component></my-component>
</div>

传递数据与事件

组件之间可以传递数据和事件。传递数据使用 props，传递事件使用 v-bind 和 v-on。

传递数据

定义 props 来接收父组件传递的数据：

Vue.component('child-component', {
  props: ['parentMessage'],
  template: '<div>{{ parentMessage }}</div>'
});

在父组件中传递数据：

<div id="app">
  <child-component parent-message="Hello from parent"></child-component>
</div>

传递事件

定义 emit 方法来触发子组件的事件：

Vue.component('child-component', {
  props: ['parentMessage'],
  template: '<div @click="sendClickMessage">{{ parentMessage }}</div>',
  methods: {
    sendClickMessage: function () {
      this.$emit('custom-click', 'Click message from child');
    }
  }
});

在父组件中监听事件：

<div id="app">
  <child-component parent-message="Hello from parent" @custom-click="handleClick"></child-component>
</div>

在父组件中处理事件：

new Vue({
  el: '#app',
  methods: {
    handleClick: function (message) {
      console.log(message);
    }
  }
});

组件的复用与管理

组件可以作为独立的模块进行复用。通过组件库和组件管理工具，可以更好地组织和管理组件。

组件库

使用组件库可以快速构建界面。一些流行的组件库有 Element UI、Ant Design Vue、Vuetify 等。

组件管理

组件管理可以使用 Vue CLI 提供的 vue add 命令添加和管理组件。例如：

vue add vue-router
vue add vuex

这些命令会帮助你集成 Vue Router 和 Vuex 到项目中。

Vue.js 路由与状态管理

使用 Vue Router 实现页面导航

Vue Router 是 Vue.js 官方的路由管理器。它可以实现页面的导航和路由配置。

安装 Vue Router

npm install vue-router

配置路由

定义路由配置：

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
    }
  ]
});

在 main.js 中引入路由配置：

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></router-view>
  </div>
</template>

嵌套路由

嵌套路由可以实现更复杂的页面结构：

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

Vue.use(Router);

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

在 App.vue 中使用嵌套路由：

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

路由守卫

路由守卫可用于在导航之前执行验证操作：

export default new Router({
  routes: [
    // ...
  ],
  beforeEnter: (to, from, next) => {
    console.log('Navigating from', from.name, 'to', to.name);
    next();
  }
});

Vuex 的安装与基本用法

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

安装 Vuex

npm install vuex

创建 Vuex Store

创建 store/index.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) {
      return state.count;
    }
  }
});

在 main.js 中引入 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>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

状态管理的基本概念

State：集中存储应用的状态。
Mutations：用于修改状态。是同步的，需要遵循一定的规则。
Actions：用于异步操作。可以调用 Mutation 来提交状态更新。
Getters：获取状态。可以用来计算状态的派生数据。

例如，通过 Vuex 管理一个简单的计数器：

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) {
      return state.count;
    }
  }
});

在组件中使用 Vuex 管理计数器状态：

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

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

Vue.js 项目实战

小项目实战

创建一个小项目来实际应用前面所学的内容。例如，创建一个简单的待办事项（To-Do）应用。

创建项目结构

mkdir todo-app
cd todo-app
vue create todo-app
cd todo-app
npm run serve

编写代码

在 src/router/index.js 中定义路由：

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

Vue.use(Router);

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

在 src/store/index.js 中定义 Vuex：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    removeTodo(state, todo) {
      state.todos = state.todos.filter(t => t !== todo);
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo);
    },
    removeTodo({ commit }, todo) {
      commit('removeTodo', todo);
    }
  },
  getters: {
    todos: state => state.todos
  }
});

在 src/components/Home.vue 中编写待办事项组件：

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待办事项" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapActions(['addTodo', 'removeTodo'])
  }
};
</script>

运行项目

运行项目：

npm run serve

打开浏览器访问开发服务器地址，可以看到一个简单的待办事项应用。

常见问题与调试技巧

常见问题

组件未更新：确保组件的 data 和 props 中的数据发生变化。
路由跳转失败：检查路由配置是否正确，是否存在未定义的路由。
状态管理出错：确保 Vuex 的状态更新符合规范，避免直接修改状态。

调试技巧

Vue Devtools：使用 Vue Devtools 插件调试 Vue.js 应用。
console.log：在关键位置添加 console.log 输出调试信息。
断点调试：使用浏览器开发者工具设置断点调试。

Vue.js 社区资源与进阶学习方向

社区资源

Vue 官方文档：提供详细的 API 文档和指南。
Vue 官方论坛：社区支持和交流。
Vue.js 学习资源：慕课网、MDN 等平台提供丰富的学习资源。
Vue CLI：快速搭建 Vue.js 项目，推荐使用 Vue CLI 进行项目搭建。

进阶学习方向

Vue Router：深入了解路由管理。
Vuex：深入学习状态管理。
Vue CLI：掌握 Vue CLI 的高级用法。
Vue Composition API：了解 Vue 3 中的新 API 用法。
TypeScript 与 Vue：学习如何使用 TypeScript 进行 Vue 开发。

通过这些资源和方向，可以进一步提升你的 Vue.js 技能，开发更复杂和高效的 Vue.js 应用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

一只名叫tom的猫

手记
篇

粉丝

62

获赞与收藏

331

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31416 348

网络编程入门教程

20个小节 12873 242

Pandas 入门教程

25个小节 18758 351

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空