項(xiàng)目搭建+啟動(dòng)
這個(gè)項(xiàng)目是想要仿照百思不得姐的app制作的 但是后期有所改動(dòng)，不是完全一樣澎语。一開(kāi)始啟動(dòng)項(xiàng)目的時(shí)候有點(diǎn)凌亂途事，沒(méi)有搞清楚做這個(gè)需要什么。雖然一開(kāi)始迷迷糊糊但是等項(xiàng)目慢慢啟動(dòng)了以后 一點(diǎn)點(diǎn)清晰擅羞，也對(duì)vue.js有所了解了盯孙。所以現(xiàn)在回過(guò)頭來(lái)整理一下，記錄一些我自己認(rèn)為的在這個(gè)項(xiàng)目中學(xué)會(huì)的東西祟滴。
首先在framework7+vue上
在這個(gè)文檔上面有三個(gè)可以git的模板
?framework7+vue振惰；framework7+vue+webpack；framework7+vue+browserify
這次我要用到的是第二個(gè)
$ git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app
$ npm install
$ npm run dev
更改頁(yè)面 制作頁(yè)面?
把自己需要的留下 不需要的刪除 加些改動(dòng) 接下來(lái)我記錄一些重要點(diǎn)垄懂、
下圖是我的目錄方便后面理解
首先要做個(gè)card 然后讓card循環(huán) 以下是個(gè)完整的card
我自己在json文件里面寫(xiě)了card里面需要的數(shù)據(jù) 進(jìn)行綁定 然后循環(huán)首先我們來(lái)說(shuō)click事件
下圖是card中 帶有數(shù)據(jù)的點(diǎn)擊事件 首先綁定content（data）
js部分 用$emit的方法去尋找上一級(jí)（循環(huán)之后的頁(yè)面）
下圖是$emit尋找的上一級(jí) news 頁(yè)面里的循環(huán)組件
下圖是news里的js部分 點(diǎn)擊以后進(jìn)去相應(yīng)的頁(yè)面模塊 就用到了load url 后面數(shù)據(jù)很長(zhǎng)我的寫(xiě)法不對(duì) 應(yīng)該用id 來(lái)寫(xiě)
這樣的話一個(gè)點(diǎn)擊并且進(jìn)入相對(duì)應(yīng)的頁(yè)面 的步驟就完成了骑晶。 可能整個(gè)過(guò)程看起來(lái)有點(diǎn)混亂，以后會(huì)越來(lái)越亂的草慧，哈哈哈哈哈 不會(huì)的 我會(huì)好好寫(xiě)的桶蛔。
