星期二, 10月 25, 2016

[CSS] 三十個有趣的CSS特效

fb看人分享的,覺得裡面有很多選單特效就先記錄一下啦:D




http://www.hongkiat.com/blog/creative-css-animations/

星期日, 10月 23, 2016

[Vue.js] vue-router 2.0 使用筆記

記錄一下使用vue-router 2.0的筆記,高手請略過~

 在其他組件呼叫router

例如你會切一個Header.vue的組件,但可能做了什麼事之後要靠router轉頁就會用到

Header.vue如何import

app.js(我的vue app進入點)也要export你new出來的vue-router


router-link自訂active class


由於在2.0版後都使用router-link取代v-link,當router-link被觸發時,都會自已一個樣式router-link-active,你可以用linkActiveClass指定你自已的唷

router-link使用tag自定渲染元素

說明一下怎麼跟bootsrap的nav樣式結合,因為active的效果是在li,因此要自定一下router-link渲染的程式



[Vue.js] 單一組件(*.vue)檔案筆記

記錄一下剛接觸的新手踩雷的筆記XD

template標籤只能有一個根元素

如題,不然vue.js warn就會噴給你看XD


prop屬性警告

星期五, 10月 21, 2016

[Vue.js] 自定義組件爆錯: Do not use built-in or reserved HTML elements as component

昨天用了vue-router來拆解同一層view的組件,
今天想說找一下怎麼用自訂定header/footer組件就爆下面的錯了lol

Do not use built-in or reserved HTML elements as component





星期三, 10月 19, 2016

[Laravel] 如何設定 lavavel elixir載入bootstrap的樣式

記錄一下如何在lavavel elixir載入bootstrap的樣式

基本載入

只需要簡單的二個步驟即可

Step1:

原本的專案內 resources/assets/sass/app.scss
會看到以下這個,拿掉原本的註解即可


  Step2:

打開gulpfile修改如下,使用方法為mix.sass的 webpack loader即可,其他code是自已專案的範例


客製化



參考


https://laravel-news.com/2015/10/setup-bootstrap-sass-with-laravel-elixir/

星期一, 10月 17, 2016

[CSS] css 特效hover on 和 off



最近處理一個畫框的特效,效果要在hover的時候順時鐘畫,
原來只有注意hover 的時候加入線的寬,但沒考慮hover off的行為(讓框倒帶)
不過在這篇讓我想到哪裡要修正

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

終於可以順利倒帶 -,-

作品是朋友的網站大境建設 : thegand.com.tw

星期五, 10月 07, 2016

[Vue.js] Laravel + Vue.js 2.0安裝踩雷之旅


記錄一下整個Lavarel+Vue.js 2.0 踩地雷的過程。
主要參考此篇大大的教學,但沒有用fork的方法Q_Q。




Laravel 中使用 Vue 组件化开发(配置)



https://github.com/jcc/vue-laravel-example


前置環境



sudo apt-get install nodejs 
sudo apt-get install npm

[Vue.js] 建構大型應用程式



基本上的Vue.js是一個library
如果要做大型專案要配合其他技術才會更完整,
這一篇記錄一下相關的技術資源。
學習前端之路整個變化太快了lol

主要的架構


採用Vue.js 2.0 (組件式寫法,要搭配webpack與es6 js的寫法) + Lavavel 5.2

ES6

由於比較想採用組件式(*.vue)寫法,所以要使用ES6的javascript寫作方式。
另外開一篇筆記記錄=> ES6 在Vue.js的筆記


Webpack 模組管理工具




Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。
它的核心功能如下:
  • 可同時整合 CommonJSAMD 模組
  • 轉換 JSX, Coffee Script, TypeScript 等
  • 分散封裝專案使用的程式碼,使載入頁面時只需載入當頁所需的程式碼以加速載入速度
  • 整合樣式表 (css, sass, less 等)
  • 處理圖片與字型
  • 建置 production-ready 的程式碼 (壓縮)


如果在Lavavel裡面整合的話,請參考Lavarel Elixir (大大簡化使用gulp的流程)

星期四, 10月 06, 2016

[Vue.js] 組件筆記


記錄一下學習Vue Compoment的筆記

核心ViewModel類


  1. 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
  2. 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
  3. 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式地声明为双向绑定。
  4. 方法(methods):对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
  5. 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,比如created,attached,destroyed等等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,可以理解为 Controller的逻辑被分散到了这些钩子函数中。=> 要注意1.0與2.0有些事件已經改名字
  6. 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

組件註冊

星期二, 10月 04, 2016

[Vue.js] 記錄一下開始學Vue.js的資源


太久沒碰新的前端框架了,至angular 1.x之後就懶了(誤),從去年就一直覺得Vue愈來愈火紅,但舊專案也沒使用的機會,今年打算在新的專案直接套用Vue.js 2.0 + Lavarel,當作今年的小目標好了XD。這篇記錄一些自已想要導入Vue所想到的問題與現在相關的處理方法~慢慢來更新 :D


想到的問題??

SEO
Google的爬蟲已有公告針對js framework所render出來的結構可以有效記錄了。
其他的解決方案還有prerender.io 與 pa

可以參考SSR章節有此問題的解法? http://vuefe.cn/guide/ssr.html

i18n

Router

Asset的precomplier

與jQuery/Bootstrap整合
https://segmentfault.com/a/1190000007020623


與Lavarel整合

第三方元件庫支援

Vue-strap (基於bootstrap)
https://yuche.github.io/vue-strap/#getting-started

iView 高質量組件庫

https://www.iviewui.com/

Element


http://element.eleme.io/#/

學習的簡報

1.0 完整的文件
https://cn.vuejs.org/guide/index.html

2.0 正在翻譯中的...
http://vuefe.cn/guide/

Kuro大神的簡報


星期一, 10月 03, 2016

[php] Fatal error: Maximum execution time of 30 seconds exceeded 超過最長執行時間錯誤

今天寫批次計算演算法時,
發生了此錯誤 Fatal error: Maximum execution time of 30 seconds exceeded
因為預設php是30秒,所以爆開了。
可以簡單為單一執行的程式加入set_time_limit

set_time_limit(0) //則是無上限

沒事不要設定全域的執行時間:D ,想不開可以在php.ini檔設定。
可以找到max_execution_time的設定屬性

星期日, 10月 02, 2016

[Bootstrap] 讓Modal滿版的樣式修正

為了想讓手機RWD的modal滿版效果感覺比較好,找到了下面的sample。

測試環境的bootstrap 3





.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal-dialog {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #3c7dcf;
  border-radius: 0;
  box-shadow: none;
}

.modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  padding: 10px;
  background: #6598d9;
  border: 0;
}

.modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.modal-body {
  position: absolute;
  top: 50px;
  bottom: 60px;
  width: 100%;
  font-weight: 300;
  overflow: auto;
}

.modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  background: #f1f3f5;
}
https://codepen.io/yewnork/pen/Kpaqeq

其他你感興趣的文章

Related Posts with Thumbnails