首页手记 Vue入门教程：快速上手前端开发

Vue入门教程：快速上手前端开发

标签：

Vue.js

概述

Vue.js 是一个渐进式JavaScript框架，允许开发者逐步将项目迁移到Vue项目，提供简洁、灵活的特性。Vue以其轻量级、双向数据绑定、组件化、响应式等优势著称，易于学习且拥有丰富的生态系统。

Vue简介

Vue是什么

Vue.js 是一个渐进式 JavaScript 框架，由尤雨溪（Evan You）于2014年发布。它允许开发者逐步将一个项目迁移到 Vue 项目，而不是一次性替换整个框架。Vue 的设计理念是提供一个灵活的工具箱，让开发者可以选择需要的功能，而不需要承担一个庞大框架的负担。

如何安装Vue

Vue.js 安装有多种方式，包括全局安装 Vue CLI 和直接使用 CDN 引入。以下是通过 Vue CLI 全局安装 Vue 的步骤：

安装 Node.js: Vue CLI 需要 Node.js 环境，确保已安装 Node.js。
全局安装 Vue CLI: 打开终端，运行如下命令全局安装 Vue CLI：
```
npm install -g @vue/cli
```
创建新项目: 使用 Vue CLI 创建一个新的 Vue 项目：
```
vue create my-project
```

通过以上步骤，你已经成功安装了 Vue CLI 并创建了一个新的 Vue 项目。现在可以进入项目目录，并运行项目：

cd my-project
npm run serve

直接使用 CDN 引入 Vue 的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Vue CDN引入示例</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue via CDN!'
      }
    });
  </script>
</body>
</html>

Vue的特点和优势

Vue.js 以其简洁、灵活的特性著称，以下是 Vue 的一些主要特点和优势：

轻量级: Vue 的体积很小，压缩后仅约 20 KB（生产环境）。这使得它能够快速加载和执行，非常适合构建高效的前端应用。
双向数据绑定: Vue 支持双向数据绑定，这意味著视图的数据变化可以被反映到 DOM，反之亦然。这大大简化了前端开发中的数据管理。
组件化: Vue 的组件化开发模式，将应用拆分为可复用的小块，提高了代码的可维护性和可测试性。
响应式: Vue 基于数据的变化自动更新视图，无需手动去处理 DOM 更新。这使得开发变得简单且易于理解。
易于学习: Vue 的 API 简洁明了，即便是前端新手也能快速上手。
丰富的生态系统: Vue 有丰富的插件和工具支持，如 Vuex、Vue Router、Vue CLI 等，帮助开发者高效开发 Web 应用。

Vue基础语法

数据绑定

Vue 的数据绑定功能可以通过 v-bind 和 v-model 实现。以下是一个简单的例子，展示如何在 Vue 项目中使用数据绑定：

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

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

在上述代码中，{{ message }} 简单地绑定了一个数据属性 message，而 <input v-model="message"> 则将输入框的值绑定到 message。这样，输入框的内容变化会自动反映到 message，反之亦然。

计算属性和方法

计算属性是基于它们的依赖进行缓存的，只有依赖发生变化时才会重新计算。方法则是在每次调用时都重新求值。

<div id="app">
  <p>原始值: {{ text }}</p>
  <p>经过处理的值: {{ processedText }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '原始文本'
  },
  computed: {
    processedText: function () {
      return this.text.toUpperCase();
    }
  },
  methods: {
    reverseText: function () {
      return this.text.split('').reverse().join('');
    }
  }
});

在这个例子中，计算属性 processedText 会返回 text 的大写版本。如果 text 没有变化，计算属性的值将保持不变。而方法 reverseText 则会在每次调用时都重新执行，即使 text 未发生改变。

模板语法

Vue 使用基于 HTML 的模板语法。模板中的指令（以 v- 开头）会被编译成 JavaScript 取代了传统的 {{ }} 数据绑定语法。Vue 的模板语法包括但不限于 v-if、v-for 和 v-bind。

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <p v-if="type === 'A'">类型 A</p>
  <p v-else-if="type === 'B'">类型 B</p>
  <p v-else>其他类型</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    items: ['苹果', '香蕉', '橙子'],
    type: 'A'
  }
});

在上述代码中，v-for 指令用于创建一个列表，v-if 和 v-else-if 用于条件渲染。这些指令帮助你轻松地构建复杂的动态用户界面。

Vue组件化开发

组件的基本概念

组件是 Vue 中最核心的概念之一，一个组件可以包含 HTML、模板、样式、脚本等，是可复用的 Vue 实例。Vue 组件可以被看作是“可插拔”的 Vue 实例，可以在任何地方被组织和重用。

创建和使用组件

在 Vue 中，你可以使用 Vue.component 或单文件组件的方式创建组件。下面以 Vue.component 方式创建一个简单的组件：

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

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
});

new Vue({
  el: '#app'
});

属性和事件传递

在 Vue 中可以通过 props 向组件传递数据，也可以通过 emit 触发自定义事件。

<my-component v-bind:message="parentMessage" v-on:child-event="handleChildEvent"></my-component>

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }} <button @click="childEvent">发送事件</button></div>',
  methods: {
    childEvent: function () {
      this.$emit('child-event', '来自子组件的消息');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentMessage: '这是父组件的消息'
  },
  methods: {
    handleChildEvent: function (message) {
      console.log(message);
    }
  }
});

在这个例子中，v-bind:message 绑定了 parentMessage 到组件的 message 属性，而 v-on:child-event 向组件注册了一个自定义事件 child-event。当点击按钮时，子组件将触发这个事件，并传递一个消息。

Vue路由

Vue Router简介

Vue Router 是 Vue.js 的官方路由库，用于管理应用中的导航、路径参数、查询参数等。它可以帮助你根据 URL 载入相应的组件，实现单页面应用（SPA）。

配置路由

要使用 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({
  router,
  render: h => h(App)
}).$mount('#app');

路由的动态参数

路由可以携带动态参数，以便在不同的 URL 下显示不同的内容。例如：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

在组件中，你可以通过 this.$route.params.id 来获取动态参数：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class User extends Vue {
  mounted() {
    console.log(this.$route.params.id);
  }
}

Vue状态管理

Vuex简介

Vuex 是 Vue 专门为大型应用设计的状态管理工具，它提供了一个集中式的存储来管理应用的所有组件的状态。通过 Vuex，可以方便地管理和同步应用的状态。

安装和配置Vuex

要使用 Vuex，首先安装它：

npm install vuex

然后创建一个 Vuex store：

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

在 main.js 中引入并使用 store：

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

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

使用Vuex进行状态管理

在组件中，你可以通过 $store 访问 Vuex 的状态和方法：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  mounted() {
    console.log(this.$store.state.count); // 输出当前 count
    this.$store.commit('increment');      // 执行 mutations
    console.log(this.$store.state.count); // 输出更新后的 count
  }
}

实战项目

小项目实践

为了加深对 Vue 的理解，下面以一个简单的待办事项（Todo List）应用为例，展示如何从零开始构建一个 Vue 项目。

项目结构

- src
  - components
    - TodoItem.vue
  - App.vue
  - main.js
- package.json

组件

在 components/TodoItem.vue 中，定义一个表示待办事项的组件：

<template>
  <li>
    <input type="checkbox" v-model="done" />
    <span :class="{ done: done }">{{ text }}</span>
  </li>
</template>

<script>
export default {
  props: {
    text: String,
    done: Boolean
  }
};
</script>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>

主组件

在 App.vue 中，定义整个应用的结构：

<template>
  <div id="app">
    <input type="text" v-model="newTodo" @keyup.enter="addTodo" />
    <ul>
      <todo-item
        v-for="todo in todos"
        :key="todo.id"
        :text="todo.text"
        :done="todo.done"
        @remove="removeTodo"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue';

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: this.todos.length + 1,
          text: this.newTodo,
          done: false
        });
        this.newTodo = '';
      }
    },
    removeTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
    }
  }
};
</script>

主逻辑

在 main.js 中，运行应用：

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

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

状态管理

在 store/index.js 中，定义 Vuex store 来管理待办事项的状态：

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.splice(state.todos.indexOf(todo), 1);
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo);
    },
    removeTodo({ commit }, todo) {
      commit('removeTodo', todo);
    }
  },
  getters: {
    todos: state => state.todos
  }
});

项目部署介绍

要将 Vue 项目部署到生产环境，通常需要使用 Web 服务器或云服务提供商。以下是一些常用的部署方法：

使用 npm 构建生产版本：
```
npm run build
```
部署到 GitHub Pages：
- 在 package.json 中添加 "homepage": "https://username.github.io/repository"。
- 使用 npm run deploy 命令自动部署到 GitHub Pages。
示例代码：
```
npm run build
npm run deploy
```
部署到 Netlify：
- 使用 Netlify 提供的 GitHub 连接，自动部署项目。
示例代码：
```
npm run build
npm run netlify
```
部署到阿里云
- 通过阿里云服务器部署，将打包后的文件上传到服务器。

常见问题解答

Q：Vue 如何实现数据绑定？
A：Vue 使用 v-bind 和 v-model 指令来实现数据绑定。v-bind 用于单向数据绑定，v-model 用于双向数据绑定。

Q：如何处理组件间的通信？
A：组件间通信主要通过 props 和自定义事件（$emit 和 $on）实现。父组件通过 props 向子组件传递数据，子组件通过 $emit 触发自定义事件，父组件通过 $on 监听这些事件。

Q：如何使用 Vuex 管理状态？
A：通过定义 state、mutations、actions 和 getters，可以使用 Vuex 管理状态。mutations 用于更新状态，actions 用于异步操作，getters 用于获取状态。在组件中通过 this.$store.state、this.$store.commit 和 this.$store.dispatch 访问和操作状态。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕勒3428872

手记
篇

粉丝

13

获赞与收藏

51

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空