从 jQuery 平滑过渡到 vue (下)- 1

本次分享是一系列分享的重点,所以准备分 2 - 3 次完成最后 vue 到 jquery 的分享。代码大家可以 todoMVC 下载一个 jquery 版本,我是以此为例进行代码转换的。

首先我们引入 vue.js, 有关 vue 安装很简单,大家可以下载 vue.js 或者通过 npm install 来安装,这里我采用后者方式安装 vue.js。

开发的 IDE 我用的 visual studio code , 自从 visual studio code 出现我看到微软从封闭走向开发,而且微软产品真心不错。我们再次运行程序。

我们将jqeury 版的 app.js 复杂一份改名为 j-app.js 留作备用。

然后我们需要确定我们的应用范围,我们用 id 作为标识来确定应用的范围。然后我们就搭建我们的 vue 的应用。

然后我们测试一下,添加一个 {{todos}} 来测试我们的代码。

好我们既然将 jQuery 版本转为 vue 。我们就不需要一切都是重头来做。我们返回到备份文件,对有用的代码保留调整,我们先删除这部分代码。

然后将可以复用的 util 中的内容保留复制到 methods。

这样我们将本地保存的数据显示出来,可以调用 store 中的方法来显示数据。

在数据结构我们除了要显示数据列表,还有一个新的数据。表示我们新创建的数据。

然后我们就需要将 newTodo 绑定到 input 输入框上。

然后我们再次回到备份代码上,删除去掉这些代码,然后我们这里保留 director.js 的作为我们代码路由。

我们将 Router 复制到 created 这个生命周期阶段。

然后我们将函数修改我箭头式函数,也就是 lamba 这样我们就无需绑定 this,这是=>好处,大家千万不要简单用箭头式函数好处仅仅是好看,其实好处多多。然后我们可创建一个 filter。

然后我们处理的 create 任务的方法,

然后将 create 修改为 addTodo 名称,

我们进行修改,然后将 newTodo 绑定 input 的 keyup 事件上。

然后我们将 display 的样式删除,我们不需要。

在 vue 中我们就不再需要模板来渲染界面,我们将模板部分的 html 代码移动到 ul 标签下,

然后我们用 v-for 来实现列表的显示,然后绑定 class 为 completed 。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容

  • 继续临摹
    蜀南枚阅读 324评论 2 2
  • 天与地,心有灵犀一点通。留一眼雪湖,傍笔直落羽松,携几丛苇草,观世外野趣三分。
    原麈阅读 835评论 7 45
  • 亮亮是一位五岁的小男孩,他加入幼儿园的时候我挺开心,因为我知道,力量方面的榜样来了。 五岁的孩子在平时的生活中已经...
    田雪源阅读 405评论 0 0