

Vue.js¶

Official¶

Articles¶

TIPS¶

Vue.js が templateURL をサポートしない理由 - Vue.js
javascript - VueJs templating. How to load external templates - Stack Overflow
Vue.js 2.xのフィルタについて調べてみた - Qiita
vue.jsでpugとpostcssつかう - Qiita

javascript - Vue.js v-if for attributes - Stack Overflow

<table v-bind:attribute1="someMethod" attribute2="{{anotherMethod}}">

Vue.js2.x系で親から子コンポーネントにデータを渡す方法 | Black Everyday Company
vue.jsでInfinite Scrollを実装する - GeekFactory
vuejsのちょっと便利なコンポーネント機能 - Qiita
共通した親要素を使いまわしたい（スロット配信）
パラメーターによって使用するコンポーネントを変えたい（動的コンポーネント）
複数のコンポーネントで、同じ処理を使いまわしたい（ミックスイン）

動的コンポーネント¶

コンポーネント — Vue.js

予約された <component> 要素と、その is 属性に動的に束縛することで、同じマウントポイントで複数のコンポーネントを動的に切り替えることができます

遅延ローディング (vue-router)¶

遅延ローディング · vue-router
```
const Foo = () => import('./Foo.vue')
```

UI Frameworks¶

Storybook: UI dev environment you'll love to use - Storybook for Vue - Vue on Storybook // Speaker Deck

UI Components¶

vue-spinner

Dev¶

lakb248/vue-pull-refresh: A pull down refresh component implement by vuejs

vue-router¶

vue-router メモ :: Vue.js | Refills

ディレクティブ¶

v-for¶

リストレンダリング - Vue.js #テンプレートでの-v-for
制御文として回したいときは <template> タグを使う。

Vue.jsでハマったところ（主にIE） - Qiita

<table>タグの中では<template>タグが使えない（IE）

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

v-cloak¶

体で覚えるVue.js - ディレクティブ編〜 JSおくのほそ道 #023 - Qiita

CSSと組み合わせて使うことでデータバインディング完了までこのディレクティブがつけられた要素の描画は遅れさせられる。初期表示時の画面のちらつきを抑える効果がある。

<style>
[v-cloak] {
  display: none;
}
</style>

<div id="app">
  <div v-cloak>{{ foo }}</div>
</div>

Plugins¶

Validation¶

Google Analytics¶

Express¶

express-vue (SSR): Vue rendering engine for Express.js. Use .Vue files as templates using streams

Nuxt.js¶

Nuxt.js starter template¶

nuxt-community/starter-template: Nuxt.js starter project template.
nuxt-community/express-template: Starter template for Nuxt.js with Express.

グローバルCSSとプリプロセッサ¶

API: The css Property - Nuxt.js

リクエストデータをコンポーネントで扱う¶

リクエストデータをコンポーネントで扱うには body-parser を組み込む。ここで例示されているサンプルはNuxt.jsのバージョンが古いので注意。POSTリクエストのbodyの他にもいろいろ参照可能。

Working with Body Request Params $req\.body$ · Issue #24 · nuxt/nuxt.js

Express のミドルウェアとして body-parser をセットする順序に注意。以下のように API Routes の前に定義しないと正しく動作しなかった。

server/index.js

app.set('port', port)

// Express middlewares (need to load before routes)
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// Import API Routes
app.use('/api', api)

pages/*.vue

async asyncData ({ req }) {
  let body = {}
  if (req && req.body) {
    body = req.body
  }
  return { body }
},

Electron¶

SimulatedGREG/electron-vue: An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack. - フロントエンド開発初心者がelectron-vueでアプリをつくってみた　その２～実装編～ - Qiita