Vue.js 2.0 支援的套件

整理一下vue.js 2.0可以跑的元件

用戶
http://pespantelis.github.io/vue-crop/
https://eliep.github.io/vue-avatar/

進度條
http://hilongjw.github.io/vue-progressbar/index.html

日期格式
https://github.com/egoist/vue-timeago
https://github.com/charliekassel/vuejs-datepicker
http://blog.w3cub.com/vue2-calendar/


分頁
https://github.com/TahaSh/vue-paginate
https://github.com/matfish2/vue-pagination-2

[Webpack] 解決jquery在webpack載入全域的處理方法

webpack真是個很屌但不熟會搞死人的東西，
為了搞一個全域的jquery函式庫，
找到StackFlow裡面一個大神提供的各種解法

這位大大也有遇到一樣的事:D
https://blog.fntsr.tw/articles/2016/09/13/%E8%AE%93-jquery-%E5%9C%A8-webpack-%E4%B8%AD%E6%88%90%E7%82%BA%E5%85%A8%E5%9F%9F%E8%AE%8A%E6%95%B8/

備份文章

[Vue.js] 透過directive的機制整合tinymce 使用vue.js 1.x

找到人家wrapper tinymce的範例~

https://jsfiddle.net/edwindeveloper90/edjc82z0/
使用vue.js 1.x寫的
可以看一下怎麼轉2.x的語法

[Vue.js] 簡單上手的表單驗證外掛 vee-validator

由於目前專案使用vue.js 2.0，套用vue-validator會有異常。
於是找了另一個替代方案vee-validator，使用簡單好理解也好擴充。
可以參考官方文件: http://vee-validate.logaretm.com/#about

基礎範例

https://dotdev.co/form-validation-using-vue-js-2-35abd6b18c5d#.3j0nq7tne

[Wordpress] 讓所有頁面導向具體頁面

如果想把全站的page導向某一頁的話可以在functions.php加入一個action:
 template_redirect

function redirect_page_standard() {
  wp_redirect(  get_site_url() . '/notice.html', 301 );

}
add_action( 'template_redirect', 'redirect_page_standard' );

[Vue.js] 還不錯看的vue.js樣版: https://vue-admin.fundon.me/#/

在vue.js 台灣的社群看到的，覺得以後有機會採用。
先記錄一下。

https://vue-admin.fundon.me/#/

[Vue.js] Vue的服務端渲染文章筆記

記錄一下服務器渲染(SSR)相關的處理技術文章。

主要有分二種渲染方式，分別為服務器渲染與預渲染 (部份頁面渲染用)。

官方教學
https://vuefe.cn/guide/ssr.html

跟asp.net core結合
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/

完整的測試範例，程式可跑
http://csbun.github.io/blog/2016/08/vue-2-0-server-side-rendering/

prerender教學
http://hq5544.github.io/vue-webpack/prerender.html

Lavarel專案管理+vue.js完整範例
http://laraveldaily.com/ribbbon-project-management-system-laravel-5-1-vue-js/

[jQuery] youtube iFrame API無法在iOS上播放影片的解決方法

測試youtube錯誤，最近幫客戶的網站套了jquery.youtubebackground.js RWD的jquery套件後，就噴了以下錯誤。

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match


 

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match.

查了一下原來是這個套件用的是youtube的iframe api，因為在iOS上(safari 和chrome)執行playVideo()這個方法是會爆炸了，雖然有提到可以用cueVideoById("youtubeId")來處理。但用了還是不會播，所以目前的workaround就先讓程式判斷iOS不要先執行play，讓用戶自已點取影片。

http://stackoverflow.com/questions/9934944/embedding-youtube-video-refused-to-display-document-because-display-forbidden-b

https://developers.google.com/youtube/player_parameters?hl=zh-cn#IFrame_Player_API

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

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

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

[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屬性警告

[Vue.js] ES6 在Vue.js的筆記

本篇記錄一下為了用組件式寫法隨手記的一些ES6筆記

了解Module模組(模塊)的import與export

[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

[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/

[Node.js] node 指令錯誤

今天在試著建構Vue+Lavavel開發環境，

發現node -v的cli的指令會噴以下錯誤

The program 'node' can be found in the following packages:
 * node
 * nodejs-legacy
Try: sudo apt-get install <selected package>

可以透過以下的指令來解決

sudo ln -s `which nodejs` /usr/local/bin/node

http://stackoverflow.com/questions/20057790/what-are-the-differences-between-node-js-and-node

[Wordpress] 如何傳遞變數至樣版

待處理..

參考

http://mekshq.com/passing-variables-via-get_template_part-wordpress/

[CSS] css 特效hover on 和 off

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

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

終於可以順利倒帶 -,-

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

[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 開發的模組整合工具。

它的核心功能如下:

• 可同時整合 CommonJS 和 AMD 模組
• 轉換 JSX, Coffee Script, TypeScript 等
• 分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
• 整合樣式表 (css, sass, less 等)
• 處理圖片與字型
• 建置 production-ready 的程式碼 (壓縮)

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

其他webpack參考資源如下

http://webpack.vuefe.cn/

http://www.slideshare.net/newstory0113/webpack-52413453

[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当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

組件註冊