【Vue 牛刀小试】:第十六章 - 针对传统后端开发人员的前端项目框架搭建

前言

        在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中。伴随着 Node.js 的出现,以及 React、Angular、Vue 这类的前端 MVVM 框架的发展,前端越来越像后端靠拢,前端工程化的思想开始出现。现在的前端开发,已经不再只是一个 html 页面,上面引用各种 js、css 文件就可以完成开发的了。
        与后端类似,前端开始出现各种已经很完善的框架模板、开始出现针对前端组件包的管理工具、各种各样的单元测试库,以及针对前端所特有的 js、css、image…这种静态资源文件的模块打包器。那么,从本篇文章开始,我们就从零开始,结合之前学习的 Vue 相关的基础知识,通过 Vue CLI 和 Element UI 去搭建一个基于 Vue 的 SPA 前端项目框架模板。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter03-Silver Use Vue CLI To Build Vue Project

【Vue 牛刀小试】:第十五章 - 传统开发模式下的 axios 使用入门

前言

        在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,能够非常便捷的发起 http 请求也占有非常重要的地位。
        既然我们已经开始使用 Vue 进行前端开发,抛弃了对页面 DOM 元素的操作,难道,为了方便的发起 http 请求,还需要在项目中加载 jquery 或者是手动创建 http 请求吗?
        答案当然是不用的,作为目前主流的前端框架,开发者、社区早已经为我们提供好了解决方案。随着 Vue 作者尤雨溪宣布不再维护 vue-resource,转而推荐大家使用 axios,目前在 Vue 社区中 axios 开始占据 http 库的主导地位,所以这一章我们就介绍下如何使用 axios 发起 http 请求。
        系列目录地址:Vue.js 牛刀小试
        仓储地址(前端):Chapter02-Bronze Use Axios To Make HTTP Request
        仓储地址(后端):Chapter02-Bronze ASP.NET Core Sample API

【Vue 牛刀小试】:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

前言

        在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由、命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传递。通过学习我们可以发现,在实现路由间的参数传递时,我们将 Vue Router 与我们的组件强耦合在一起,这无疑是不合适的,那么本章我们就来学习,如何实现组件和 Vue Router 之间的解耦。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Decouple Component from Router

【Vue 牛刀小试】:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

前言

        在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由。但是在实际使用中,我们经常会遇到路由传参、或者一个页面是由多个组件组成的情况。本章,我们就来介绍下在这两种情况下 Vue Router 的使用方法以及一些可能涉及到的概念。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Routing Pass in Vue.js

【Vue 牛刀小试】:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

前言

        前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的。那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由与我们后端的路由有什么异同呢。本章,我们就来简单介绍下前端路由的概念,以及如何在 Vue 中使用 Vue Router 来实现我们的前端路由。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Build Router in Vue.js

【Vue 牛刀小试】:第十一章 - Vue 中 ref 的使用

前言

        在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据。难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能,当然,这也只是 ref 其中一项的功能。本章,我们就来学习 Vue 中 ref 的相关使用。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Get Elements

【Vue 牛刀小试】:第十章 - 组件间的数据通信

前言

        在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data、prop 选项。在之前的学习中有提到过,组件是 Vue 中的一个非常重要的概念,我们通过将页面拆分成一个个独立的组件,从而更好地实现代码复用,使我们的代码更加简洁,容易维护。既然在 Vue 中我们会大量的使用到组件,必定会涉及到组件之间的通信,那么本章我们就来学习,如何实现组件间的数据交互。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Component’s Communication

【Vue 牛刀小试】:第九章 - 组件基础再探(data、props)

前言

        在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件。不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vue 实例也只是拥有些许的差异。本章,我们将继续学习组件的相关基础知识,了解 Vue 的组件中的 data、prop 选项的使用。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Component Advance

【Vue 牛刀小试】:第八章 - 组件的基础知识

前言

        在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作。
        这里就会引出一个问题,就像我们刚开始学习 C# 的时候把全部的代码一股脑的写到 Main 方法中,现在我们把所有对于 Vue 实例的操作全部写在一块,这必然会导致 这个方法又长又不好理解。
        在 C# 的学习过程中,随着不断学习,我们开始将一些相似的业务逻辑进行封装,重用一些代码,从而达到简化的目的。那么,如何在 Vue 中如何实现相似的功能呢?这里就需要提到组件这一概念了,本章,我们就来学习 Vue 中组件的基础知识。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter02-Bronze Component Concept

【Vue 牛刀小试】:第七章 - Vue 实例的生命周期

前言

        在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。在这个过程中,Vue 会运行一些生命周期钩子函数,而我们则可以在钩子函数中编写一些自定义方法,用以在 Vue 的整个生命周期中某些阶段实现我们特殊需求。那么,本章,我们就来了解 Vue 实例的生命周期钩子函数。
        系列目录地址:Vue.js 牛刀小试
        仓储地址:Chapter01-Rookie Lifecycle Hooks

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×