- 博客(14)
- 收藏
- 关注
RSS订阅原创 没时间学 Vue (14) —— 组件（三）：双向数据传递
上一篇 《没时间学 Vue (13) —— 绑定（五）：计算属性和侦听器》中 “乱入” 讲了计算属性和侦听器， 本篇咱们接着《没时间学 Vue (12) —— 组件（二）：组件的创建、使用和数据传递》，继续讲组件的数据传递。 1、组件把数据传递给使用者 我们前篇的例子中，组件本身只有展示功能，而没有编辑功能 —— 也就是没有各种 <input> 的功能。 实际的项目中会用到这类组件，但也有不少情况下会用到带编辑功能的组件 —— 比如说，基于某些数据字典（Master）数据的选择组件（如：权限、用
2021-04-12 22:45:56
295
原创 没时间学 Vue (13) —— 绑定（五）：计算属性和侦听器
上一篇《没时间学 Vue (12) —— 组件（二）：组件的创建、使用和数据传递》中，我们遇到了 “冻龄” 的问题。 本篇，我们来拆解一下这个问题，并且引入可能的解决方案 —— 计算属性和侦听器。 Vue 官方的介绍在：https://cn.vuejs.org/v2/guide/computed.html。 1、问题的原因 我们在年龄组件 Age.vue 中，是这样计算和显示年龄的 。 貌似年龄只在初始时计算了一次，之后无论生日的数据如何变化都没有更新。 问题有了，先不要着急找解决.
2021-04-11 22:03:26
302
原创 没时间学 Vue (12) —— 组件（二）：组件的创建、使用和数据传递
前一篇我们简介了组件，并且以 “页面级” 的组件为中心演示了 “单文件组件” 的写法，算是开了个头。 本篇我们继续说组件，尤其是被其他组件使用的组件要怎么创建、使用，以及组件和使用者之间怎么传递数据。 我们仍然基于项目中实际会用到的“单文件组件” 、而不是 Vue.component() 这种方式来创建组件，虽然本质上单文件组件会被转换成 Vue.component() 。 如果有兴趣了解以下 “真正的” 组件定义方式的话，可以抽时间看一下： 组件基础 - 基本示例 Vue.component(.
2021-04-09 23:08:36
312
原创 没时间学 Vue (11) —— 组件（一）：最基本的单文件组件
本篇开始会涉及到 Vue （以及其他前端框架）中最为滥用和难以拿捏的内容 —— 组件（Component）。 Vue 官方相关的说明资料如下，不过我们还是会基于 “功利的实用主义” 跳着来讲。 组件基础 组件注册 单文件组件 示例：创建一个基于 CMS 的博客 1、组件是什么 抛开各种枯燥的官方解释，我们先从几个例子入手来直观地理解组件是什么。 1）不使用 Vue 脚手架时的编码方式： 我们在 《没时间学 Vue (9) —— 小结（一）：绑定 + 渲染 + 事件处理，你已经很厉害了》.
2021-04-08 22:05:58
252
原创 没时间学 Vue (10) —— 实践（一）：第一个 Vue 项目
之前我们已经把 Vue 中最为核心的 “绑定”、“渲染” 和 “事件处理” 中最常用和基本的内容，都掰碎过了一遍。 接下来，我们要稍微脱离一下 Vue 的官方资料，讲一讲实战中如何快速上手 —— 你会发现，跟之前看到的例子很不一样。 时间宝贵，我们等不到武装到了牙齿才开着飞机去轰炸地上的绵羊，现在手里有了 AK47 就可以在实战中快速成长了。 不过，我们仍然重申一下前面提到的几个最基本的原则，它们不能保佑你刀枪不入战无不胜，但是可以给你指明前进的方向。 花时间掌握关键点 —— 思路总体正确即可，其
2021-04-08 12:26:24
281
原创 没时间学 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
510
原创 没时间学 Vue (6) —— 渲染（一）：列表渲染 v-for
之前我们一直都在说“绑定”，从现在开始会发散和穿插着说些其他的内容。 在最最基本的知识这块，我们还有这么一些要说的： 1）绑定：用得比较少的知识点，如： v-html、v-once 和日期时间类的 <input>； 2）渲染：在上一篇你可能也注意到了，选项要是一个个手写的话，还是有些费事的 —— 这就是渲染的一个例子； 3）事件处理：好不容易能接收用户数据了，但是要怎么处理 “按钮点击”、“选中某个项目” 这些事件呢？ 基于 “功利的实用主义”，掐指一算，咱们还是先从 2）渲染开始讲.
2021-03-29 22:26:33
360
原创 没时间学 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
454
原创 没时间学 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
563
原创 没时间学 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
1113
原创 没时间学 Vue (2) —— 绑定（一）：简介
第 (1) 篇啰嗦了半天，现在让我们正式来学一下 Vue。 常用的 Vue 功能可能有 30% 都在Vue 介绍这篇文章里面，我们换个视角掰碎了来学习 —— 关键是把握要点。 我们也假定你没时间学 HTML、CSS 和 JavaScript 这些基础的内容，也顺带简单提一下。 具体细节的内容，你还是得看前文https://blog.youkuaiyun.com/planet7/article/details/115279727里面提到的各个网站。 1、绑定 比如说，我们要显示一段文本 “没时间学 Vu...
2021-03-28 18:26:36
219
原创 没时间学 Vue (1) -—— 开篇
时间很宝贵。 年轻时忙着赚钱打拼、狐朋狗友；结婚了忙着油盐酱醋、娃前娃后。 好不容易能挤一点儿时间出来，大脑的系统一又要拿走大部分上网追剧、休养生息。 世界变化很快，后浪来势凶猛，压力不觉山大。 偶尔打起精神想充充电，却又没时间。 好在没时间也有没时间的打法，花 20% 的时间，可能就能达到 80% 的水平。 当然，如果想达到再高一级的 20% 的水平，你还得再花 80% 的时间。 时间宝贵， 没时间学 Vue 的第一条也是最重要的一条原则就是： 花时间掌握关键点 —— 思路..
2021-03-28 16:02:03
1841
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人