/vue-exercises

This is a small exercise for the beginner vue project, updated daily.

Primary LanguageJavaScript

Vue exercises demo


Vue

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

一、详情 :

该仓库收录平时搜集而来的有关 Vue 练手的项目, 如果您是大神那么请绕路。如果您是萌新, 那不妨拿几个 demo 来练练手, 还记得那句古话吗 ?

书读百遍,其义自见。 --- 自晋·陈寿《三国志·魏志·董遇传》

您会收获到 :
💑: 爱情
👍 : 鼓励
💡 : 知识

还等什么 ? 拿起您的键盘带上您的鼠标, 赶快搞起来吧 !!!

二、状态 :

三、目录 :

初级(语法篇) :

2020年 05月 28日更新

效果图 : 101.gif 简单的 todo list , 这是初学时的第一个案例 ...
难度: 【无】

效果图 : 101.gif 利用 Vue 会自动将 checkbox 的 value 值添加进 c-model 的机制, 实现一个一级的全选全否。
难度: [无]

效果图 : 101.gif **范围的各省市的 json 数据在 static/json/data.json 中。这个案例主要理清省、市、县, 三者之间视图上的行为关系, 通过更新各个 select 中数据还是比较好实现的。
难度: [★]

效果图 : 101.gif 数据在两个面板之间自由穿梭 ...
难度: [★]

效果图 : 101.gif 主要是整个结构是通过嵌套循环完成的, 并且多个店家这个层级, 所以稍稍的有些复杂, 不过理清关系就无关紧要了 ...
难度: [★]

效果 : 101.gif

在不使用框架的前提下打通 node 后台获取前台页面参数的各个环节, 包括普通的 GET 请求、POST 请求的四种常见内容类型的请求方式【包括文件上传】, 文件上传可以自己手动解析, 思路就是将每个数据段剥离开来, 再判断是文本域还是媒体域, 媒体域则直接写入文件, 文本域则直接转成需要的值即可, 本案例采用的是 multiparty 这个库来完成的上传, 虽然文件上传可以手动解析但并不推荐, 因为效率太低 ...
难度: [★]

预计2020年 06月 --日预更新案例 7 【--】

7. vue - node 小爬虫

未完待续 ...

中级(组件篇) :

效果 : 101.gif

  • 本案例使用 vue 组件来进行开发的, 是将整个搜索模块分为搜索框组件和展示面吧组件, 展示面板有拆出来两个大组件, 一个是静态展示时用的组件 A 和搜索时展示用的组件 B, 组件 A 又拆出来两个独立的组件一个是热搜组件另一个是搜索历史组件。这个案例组件划分的颗粒度还是蛮细的。
  • 还有就是在做搜索功能的时候使用的是百度搜索的接口, 通过自己封装的 jsonp 跨域请求, 来实时响应用户输入内容, 以此来达到真是的实时输入与模糊匹配。

难度: [★]

效果 : 101.gif

  • 本案例没有难度, 主要是为了练习组件方面的知识, 只是涉及到了简单的筛选, 结果发现自己的 css 是真的不好 ...

难度: [无]