Vue.js 官方示例初探（ES6 改寫）

Jason 發布于2019-08-19 18:40 / 1532人閱讀

摘要：雙嘆號強制類型轉換為布爾值。官方示例代碼用注冊了全局組件，會把自動注冊為屬性，所以沒有手動寫屬性。如果對象是響應的，將觸發視圖更新。這是用來布爾值，又學了一招和分別代表單擊和雙擊事件綁定。

如果覺得有幫助，歡迎 star哈~

https://github.com/jiangjiu/blog-md/issues/11

感謝作者 @尤小右大大邊寫的超級帶感的 Vue.js 前端框架，贈送的幾個小例子都很有代表性，代碼邏輯清晰簡明，不禁想抄上一抄嗯。

官方的示例都是 ES5直接編寫運行，并沒有使用ES6以及構建工具，考慮到以后開發大一些的項目以及官方出品的 vue-cli腳手架，決定這次學習之旅采用兩者結合寫寫官方的示例。

初探步驟：

觀摩示例的 result

思考組件模板和邏輯實現思路

遇到問題先搜一下 api 和官方教程（好像看過一遍還是記不住什么。。。結合實踐重要嗯）

還是不會就看例子的代碼吧（不出意外的話都會走到這步哈哈）

整理一下代碼和總結

markdown Editor

一個極簡的 markdown 編輯器，用了 marked 這個工具。

新建一個 Marked 組件就 ok。看起來很簡單，textarea 標簽作為輸入編輯器，另一個 div 標簽通過 marked 這個 markdown工具轉碼。

npm i marked --save 來安裝好 marked，import 后通過定義過濾器實現。

textarea 設置了 debounce指令。debounce 設置一個最小的延時，在每次敲擊之后延時同步輸入框的值與數據。如果每次更新都要進行高耗操作（例如在輸入提示中 Ajax 請求），它較為有用。

github commits

編寫一個小組件，異步獲取 github 的兩條 branch的數據。

created:生命周期的鉤子，在實例創建后同步調用。此時實例已經結束解析選項，意味著已經建立了數據綁定，計算屬性，方法，watcher/事件回調。但是還沒有開始 DOM 編譯，$el 還不存在。

watch：一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。在實例化時為每個鍵調用 $watch() 。

遇到的問題：eslint 總是提示 new XMLHttpRequest() 錯誤，not defined，并不知道為啥會這樣，看到了很多代碼也并沒出錯啊，暫時在 eslint 的配置文件把 no-undef 設為0忽略它了，如果有知道的童鞋可以指點一二。

Validation+Firebase

firebase 實時后端云簡單摟了一眼，號稱無后端數據存儲加實時通信還是很帶感的，不過自己寫的時候總是報錯，只好自己在本地 mock 一下了。以后寫可以使用 wilddog，國內的

計算屬性：由于模板中只可以用表達式，相對復雜的邏輯并不適合放在模板中，所以計算屬性就派上用場了，簡單易用。計算屬性默認只是 getter 函數，不過也可以自定義 getter 和 setter函數。

transition 過渡：這個過渡系統聽勾股大大說很值得學習，所以暫時放下以后看源碼先。

mock 數據對象以后比較蛋疼，會把 newUser這個對象直接 push 進 userRef 中，導致以后對 newUser 的操作都會被雙向綁定顯示到列表中。。。所以只好深拷貝一下數據 push 進去，這個留坑以后填。

!!:雙嘆號強制類型轉換為布爾值。

樹狀視圖

這個例子實現了樹狀視圖，主要演示如何遞歸調用組件。

遞歸組件：組件在自身的模板內可以遞歸調用自己，但是要有 name 選項才可以，在這上面花了好長時間又去查了教程才發現。。。官方示例代碼用 Vue.component()注冊了全局組件，會把 id 自動注冊為name 屬性，所以沒有手動寫 name 屬性。我在 cli 里寫的時候一直沒注意，導致遞歸總是不顯示嗯。

Vue.set:全局 API，設置對象的屬性。如果對象是響應的，將觸發視圖更新。這個方法主要用于解決不能檢測到屬性添加的限制。

open = !open:這是用來 toggle 布爾值，又學了一招~

@click和@dblclick分別代表單擊和雙擊事件綁定。后一個還真是沒注意過。

動態 props：可以綁定 props，這樣父組件數據變化后，也會傳遞給子組件。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79850.html

初探Vue之環境搭建

摘要：最近得閑，想總結總結最近在學習上的一些心得，畢竟作為新手多寫多練好處多多，話不多說，馬上開始前端工程化為開發帶來了很多便利，但實際是，環境的配置也要大費周章一番。最近得閑，想總結總結最近在學習Vue上的一些心得，畢竟作為新手多寫多練好處多多，話不多說，馬上開始！前端工程化為開發帶來了很多便利，但實際是，環境的配置也要大費周章一番。我用的是在Node環境下基于webpack來編譯打...

hiYoHoo 2019-08-20 14:04 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
面試分享：一年經驗初探阿里巴巴前端社招

摘要：三輪技術面上一輪發揮感覺沒前兩輪發揮好，所以還是有點不自信的，沒想到第三天后，就來電話了，通知我去阿里園區面試。一般阿里社招都是招3-5年的P6+高級工程師，當初自己一年經驗也沒有想過有這個面試機會。雖然沒想著換工作，但是經常關注一些招聘網站的信息，某一天，在某boss上有個人找我，叫我發一下簡歷，我一看是阿里的某技術專家，雖然之前也有阿里的在某boss上給我要簡歷，但是我深知自己...

ACb0y 2019-08-21 11:49 評論0 收藏0