vue快速入门在线阅读

2024-08-28

vue 快速入门系列

vue 快速入门(未完结,持续更新中...) 前言为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 DOM 之间的映射关系,就可以将状态渲染成视图.状态到视图的转换,框架会帮我们做,不需要我们手动去操作 DOM.我们只需要关注状态的维护,而不用再关心 DOM 的操作. 笔者想通过 vue 来探索一下这其中的奥秘. vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户

vue 快速入门系列 —— 虚拟 DOM

其他章节请看: vue 快速入门系列虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对象. 正常的 dom 节点在 html 中是这样表示: <div class='testId'> <p>你好</p> <p>欢迎光临</p> </div> 而在虚拟 dom 中大概是这样: { tag: 'div', attributes

vue 快速入门系列 —— 初步认识 vue

其他章节请看: vue 快速入门系列初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段的使用 vue,不必一开始就使用所有的东西. 命令式框架 vs 声明式框架 jQuery 是命令式操作 DOM 的前端框架.比如点击一个新增按钮,需要出现一个录入信息的弹框,在 jQuery 中,我们需要在新增按钮被点击的时候,发出一个命令,让录入信息的弹框显示.随着交互越来越复杂,代码中会有相当一

vue 快速入门系列 —— 侦测数据的变化 - [基本实现]

其他章节请看: vue 快速入门系列侦测数据的变化 - [基本实现] 在初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中的一行文本(现在你看到我了)就不见了. 这里涉及到 Vue 一个重要特性:响应式系统.数据模型只是普通的 JavaScript 对象,当我们修改时,视图会被更新.而变化侦测是响应式系统的核心. Object的变化侦测下面我们就来模拟侦测数据变化的逻辑. 强调一下我们要做的事情:数据变化,通知到外界

vue 快速入门系列 —— 侦测数据的变化 - [vue 源码分析]

其他章节请看: vue 快速入门系列侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue 是如何实现数据侦测的. Tip: 以下代码出自 vue.esm.js,版本为 v2.5.20.无关代码有一些删减.中文注释都是笔者添加. /** * Define a property. * 定义属性的方法 */ function def (obj, key, val, enumerable) {

vue 快速入门系列 —— vue 的基础应用（上）

其他章节请看: vue 快速入门系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello-world.对 vue 已经有了一个大概的印象. 接下来我们应该掌握 vue 的最基础知识,学会 vue 的基本应用. 比较好的方法就是花个几天的时间将 vue 官网的基础篇尽量走一遍,写一写例子.以下是 vue 2.x 的基础篇的目录: - 教程 2.x - 基础 - 安装 - 介绍 - Vue

vue 快速入门系列 —— vue 的基础应用（下）

其他章节请看: vue 快速入门系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选项来做这件事.我们实现一个自定义树的组件.请看示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

vue 快速入门系列 —— vue loader 上

其他章节请看: vue 快速入门系列 vue loader 上通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和生成环境,开发环境提供本地服务器,有热模块替换,能使用 sass.es6等开发项目. 实际工作中我们可能会使用声明式框架 vue 或 react 来开发项目,而它们都提供了相应的脚手架.在学习 vue-cli(vue官方的脚手架)之前,我们先来玩一下 vue loader. Tip:本篇也可以称之为"

vue 快速入门系列 —— vue loader 下

其他章节请看: vue 快速入门系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS Modules 的一流集成,可以作为模拟 scoped CSS 的替代方案. Tip:请看下面的用法来了解 css modules. 用法将 App.vue 内容修改为: <template> <div> <p :class="$style.red">

vue 快速入门系列 —— vue loader 扩展

其他章节请看: vue 快速入门系列 vue loader 扩展在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue-router.vuex.axios.mockjs.i18n.jquery.lodash. 环境准备 Tip: 此环境本质就是"vue loader"一文最终生成的代码,略微精简一下:删除不必要的文件.wepback.config.js 注释掉 eslint 以及自定义 loader. 项

vue 快速入门系列 —— vue-cli 上

其他章节请看: vue 快速入门系列 Vue CLI 4.x 上在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这个官方的.成熟的脚手架. 分上下两篇进行,上篇主要是"基础",下篇主要是"开发" Tip:介绍顺序尽可能保持与官方文档一致介绍 vue-cli 是一个基于 vue.js 进行快速开发的完整系统. 让我们专注在撰写应用上,而不必花好几天去纠结配置的问题. Vue CLI

vue 快速入门系列 —— vue-cli 下

其他章节请看: vue 快速入门系列 Vue CLI 4.x 下在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这个官方的.成熟的脚手架. 分上下两篇进行,上篇主要是"基础",下篇主要是"开发" Tip:介绍顺序尽可能保持与官方文档一致准备环境注:本篇所有的实验都将基于项目 vue-example vue-example 通过 vue create 命令创建项目 vue-exa

vue 快速入门系列 —— vue-router

其他章节请看: vue 快速入门系列 Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌. 什么是路由路由就是根据不同的 url(网址) 返回不同的页面(数据).如果这个工作在后端做(或者说由后端程序员做),就是后端路由:在前端做就是前端路由. 绝大多数的网站是后端路由.流程就像这样: 浏览器输入 url,回车后端服务器接收到请求将请求(url)交给对应的处理逻辑 -- 有一个专门的正则配置列表

vue 快速入门系列 —— 使用 vue-cli 3 搭建一个项目（上）

其他章节请看: vue 快速入门系列使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好的方法是向优秀的项目学习,依葫芦画瓢. 这里通过研究 vue-admin-template 项目,逐一引入 element-ui.axios.mock.iconfont.nprogress.权限控制.布局.多环境(.env).跨域.vue.config.js,一步一步打造我们自己的架构. Tip:

vue 快速入门系列 —— 使用 vue-cli 3 搭建一个项目（下）

其他章节请看: vue 快速入门系列使用 vue-cli 3 搭建一个项目(下) 上篇我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续介绍权限控制.布局.多环境(.env).跨域.vue.config.js,一步一步构建我们自己的架构. 权限控制后端系统一开始就得考虑权限和安全的问题. 大概思路: 前端持有一份路由表,表示每个路由可以访问的权限(路由表也可以由后端生成,但感觉前端被后端支配,前端的权限也总是不安全的,所以后端权

vue 快速入门系列 —— 模板

其他章节请看: vue 快速入门系列模板前面提到 vue 中的虚拟 dom 主要做两件事: 提供与真实节点对应的 vNode 新旧 vNode 对比,寻找差异,然后更新视图 ①.vNode 从何而来? 前面也说了声明式框架只需要我们描述状态与 dom 之间的映射关系.状态到视图的转换,框架会给我们做. ②.用什么描述状态与 dom 之间的映射关系? Tip:jQuery 是命令式的框架,现代的 vue.react属于声明式框架. 简介首先公布问题 ② 的答案:用模板描述状态与 dom 之

vue 快速入门系列 —— Vue(自身) 项目结构

其他章节请看: vue 快速入门系列 Vue(自身) 项目结构前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目,了解它的目录结构,以及构建过程. vue 的目录结构将 vue 项目下载到本地 git clone git@github.com:vuejs/vue.git vuev2.5.20 - vuev2.5.20 - dist // 构建后的文件 - examples // 有几个用 vue 写的示例

vue 快速入门系列 —— 实例方法（或 property）和静态方法

其他章节请看: vue 快速入门系列实例方法(或 property)和静态方法在 Vue(自身) 项目结构一文中,我们研究了 vue 项目自身构建过程,也知晓了 import Vue from 'core/index' 就是引入 vue 的核心代码,该文件的前两行对应着 vue 的实例方法和静态方法(或称全局方法),本篇就和大家一起来看一下这两部分. // vuev2.5.20/src/core/index.js // 返回 Vue 构造函数,并准备好实例方法 import Vue fr

vue 快速入门系列 —— 侦测数据的变化 - [vue api 原理]

其他章节请看: vue 快速入门系列侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会通知外界,因此 vue 提供了 vm.$set() 和 vm.$delete() 来解决这个问题. vm.$watch() 方法赋予我们监听实例上数据变化的能力. 下面依次对这三个方法的使用以及原理进行介绍. Tip: 以下代码出自 vue.esm.js,版本为 v2.5.20.无关代码有一些删减.

vue 快速入门系列 —— Vue 实例的初始化过程

其他章节请看: vue 快速入门系列 Vue 实例的初始化过程书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码,你会发现每次调用 jQuery() 也会执行一个初始化的方法(即 jQuery.fn.init()).两者在执行初始化方法后都会返回一个实例(vue 实例或 jQuery 实例),而且在初始化过程中,都会做许多事情.本篇就和大家一起来看一下 vue 实例的初始化过程. Tip:本篇亦叫 Vue.pr

vue快速入门在线阅读

热门专题