目次：Vue.js

• Vue.jsでtoggleClass
• Vuetify.jsでマテリアルデザインことはじめ
• Nuxt.jsではじめるSSRことはじめ
• Vue.jsによるformのselectによるリンクメニューの実装
• Vue.jsでもjQueryと同じような ajax postを実装したい
• Vue.js　わずか4行でドラッガバブルなリストを実装する

Vue.jsでtoggleClass

Clickをしたら、特定の要素にclassが付与されて、もう一度clickしたら付与したClassが消える、JavaScript書いたことがある人なら誰しもが書いたことがあるであろう、あの処理をVue.jsで。

is-classはtureの時にバインドされます。

Vuetify.jsでマテリアルデザインことはじめ

Vuetify.jsでマテリアルデザインことはじめ

昨日Nuxt.jsの環境構築の記事を書かせて頂きましたが、テンプレートの変更や、ページの追加に触れてNuxt.jsの入門は終了したいと思います。

自分の作ったアプリケーションにcdで移動

$cd jsfes_nuxt/your-app-name

Nuxtのプロジェクトはこんな感じです。

your-app-name $ls -ll
total 752
-rw-r--r--    1 chihiro.matsuda  staff     376  5 19 00:42 README.md
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 assets
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 components
drwxr-xr-x    4 chihiro.matsuda  staff     128  5 19 00:42 layouts
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 middleware
drwxr-xr-x  808 chihiro.matsuda  staff   25856  5 19 00:43 node_modules
-rw-r--r--    1 chihiro.matsuda  staff    1655  5 19 00:42 nuxt.config.js
-rw-r--r--    1 chihiro.matsuda  staff  369890  5 19 00:42 package-lock.json
-rw-r--r--    1 chihiro.matsuda  staff     702  5 19 00:42 package.json
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 pages
drwxr-xr-x    4 chihiro.matsuda  staff     128  5 19 00:42 plugins
drwxr-xr-x    5 chihiro.matsuda  staff     160  5 19 00:42 static
drwxr-xr-x    3 chihiro.matsuda  staff      96  5 19 00:42 store

Sassを使えるようにする

生でCSSはもう書きたくないですね。そこで、Sassを使えるようにする必要があります。
package.jsonのあるディレクトリでnpmでパッケージをインストールします

$ npm install --save-dev node-sass sass-loader

nuxt.config.jsで使えるスタイルシートを追加する

assetsにディレクトリにscssフォルダを切って、そこにtodo.scssを追加することにしました。

  /*
  ** Global CSS
  */
  css: [
    'vuetify/src/stylus/main.styl',
    '@/assets/scss/todo.scss'
  ],

scss

sassが無事使えることだけを確認したいので、文字色を赤くするだけで試します

$red: red;
blockquote {
    color: $red;
}

http://localhost:3000/inspire
にアクセスすると、更新ボタンを押さずにリアルタイムにブラウザに変更が保存されますね（SSRさまさまやで）

新規テンプレートの追加

現在はVuetifyのデフォルトテンプレートですので、白地にVuetifyのグリッドデザインでサンプルを作ってみます。

出来上がりの様子

DoorKeeper のAPIを使って、イベントを取得してVuetifyのグリッドで表示してみました。もちろん、APIを叩くにはNuxt.jsの環境構築の際にインストールしたaxiousを使っています。

テンプレートの追加

テンプレートの追加は非常に簡単です。layoutsフォルダがありますので、新たにファイルを追加するだけです。

を追加しました

ファイルの中身についてはこちらのgistをご確認ください。

いよいよオリジナルページの追加

いよいよオリジナルページの追加です。pagesディレクトリに.vueファイルを追加するだけ

さきほど追加したテンプレートでpageを読み込むにはこれだけ。

<script>
  export default {
    layout: 'event',
  }
</script>

こちらもAPIの接続のソースコード含めてgistからご確認ください。

今度はゆっくりとaxiousの解説記事を書きたいと思います。

Nuxt.jsではじめるSSRことはじめ

なので、今回の記事はLTの補足説明です

$ npx create-nuxt-app your-app-name

$ cd todo
$ npm run build
$ npm start

http://localhost:3000

Vue.jsによるformのselectによるリンクメニューの実装

jQueryでformのselectタグによるリンクメニューを実装した場合

プルダウンを変更した時をonChangeでうけとってlocation.hrefでページを遷移させる、これ。これをVue.jsで実現したい。

Vue.jsによるformのselectによるリンク

Vue.jsでselectフォームを実装する場合、フォーム入力バインディングを使います。

v-forを使って繰り返し処理を行い、
v-bindでselectのoptionの設定を行います。

v-modelを使うと、formのdefault値が無視される性質があるため、valueの空をセットしています。

Vue.jsでもjQueryと同じような ajax postを実装したい

Vue.jsでもjQueryと同じような ajax postを実装したい

jQueryでゴリゴリajaxでAPIをたたいていたあの頃。jQueryの$.ajaxは一番お世話になったメソッドかも。

Vue.jsでもそっくりなな形で使えるaxiosがとっても便利。

初めてVue.jsでAjax通信する機会があったんですが、axiosっていうnpmがjQueryのajax postと使い勝手が非常に似ていて使いやすかったのでメモ。書き方がほぼほぼjQueryの$.ajaxです。

npm　install
npm install --save-dev vue-axios axios

postする内容はjson形式で記載します。DBに記録するためのPOSTの場合はバックエンドのフレームワークの仕様に合わせてtokenを設定してください。railsだとauthenticity_tokenをセットする必要があります。

postした後の結果についてもthen catchで受け取ることができます。

部分的に更新したい場合はpostメソッドではなく、Axios.patchになります

get

getの場合は検索パラメータを設定するだけ。簡単

Vue.js　わずか4行でドラッガバブルなリストを実装する

Vue.jsでtableタグのソート機能はデフォルトで存在していますよね。

ただ、tableタグ限定だったり、昔jQueryではやったtablesorterだと行をドラッグandドロップで場所を変更できましたが、Vue.jsのプラグインを入れてわずか４行で、ほぼセレクタを入れるだけで実装できるプラグインを紹介します。

npmでインストール

npm install --save-dev vue-sortable
vue.jsはすでによみこんでいるものとします。

gist

基本的にはcomponentのセレクタを指定して、あとはHTMLにソートしたい要素にlist-group-item、それをラップする要素にlist-groupというclassを当てるだけでドラッガバブルになります

簡単！