資訊專欄INFORMATION COLUMN
摘要：雙嘆號(hào)強(qiáng)制類型轉(zhuǎn)換為布爾值。官方示例代碼用注冊(cè)了全局組件，會(huì)把自動(dòng)注冊(cè)為屬性，所以沒有手動(dòng)寫屬性。如果對(duì)象是響應(yīng)的，將觸發(fā)視圖更新。這是用來(lái)布爾值，又學(xué)了一招和分別代表單擊和雙擊事件綁定。
如果覺得有幫助，歡迎 star哈~
https://github.com/jiangjiu/blog-md/issues/11感謝作者 @尤小右 大大邊寫的超級(jí)帶感的 Vue.js 前端框架，贈(zèng)送的幾個(gè)小例子都很有代表性，代碼邏輯清晰簡(jiǎn)明，不禁想抄上一抄嗯。
官方的示例都是 ES5直接編寫運(yùn)行，并沒有使用ES6以及構(gòu)建工具，考慮到以后開發(fā)大一些的項(xiàng)目以及官方出品的 vue-cli腳手架，決定這次學(xué)習(xí)之旅采用兩者結(jié)合寫寫官方的示例。
初探步驟：
觀摩示例的 result
思考組件模板和邏輯實(shí)現(xiàn)思路
遇到問(wèn)題先搜一下 api 和官方教程（好像看過(guò)一遍還是記不住什么。。。結(jié)合實(shí)踐重要嗯）
還是不會(huì)就看例子的代碼吧（不出意外的話都會(huì)走到這步哈哈）
整理一下代碼和總結(jié)
markdown Editor一個(gè)極簡(jiǎn)的 markdown 編輯器，用了 marked 這個(gè)工具。
新建一個(gè) Marked 組件就 ok?？雌饋?lái)很簡(jiǎn)單，textarea 標(biāo)簽作為輸入編輯器，另一個(gè) div 標(biāo)簽通過(guò) marked 這個(gè) markdown工具 轉(zhuǎn)碼。
npm i marked --save 來(lái)安裝好 marked，import 后通過(guò)定義過(guò)濾器實(shí)現(xiàn)。
textarea 設(shè)置了 debounce指令。debounce 設(shè)置一個(gè)最小的延時(shí)，在每次敲擊之后延時(shí)同步輸入框的值與數(shù)據(jù)。如果每次更新都要進(jìn)行高耗操作（例如在輸入提示中 Ajax 請(qǐng)求），它較為有用。
github commits
編寫一個(gè)小組件，異步獲取 github 的兩條 branch的數(shù)據(jù)。
created:生命周期的鉤子，在實(shí)例創(chuàng)建后同步調(diào)用。此時(shí)實(shí)例已經(jīng)結(jié)束解析選項(xiàng)，意味著已經(jīng)建立了數(shù)據(jù)綁定，計(jì)算屬性，方法，watcher/事件回調(diào)。但是還沒有開始 DOM 編譯，$el 還不存在。
watch：一個(gè)對(duì)象，鍵是觀察表達(dá)式，值是對(duì)應(yīng)回調(diào)。值也可以是方法名，或者是對(duì)象，包含選項(xiàng)。在實(shí)例化時(shí)為每個(gè)鍵調(diào)用 $watch() 。
遇到的問(wèn)題：eslint 總是提示 new XMLHttpRequest() 錯(cuò)誤，not defined，并不知道為啥會(huì)這樣，看到了很多代碼也并沒出錯(cuò)啊，暫時(shí)在 eslint 的配置文件把 no-undef 設(shè)為0忽略它了，如果有知道的童鞋可以指點(diǎn)一二。
Validation+FirebaseLatest vue.js Commits
vuejs/vue@{{currentBranch}}
- dd - {{record.commit.message}} by {{record.commit.author.name}} at {{record.commit.author.date}}
firebase 實(shí)時(shí)后端云簡(jiǎn)單摟了一眼，號(hào)稱無(wú)后端數(shù)據(jù)存儲(chǔ)加實(shí)時(shí)通信還是很帶感的，不過(guò)自己寫的時(shí)候總是報(bào)錯(cuò)，只好自己在本地 mock 一下了。以后寫可以使用 wilddog，國(guó)內(nèi)的
計(jì)算屬性：由于模板中只可以用表達(dá)式，相對(duì)復(fù)雜的邏輯并不適合放在模板中，所以計(jì)算屬性就派上用場(chǎng)了，簡(jiǎn)單易用。計(jì)算屬性默認(rèn)只是 getter 函數(shù)，不過(guò)也可以自定義 getter 和 setter函數(shù)。
transition 過(guò)渡：這個(gè)過(guò)渡系統(tǒng)聽勾股大大說(shuō)很值得學(xué)習(xí)，所以暫時(shí)放下以后看源碼先。
mock 數(shù)據(jù)對(duì)象以后比較蛋疼，會(huì)把 newUser這個(gè)對(duì)象直接 push 進(jìn) userRef 中，導(dǎo)致以后對(duì) newUser 的操作都會(huì)被雙向綁定顯示到列表中。。。所以只好深拷貝一下數(shù)據(jù) push 進(jìn)去，這個(gè)留坑以后填。
!!:雙嘆號(hào)強(qiáng)制類型轉(zhuǎn)換為布爾值。
樹狀視圖
- {{user.name}} - {{user.email}}
Name can not be empty
email is not validated
這個(gè)例子實(shí)現(xiàn)了樹狀視圖，主要演示如何遞歸調(diào)用組件。
遞歸組件：組件在自身的模板內(nèi)可以遞歸調(diào)用自己，但是要有 name 選項(xiàng)才可以，在這上面花了好長(zhǎng)時(shí)間又去查了教程才發(fā)現(xiàn)。。。官方示例代碼用 Vue.component()注冊(cè)了全局組件，會(huì)把 id 自動(dòng)注冊(cè)為name 屬性，所以沒有手動(dòng)寫 name 屬性。我在 cli 里寫的時(shí)候一直沒注意，導(dǎo)致遞歸總是不顯示嗯。
Vue.set:全局 API，設(shè)置對(duì)象的屬性。如果對(duì)象是響應(yīng)的，將觸發(fā)視圖更新。這個(gè)方法主要用于解決不能檢測(cè)到屬性添加的限制。
open = !open:這是用來(lái) toggle 布爾值，又學(xué)了一招~
@click和@dblclick分別代表單擊和雙擊事件綁定。后一個(gè)還真是沒注意過(guò)。
動(dòng)態(tài) props：可以綁定 props，這樣父組件數(shù)據(jù)變化后，也會(huì)傳遞給子組件。
- +
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79850.html
摘要：最近得閑，想總結(jié)總結(jié)最近在學(xué)習(xí)上的一些心得，畢竟作為新手多寫多練好處多多，話不多說(shuō)，馬上開始前端工程化為開發(fā)帶來(lái)了很多便利，但實(shí)際是，環(huán)境的配置也要大費(fèi)周章一番。 最近得閑，想總結(jié)總結(jié)最近在學(xué)習(xí)Vue上的一些心得，畢竟作為新手多寫多練好處多多，話不多說(shuō)，馬上開始！ 前端工程化為開發(fā)帶來(lái)了很多便利，但實(shí)際是，環(huán)境的配置也要大費(fèi)周章一番。我用的是在Node環(huán)境下基于webpack來(lái)編譯打...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
摘要：三輪技術(shù)面上一輪發(fā)揮感覺沒前兩輪發(fā)揮好，所以還是有點(diǎn)不自信的，沒想到第三天后，就來(lái)電話了，通知我去阿里園區(qū)面試。 一般阿里社招都是招3-5年的P6+高級(jí)工程師，當(dāng)初自己一年經(jīng)驗(yàn)也沒有想過(guò)有這個(gè)面試機(jī)會(huì)。 雖然沒想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天，在某boss上有個(gè)人找我，叫我發(fā)一下簡(jiǎn)歷，我一看是阿里的某技術(shù)專家，雖然之前也有阿里的在某boss上給我要簡(jiǎn)歷，但是我深知自己...
閱讀 2905·2021-09-28 09:45
閱讀 1563·2021-09-26 10:13
閱讀 971·2021-09-04 16:45
閱讀 3759·2021-08-18 10:21
閱讀 1162·2019-08-29 15:07
閱讀 2696·2019-08-29 14:10
閱讀 3219·2019-08-29 13:02
閱讀 2527·2019-08-29 12:31
