没时间学 Vue
文章平均质量分 94
可乐天尊
这个作者很懒,什么都没留下…
展开
-
没时间学 Vue (14) —— 组件(三):双向数据传递
上一篇 《没时间学 Vue (13) —— 绑定(五):计算属性和侦听器》中 “乱入” 讲了计算属性和侦听器,本篇咱们接着《没时间学 Vue (12) —— 组件(二):组件的创建、使用和数据传递》,继续讲组件的数据传递。1、组件把数据传递给使用者我们前篇的例子中,组件本身只有展示功能,而没有编辑功能 —— 也就是没有各种 <input> 的功能。实际的项目中会用到这类组件,但也有不少情况下会用到带编辑功能的组件 —— 比如说,基于某些数据字典(Master)数据的选择组件(如:权限、用原创 2021-04-12 22:45:56 · 245 阅读 · 0 评论 -
没时间学 Vue (13) —— 绑定(五):计算属性和侦听器
上一篇《没时间学 Vue (12) —— 组件(二):组件的创建、使用和数据传递》中,我们遇到了 “冻龄” 的问题。本篇,我们来拆解一下这个问题,并且引入可能的解决方案 —— 计算属性和侦听器。Vue 官方的介绍在:https://cn.vuejs.org/v2/guide/computed.html。1、问题的原因我们在年龄组件 Age.vue 中,是这样计算和显示年龄的 。貌似年龄只在初始时计算了一次,之后无论生日的数据如何变化都没有更新。问题有了,先不要着急找解决.原创 2021-04-11 22:03:26 · 258 阅读 · 0 评论 -
没时间学 Vue (12) —— 组件(二):组件的创建、使用和数据传递
前一篇我们简介了组件,并且以 “页面级” 的组件为中心演示了 “单文件组件” 的写法,算是开了个头。本篇我们继续说组件,尤其是被其他组件使用的组件要怎么创建、使用,以及组件和使用者之间怎么传递数据。我们仍然基于项目中实际会用到的“单文件组件” 、而不是 Vue.component() 这种方式来创建组件,虽然本质上单文件组件会被转换成 Vue.component() 。如果有兴趣了解以下 “真正的” 组件定义方式的话,可以抽时间看一下:组件基础 - 基本示例 Vue.component(.原创 2021-04-09 23:08:36 · 266 阅读 · 0 评论 -
没时间学 Vue (11) —— 组件(一):最基本的单文件组件
本篇开始会涉及到 Vue (以及其他前端框架)中最为滥用和难以拿捏的内容 —— 组件(Component)。Vue 官方相关的说明资料如下,不过我们还是会基于 “功利的实用主义” 跳着来讲。组件基础 组件注册 单文件组件 示例:创建一个基于 CMS 的博客1、组件是什么抛开各种枯燥的官方解释,我们先从几个例子入手来直观地理解组件是什么。1)不使用 Vue 脚手架时的编码方式:我们在 《没时间学 Vue (9) —— 小结(一):绑定 + 渲染 + 事件处理,你已经很厉害了》.原创 2021-04-08 22:05:58 · 212 阅读 · 0 评论 -
没时间学 Vue (10) —— 实践(一):第一个 Vue 项目
之前我们已经把 Vue 中最为核心的 “绑定”、“渲染” 和 “事件处理” 中最常用和基本的内容,都掰碎过了一遍。接下来,我们要稍微脱离一下 Vue 的官方资料,讲一讲实战中如何快速上手 —— 你会发现,跟之前看到的例子很不一样。时间宝贵,我们等不到武装到了牙齿才开着飞机去轰炸地上的绵羊,现在手里有了 AK47 就可以在实战中快速成长了。不过,我们仍然重申一下前面提到的几个最基本的原则,它们不能保佑你刀枪不入战无不胜,但是可以给你指明前进的方向。花时间掌握关键点 —— 思路总体正确即可,其原创 2021-04-08 12:26:24 · 229 阅读 · 0 评论 -
没时间学 Vue (9) —— 小结(一):绑定 + 渲染 + 事件处理,你已经很厉害了
待定原创 2021-04-02 13:55:30 · 130 阅读 · 0 评论 -
没时间学 Vue (8) —— 事件处理(一):简单 DOM 事件的处理方式
待定原创 2021-04-01 21:28:49 · 554 阅读 · 0 评论 -
没时间学 Vue (7) —— 渲染(二):条件渲染 v-if
上一篇说了列表渲染 v-for,本篇继续讲渲染中的 条件渲染 v-if 。Vue 官方的说明在:https://cn.vuejs.org/v2/guide/conditional.html。1、v-if条件渲染,顾名思义,就是 “在某种条件下才渲染” 以及 “在其他条件下不渲染” —— 典型的 if-else 场景。比如说,登录到某个系统的时候,可以按照 “账户 + 密码” 的方式登录,也可以按照 “电话号码 + 验证码” 的方式的登录。简易版的画面效果,大概是这样的:(没用 C..原创 2021-03-31 20:39:40 · 423 阅读 · 0 评论 -
没时间学 Vue (6) —— 渲染(一):列表渲染 v-for
之前我们一直都在说“绑定”,从现在开始会发散和穿插着说些其他的内容。在最最基本的知识这块,我们还有这么一些要说的:1)绑定:用得比较少的知识点,如: v-html、v-once 和日期时间类的 <input>;2)渲染:在上一篇你可能也注意到了,选项要是一个个手写的话,还是有些费事的 —— 这就是渲染的一个例子;3)事件处理:好不容易能接收用户数据了,但是要怎么处理 “按钮点击”、“选中某个项目” 这些事件呢?基于 “功利的实用主义”,掐指一算,咱们还是先从 2)渲染开始讲.原创 2021-03-29 22:26:33 · 322 阅读 · 0 评论 -
没时间学 Vue (5) —— 绑定(四):面向单选、复选和选择框的 v-model
上一篇讲了各种各样的文本框,今天接着说其他类型的输入组件。本着第一性原理的思路,我们还是按照下面的套路来折腾 v-model 和这些输入组件。1)看一下最核心的 HTML 原生元素的用法; 还是要多看https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls。2)试着用 v-model 来折腾一下;3)做一个 <div> 把折腾后的 v-model 的结果显示出来,...原创 2021-03-29 19:37:36 · 393 阅读 · 0 评论 -
没时间学 Vue (4) —— 绑定(三):面向各种文本框的 v-model
今天接着将 v-model,顺带过一下常见的表单组件:<input>、<textarea> 和 <select>。主要的内容,也还在 Vue 官方文档上:https://cn.vuejs.org/v2/guide/forms.html。上述表单组件的较为详细的描述,还是参照:https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls。开工之前,咱们再提一个.原创 2021-03-29 12:28:42 · 489 阅读 · 0 评论 -
没时间学 Vue (3) —— 绑定(二):v-bind 和 v-model
接下来我们还是继续讲 “绑定”—— 不要吐血,使用 Vue 开发时会用到非常非常多的绑定,而我们在上一篇讲的只是非常非常小的一部分。咱们上一篇讲的绑定,都是这种风格的:如果我们只用 div 元素—— 不用图片,不用链接,不用列表,也不用文本框、单选框、复选框、按钮等的话,那么上面那种风格的确就够用了。所以,接下来咱们重点吧啦一下这类标签的 “绑定” 用法 —— 主要内容在:https://cn.vuejs.org/v2/guide/syntax.html。1、v-bind (..原创 2021-03-28 21:47:19 · 1019 阅读 · 0 评论 -
没时间学 Vue (2) —— 绑定(一):简介
第 (1) 篇啰嗦了半天,现在让我们正式来学一下 Vue。常用的 Vue 功能可能有 30% 都在Vue 介绍这篇文章里面,我们换个视角掰碎了来学习 —— 关键是把握要点。我们也假定你没时间学 HTML、CSS 和 JavaScript 这些基础的内容,也顺带简单提一下。具体细节的内容,你还是得看前文https://blog.csdn.net/planet7/article/details/115279727里面提到的各个网站。1、绑定比如说,我们要显示一段文本 “没时间学 Vu...原创 2021-03-28 18:26:36 · 187 阅读 · 0 评论 -
没时间学 Vue (1) -—— 开篇
时间很宝贵。年轻时忙着赚钱打拼、狐朋狗友;结婚了忙着油盐酱醋、娃前娃后。好不容易能挤一点儿时间出来,大脑的系统一又要拿走大部分上网追剧、休养生息。世界变化很快,后浪来势凶猛,压力不觉山大。偶尔打起精神想充充电,却又没时间。好在没时间也有没时间的打法,花 20% 的时间,可能就能达到 80% 的水平。当然,如果想达到再高一级的 20% 的水平,你还得再花 80% 的时间。时间宝贵,没时间学 Vue 的第一条也是最重要的一条原则就是:花时间掌握关键点 —— 思路..原创 2021-03-28 16:02:03 · 1772 阅读 · 9 评论