目次：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で。

	$(function() {
	$('#btn').on('click', function() {
	$(this).toggleClass('is-active');
	});
	});

view raw jQueryでClickでクラス追加 hosted with by GitHub

	<p v-on:click="toggleMenu">menuの開閉</p>
	<div id="navMenu" :class="{'is-active': isActive}">
	<menu>
	<ul class="menu">
	<li><a href="#">menu1</a></li>
	<li><a href="#">menu2</a></li>
	<li><a href="#">menu3</a></li>
	<li><a href="#">menu4</a></li>
	</ul>
	</menu>
	</div>
	<script>
	export default {
	data: () => {
	return {isActive: false}
	},
	methods: {
	toggleMenu () {
	this.isActive = !this.isActive
	}
	}
	}
	</script>

view raw Vue.jsでクリックでClass追加 hosted with by GitHub

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タグによるリンクメニューを実装した場合

	<select id="target">
	<option value="https://www.yahoo.co.jp/">Yahoo!</option>
	<option value="https://www.google.co.jp/">Google</option>
	</select>

view raw HTML hosted with by GitHub

	$(document).ready(function(){
	$('#target select').change(function() {
	location.href = $('#target').val();
	});
	});

view raw jQuery hosted with by GitHub

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

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

	<div id="target">
	<select v-model="selected" v-on:change="jump">
	<option v-for="option in options" v-bind:value="option.value">
	{{ option.text }}
	</option>
	</select>
	</div>

view raw HTML hosted with by GitHub

	new Vue({
	el: '#target',
	data: {
	selected: '',
	options: [
	{ text: '選択してください', value: '' },
	{ text: 'Yahoo', value: 'https://www.yahoo.co.jp/' },
	{ text: 'Google', value: 'https://www.google.co.jp/' }
	]
	},
	methods: {
	jump: function(e){
	location.href = e.target.value;
	}
	}
	})

view raw Vue.js hosted with by GitHub

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

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

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

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

	$('#selector').on('click',function(){
	$.ajax({
	url:'post/hogehoge',
	type:'POST',
	data:{
	'data1': 'hogehoge',
	'data2': ''hogehoge,
	}
	})
	.done(function(data){
	//成功した時にdataに何か入ってくる
	console.log(data);
	})
	.fail(function(data){
	//失敗した時　にdataに何か入ってくる
	console.log(data);
	});
	});

view raw jQueryののajax post hosted with by GitHub

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

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

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

	import Vue from 'vue'
	import Axios from 'axios'
	import VueAxios from 'vue-axios'
	Vue.use(VueAxios, Axios)
	//以下コードをVue componentの中でよしなにつかってください
	var token = 'csrf_token here'
	Axios.post('/post_url',{
	article: { body: 'text text', title: 'title title' },
	csrf_token: token
	})
	.then(response => {
	//200 status header etc...
	// console.log(response)
	})
	.catch(error => {
	// console.log(error.response)
	});

view raw Axiosを使ったajax post hosted with by GitHub

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

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

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

get

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

	Axios.get('/post_url', {
	params: {
	// getで指定したいパラメータを記載
	id: 123,
	name: 'hoge',
	}
	})
	.then(response => {
	//200 status header etc...
	// console.log(response)
	});

view raw Axios get hosted with by GitHub

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

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

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

npmでインストール

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

gist

	import Sortable from 'vue-sortable/vue-sortable.js'
	Vue.use(Sortable)

view raw main.js hosted with by GitHub

	<div id="sortable">
	<ul class="list-group" v-sortable>
	<li class="list-group-item">リスト1</li>
	<li class="list-group-item">リスト2</li>
	<li class="list-group-item">リスト3</li>
	</ul>
	</div>
	<script>
	Vue.use(Sortable)
	new Vue({
	el: '#sort-table',
	})
	</script>

view raw sort.html hosted with by GitHub

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

簡単！