資訊專欄INFORMATION COLUMN
摘要：序言剛來杭州的時候，是兩個人一起來的。后來一個回家當老師，一個留在了杭州。想起那時，在慕課買的第一課程，囫圇吞棗的看完了。現在回過頭來看看，這個臨時抱佛腳的啟蒙項目，真的還有不少的收獲。滾動視圖的位置緩存路由元對象。
序言
剛來杭州的時候，是兩個人一起來的。后來一個回家當老師，一個留在了杭州。想起那時，在慕課買的第一課程，囫圇吞棗的看完了。勉強才找到了一份工作，今天看起來，其實還是有點難過的。唉，其實人生不就是這樣嗎？還是要感謝思否還有類似掘金這種前端社區，幫助我解決不少問題，直到今天，也算是入門了。 現在回過頭來看看，這個臨時抱佛腳的啟蒙項目，真的還有不少的收獲。漏了不少知識點，現在撿起來，總結一下。
滾動視圖的位置緩存
/*
*@to,from 路由元對象。@savedPosition 觸發H5下的 popstate，go導航 (通過瀏覽器的 前進/后退 按鈕觸發) 時才可用。
*/
scrollBehavior(to, from, savedPosition) {
return {
x: 0,
y: 0
}
}
這個功能只在 HTML5 history 模式下可以使用。
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
路由導航，可以模擬hash滾動到錨點
if (to.hash) {
return {
selector: to.hash
}
}
kekeepAlive結合，返回上次停留的位置（常用）,緩存頁面數據，當且兩個keepAlive以上的頁面才可以觸發。
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
from.meta.savedPosition = document.body.scrollTop;
}
return { x: 0, y: to.meta.savedPosition ||0}
}
動態路由匹配參數
routes:[
{
path: "/detail/:id",
name: "Detail",
component: Detail
}
]
this.$router.push({name:"Detail",params:{id:id}});
路由模式為history模式，服務器需要做到對前端路由的全匹配。 可以參考官網
類似項目中的購物車，商品詳情頁等，可以做到直觀符合邏輯，params可以作為路徑參數傳遞，前提是做好路由匹配。
mock數據與跨域代理
建立mock數據，最好建立在public文件之內
配置代理，直接指向本地mock文件夾.項目中可以配置后臺接口或者映射地址，
devServer: {
proxy: {
"/api": {
// 到時候修改這個地方
target: "http://localhost:8080",
changeOrigin: true,
// 后臺接口地址重定向，真實對接的時候下面的替換到路徑，測試環境和本地。
pathRewrite: {
"^/api": "/mock"
}
}
}
}
封裝組件
awosome-swiper為例,github上的一個開源swiper組件，公共畫廊組件的拆分，其實所用到數據是從上述本地mock中得來的。
通用畫廊組件
// CommonGallary.vue
// 已在main.js中引用awosome-swiper(use)
過度動畫通用組件
// FadeAnimation.vue
// 已在main.js中引用awosome-swiper(use)
畫廊父組件 DetailBanner.uve
// DetailBanner.vue
//
![bannerImg]()
{{this.sightName}}
{{this.bannerImgs.length}}
// 引入過度動畫和公用畫廊
到這里的就基本上差不多了。
事件監聽與吸頂過渡
Header頭部記錄
景點詳情
之后再接著寫吧，有點累了。不知道說什么好了，公司開的就剩我一個前端了，可能我也要走了,我可不想這么輕易的滾回家。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109982.html
摘要：開始時間日接觸，先在官網十目一行學完了基本特性，作為一個的偽全棧，用感受了一把雙向綁定，感覺比的要強悍不少，但這開發環境吧，不能寫個，就總覺得自己不能零距離接觸。 開始時間：3.26日接觸Vue，先在官網十目一行學完了基本特性：http://cn.vuejs.org/v2/guide/，作為一個JAVA WEB的偽全棧，用Myclipse感受了一把雙向綁定，感覺比JQUERY的JSRE...
摘要：起因工作也差不多滿一年了，對于基本的業務開發有了一些自己的想法剛開始工作的前個月，每天都可以接觸到新東西，接觸新業務個月之后業務開發熟悉了對于自己的技術成長就感覺受到了局限如果一直沒有作出改變，那么等于是個月的經驗要用一年我的學習方式就是多 起因 工作也差不多滿一年了，對于基本的業務開發有了一些自己的想法 剛開始工作的前3個月，每天都可以接觸到新東西，接觸新業務 3個月之后業務開發熟...
摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。 為什么 學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點； 也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。 但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。 項目展示 本...
摘要：職業生涯，離開校門自己的第一份工作，每天上下班都騎自行車，下雨也是，只為省點車費。，屬于外包行業。雖然互聯網行業加班是正常的。至今，面試流程技術復試，心中暗喜。但是，我毫無畏懼。 學校 -> 實習 -> 畢業，前端——我一直在路上 就要畢業了，從學校到實習直至畢業，一路走來，酸甜苦辣，記錄這段時間的點滴，以后在回味肯定另有一番風情！ 感悟 2017/5-2018-7是非常特別的時光，見...
閱讀 2838·2021-09-10 10:50
閱讀 2196·2019-08-29 16:06
閱讀 3199·2019-08-29 11:02
閱讀 1100·2019-08-26 14:04
閱讀 2810·2019-08-26 13:24
閱讀 2303·2019-08-26 12:16
閱讀 551·2019-08-26 10:29
閱讀 3098·2019-08-23 18:33
