簡單的Canvas+Vue+Jquery動畫的demo

主要是參加了知乎上小爵的live:前端工程師如何提升自己?

真的是干貨滿滿,其中提到寫技術博客分享這一點,再一次刺激了我寫簡書的細胞!

所以,今天用canvas和vue寫了一個小demo,激發自己繼續努力下去!

主要功能介紹:

1、文本框輸入即時顯示在頁面

2、昵稱修改成功時,即長度大于等于5,顯示成功提示頁面

3、昵稱修改失敗時,即長度小于等于5,顯示失敗提示頁面

效果圖:

很簡單的設計
修改昵稱成功
修改昵稱失敗

代碼部分:

html部分
js部分

vue主要是借鑒的官網案例,但是仍然踩到這么幾個坑:

1、canvas繪制竟然可以重疊 !233

2、x-template能不能用一個src來引入?我目前的實踐答案是:不能。

3、{{app.message}},代碼里也看到了,我用jquery的val()方法并不能渲染modal里的DOM,最后神奇的聲明式渲染幫我解決了這個問題,差點高潮了!233

吐槽:

? ? ? ?這段時間被校招虐的體無完膚,面了三家公司,都是上市公司,結果都很不理想,但是也積累了不少前端筆試面試的經驗。幸運的是,我投了一家公司的前端,部門經理推薦我面他們公司的另一個崗位:軟件應用工程師。現在已經拿到了offer,但是薪資不是很高,而且工作內容也不是很吸引我。于是我就在想,難道我在前端路上要半途而廢了嗎?斟酌再三,前端是我大學期間最認真學的東西,怎么能說放棄就放棄!于是立刻開始搞自己的個人網站,昨天用一天時間完成了一個大概,今天用一天時間寫了一個小demo,再一次踏上前端探索之路!

自勉:

我會把握住現在,多寫demo,多思考!

等來年春招,我一定要找到一份滿意的前端開發的工作!

>期待和大家交流,共同進步,歡迎大家加入我創建的與前端開發密切相關的技術討論小組:

> - SegmentFault技術圈:[ES新規范語法糖](https://segmentfault.com/g/1570000010695363)

> - SegmentFault專欄:[趁你還年輕,做個優秀的前端工程師](https://segmentfault.com/blog/chennihainianqing)

>- 知乎專欄:[趁你還年輕,做個優秀的前端工程師](https://zhuanlan.zhihu.com/wyasy)

>- Github博客: [趁你還年輕233的個人博客](https://github.com/FrankKai/FrankKai.github.io)

>- 前端開發QQ群:660634678

>- 微信公眾號: 人獸鬼 / excellent_developers

![](https://upload-images.jianshu.io/upload_images/2976869-157e8624bcdfd62a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>努力成為優秀前端工程師!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容