2020-06-06

Vue.js Computed(算出)プロパティ

動的なデータを表現できる。

テンプレート内でも式は記述可能だが、それではコード量が増えて行くほどに管理しづらいものとなる。

そのためにテンプレート内には式を記述せず、computedプロパティやmethodを使用するのが一般的。

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  computed: {
  lessThanThree: function() {
    return this.counter > 5 ? '〜5' : '5〜'
  }
  }
})

データは動的なものを表現できない。あくまでも初期値を設定するもの。

computedとmethodの違い

二重中括弧の中にmethodsを記述すると、テンプレート内が再描画されるたびに読み込まれる。

一方、同じように二重中括弧の中にconputedプロパティを記述した場合、計算対象の値が更新された時にその値部分だけが再描画される。

同じ動作は可能だが、内容によってはmethodsを使用することで無駄な実行が増えてしまうため使用には気をつけたいところ。

2020-06-01

v-model

Vue.js Vue.jsを学ぶ

修飾子
- .lazy
- .number
- .trim

Vue.jsのディレクティブv-modelについての記事です。

v-modelを使用すると双方向バインディング¹が使用できる。

例はinputに登録してあるデータを表示し、編集するたびにデータが書き換えられるというものです。

リアルタイムで表示も更新されます。

先に動作サンプルです。

使い方は要素にv-model="data"を記述します。

new Vue({
  el: "#app",
  data: {
    message: 'こんにちは'
  }
})

Html

<div id="app">
  <div>
    <input v-model="message" type="text">
    <pre>{{ message }}</pre>
  </div>
</div>

これでインプットに入力した値がリアルタイムで同期され、Vue.jsのデータを書き換えていきます。

修飾子

使用できる修飾子にはlazy、number、trimがあります。使用方法はv-modelの後に続けて記述するだけです。

例：v-model.lazy

.lazy

changeイベント発火後にデータをバインディングします。

Html

<div id="app">
  <div>
    <input v-model.lazy="message" type="text">
    <pre>{{ message }}</pre>
  </div>
</div>

エンターキーを押したり、inputのフォーカスをやめる(input以外のところをクリックする)と、同期され、データが書き換えられます。

.number

データをnumber型で返します。

例えばinputの場合だとtype="number"を指定しても、文字列が返されます。

そこでこの修飾子を使用することでnumber型のデータを保存することが可能になります。

以下の例では{{ number + 1 }}として計算式を記述していますが、.number修飾子を指定していない方では文字列として返されてしまうため機能していないことがわかります。

.trim

入力値の前後の空白を取り除きます。

どれも使いどころが多そうです。

【バインディング】プログラミングにおいてはファイルや要素などのデータが相互に関連づけられている状態や、そのような状態を実現する機能を指す。↩

2020-05-29

flex boxについて

CSS

はじめに

仕様を覚えるためにできるだけ使うようにしているのがFlex BoxとGrid Layoutの二つです。なんとなくで簡単なものは扱えても毎度毎度検索をかけて確認しているのでこのふたつについてそれぞれ記事にまとめようと思います。

今回はFrex Boxについてです。

基本的な書き方

親要素にdisplay: flex;を指定する。

.wrapper {
  display: flex;
}

横並びになります。

親要素に指定できるプロパティ

親要素に指定できるプロパティと子要素に指定できるプロパティがある。

flex-direction ・・・子要素の並ぶ順番

親要素に以下のように指定する。

.wrapper {
  display: flex;
  frex-direction: row-reverse;
}

四種類。

名前	説明
row(初期値)	左から右→
row-reverse	右から左←
column	上から下↓
column-reverse	下から上↑

flex-wrap ・・・子要素の折り返し

子要素を一行で並べるか、親要素のサイズに合わせて複数行にするかの指定。

.wrapper {
  display: flex;
  frex-wrap: wrap;
}

名前	説明
nowrap(初期値)	折り返さない
wrap	下へ並べる
wrap-reverse	上へ並べる

flex-flow ・・・ flex-directionとflex-wrapをまとめて指定

初期値はrow nowrap

.wrapper {
    display: flex;
  flex-flow:row wrap;
}

justify-content ・・・水平方向の揃え位置

.wrapper {
  display: flex;
  justify-content:flex-end;
}

名前	説明
flex-start(初期値)	左揃え
flex-end	右揃え
center	左右中央揃え
space-between	最初と最後の子要素を両はしに配置、残りを均等に配置。
space-around	要素に均等に配置

align-items ・・・垂直方向の揃え位置

.wrapper {
  display: flex;
  align-items:flex-start;
}

名前	説明
stretch（初期値）	親要素の高さ、もしくはコンテンツの一番多い子要素に合わせる
flex-start	上揃え
flex-end	下揃え
center	上下中央
baseline	文字のベースラインで揃える

align-content ・・・複数行の時の揃え位置

flex-wrap: nowrap;が適用されていると無効になるため、flex-wrap: wrap;などを指定する。

.wrapper {
  display: flex;
  align-content: space-between;
}

名前	説明
stretch（初期値）	親要素の高さに合わせる
flex-start	上揃え
flex-end	下揃え
center	上下中央
space-between	最初と最後の子要素を上下端に配置、残りを均等に配置。
space-around	全ての子要素を均等に配置。

長くなってしまったので子要素に指定するプロパティは別の記事として分けます。

追記：その2です

sotoogre.hatenablog.jp

2020-05-26

Vue.js キー修飾子

Vue.js Vue.jsを学ぶ

v-onディレクティブで使用できるキー修飾子についての記事です。

キー修飾子

特定のキーに対応してイベントを呼び出すことができる。

よく使われる9種類に関してはVue.js側でエイリアスを用意してくれている。

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

公式ガイドによると

KeyboardEvent.key で公開されている任意のキー名は、ケバブケースに変換することで修飾子として直接使用できます。

とのことで試してみたところ他のものも簡単に扱えました。

以下はエイリアスを使用した場合のサンプルコードです。

エンターキーを打つと結果を表示させたりする時など、使用したいシーンは多くありそうです。

とても手軽に実装できるのは嬉しいですね。

2020-05-24

Vue.jsのテンプレート構文についてその3

Vue.js Vue.jsを学ぶ

その1はこちら

sotoogre.hatenablog.jp

その2はこちら

sotoogre.hatenablog.jp

ディレクティブを学ぶ
- ディレクティブとは
  - v-on
  - イベント修飾子
    - .stop
    - .prevent

Vue.jsでHTMLを描画する際に用いるテンプレートの構文について学んだことをまとめています。

まだ勉強を始めたばかりなため理解が追いついていない部分があるかと思います。間違った解釈をしているものなどあればお教えいただけると嬉しいです。

ディレクティブを学ぶ

ディレクティブとは

Vue.jsにおいてv-から始まる特別な属性。

全て先頭にv-をつける。

v-text、v-bind、v-htmlなど様々なものが用意されている。

v-on

v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。

https://jp.vuejs.org/v2/guide/events.html

イベント発生時に関数を実行できる。
イベントの名前を引数にとる 例：click
省略記法は@(例：@click="ok")

v-onディレクティブでメソッドを使用する

メソッド：関数をたくさん保持できる

v-onイベントオブジェクトを使用する

メソッドの引数にeventを指定することでマウスイベントを取得できる。(※eventでなく他の単語などでも動作はするが、eventを指定することが慣例となっているため基本的にeventを使用する)

カーソルの位置を検知して、X軸とY軸の位置を表示する

console.log(event)で内容を確認できるが、jsFiddleにおいてうまく作動しなかったためコードに記述していません。Vue CLIを使用して試したところ以下のgifのようにeventの内容が確認できます。

指定範囲内でマウスを動かすとその度に位置を検知しているのがわかると思います。clientX、clientYが画面上の位置を記しています。

v-on-event

これはこの位置に来たら要素を追加したり、など応用が利きそうですね。

イベントオブジェクトでの引数

v-onの引数には$eventを使用する

v-onの引数DOMイベント一覧

developer.mozilla.org

イベント修飾子

よく使うDOMイベントはVue.js側がすでに用意している。

以下の6つがある。この中でもよく使用される.stopと.preventについて記しておく。

.stop
.prevent
.capture
.self
.once
.passive

.stop

JavascriptのstopPropagationメソッドを呼び出せる。

親要素へのバブリングを無効にする。

v-onディレクティブの引数に続けて.stopと記述する。

例：v-on:mousemove.stop、@mousemove.prevent

.prevent

Javascriptのevent.preventDefaultメソッドを呼び出せる。

要素のデフォルトの動作を無効にする。

v-onディレクティブの引数に続けて.preventと記述する。

例：v-on:click.prevent、@click.prevent

2020-05-19

Vue.jsのテンプレート構文についてその2

Vue.js Vue.jsを学ぶ

その1はこちら sotoogre.hatenablog.jp

ディレクティブを学ぶ
- ディレクティブとは

Vue.jsでHTMLを描画する際に用いるテンプレートの構文について学んだことをまとめています。

ディレクティブを学ぶ

ディレクティブとは

Vue.jsにおいてv-から始まる特別な属性。

全て先頭にv-をつける。

v-text、v-bind、v-htmlなど様々なものが用意されている。

v-text

文字を描画できる

例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

Template

<div id="app">
  <p v-text="message"></p>
</div>

出力結果：

Hello World!

以下は同じ意味となる。

<div id="app">
  <p v-text="message"></p>
  <p>{{ message }}</p>
</div>

v-once

一度しか描画しない。

例えばメソッドに以下のように記述した場合、二重中括弧でmessageを表示させるとGood Morningになる。

new Vue({
  el: "#app",
  data: {
    message: "Hello World!",
  },
  methods: {
    sayHello() {
    this.message = 'Good Morning!'
    return 'ハロー'
    }
  }
})

<div id="app">
  <p>{{ message }}</p>
  <p>{{ sayHello() }}</p>
</div>

出力結果：

Good Morning!
ハロー

この場合、流れとしては一度Hello World!が描画された後sayHelloメソッドによってGood Morningに変更されているため、２度描画されていることになる。

v-onceを使用することで、描画は一度きりとなる。つまり書き換えられる前の状態で維持される。

例：

<div id="app">
  <p v-once>{{ message }}</p>
  <p>{{ sayHello() }}</p>
</div>

出力結果：

Hello World!
ハロー

一度描画された後は変更したくない、一度だけ描画したい場合などに使用するとよさそう。

v-html

dataに設定されたhtmlタグは二重中括弧で記述してもそのまま描画される。

例：

new Vue({
  el: "#app",
  data: {
    html: "<h1>これはh1タグです</h1>",
  }
})

<div id="app">
  <p>
    {{ html }}
  </p>
</div>

出力結果：

<h1>これはh1タグです</h1>

v-htmlを使用することでhtmlタグとして描画される。

例：

<div id="app">
  <p v-html="html">
    {{ html }}
  </p>
</div>

出力結果：

これはh1タグです

v-htmlを使用する際の注意点

XSS脆弱性を持つため、ユーザーから提供されたコンテンツを置かない。信頼のあるコンテンツの描画にだけ使用する。

v-bind

引数を取れるディレクティブ。

例：aタグのhrefの引数に直接{{ url }}とは書けない(に自由中括弧込みの文字列として認識されてしまう)ためv-bindを使用し、値をデータに対応づける。

引数にhrefを取る。

html

出力結果：

v-bindの省略記法

非常によく使うディレクティブであるため省略記法が用意されている。

先頭に:をつける、のみ。

<div id="app">
  <p>
    <a :href="url">Google</a>
  </p>
</div>

v-bind:hrefの時と同じ意味となる。

使用する際はv-bind:引数でも:引数でも大丈夫だが、プロジェクトごとに表記法を統一すること。

v-bindの属性を動的に表現する

dataにhrefのプロパティを追加し、カギカッコで記述する。

v-bindを使用してid属性を追加する

id用にnumberプロパティを登録。

:id="number"でid属性が追加される。

検証ツール(option⌥ + command⌘ + C)で確認すると以下のようにid属性が付いていることがわかる。

vbind

複数のv-bindをオブジェクトとしてまとめる

<div id="app">
  <p>
    <a v-bind="googleObject">Google</a>
  </p>
</div>

new Vue({
  el: "#app",
  data: {
    googleObject: {
      href: 'https://google.com',
      id: '14'
      }
    }
})

以下のコードと同じ意味になる。

2020-05-18

Vue.jsのテンプレート構文についてその1

Vue.js Vue.jsを学ぶ

テンプレート構文とは？
データを描画する
methodからdataにアクセスする
コードまとめ

テンプレート構文とは？

テンプレート構文とは、Vue.jsにおいてHTMLを描画するテンプレートを書くための構文。以下のような部分のこと。

<div id="app">
   <p>{{ message }}</p>
</div>

あくまでもこれはVue.jsのテンプレート構文を用いたテンプレートを記述しているのであって、HTMLを記述しているわけではない。

テンプレートを最終的にVue.js側がHTMLを出力し、ブラウザがレンダリングしている。

データを描画する

テンプレートを使用するためには以下のようにnew Vueを用意する必要がある。

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

elプロパティでVue.jsで扱う部分を指定する。

dataプロパティでデータを設定する。

データを描画するには二重中括弧を使用する。

<div id="app">
   <p>{{ message }}</p>
</div>

出力結果：

Hello World!

二重中括弧内にはjavascriptの構文をそのまま記述できる

例：

new Vue({
  el: '#app',
  data: {
    number: 5
  }
})

<div id="app">
  <P>{{ number + 2 }}</p>
</div>

出力結果：

参考演算子も使用できる

例：

new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

<div id="app">
  <P>{{ ok ? '◎' : '×'}}</p>
</div>

出力結果：

◎

ok: trueをfalseに変えると×が表示される。

メソッド

例：

new Vue({
  el: "#app",
  data: {
    message: "Hello World!",
  },
  methods: {
    goodMorning() {
        return 'Good Morning';
    }
  }
})

<div id="app">
  <p>{{ message }}</p>
  <p>
  {{ goodMorning() }}
  </p>
</div>

出力結果：

Hello World!
Good Morning

※メソッドの場合は()が必要。

※メソッドの場合は二重中括弧の中に単一の式のみ書ける。(varなどは使用できない。)

methodからdataにアクセスする

以下のようにmessageだけでは動かない。

new Vue({
  el: "#app",
  data: {
    message: "Hello World!",
  },
  methods: {
    goodMorning() {
        return message;
    }
  }
})

thisをつけることによってアクセスできるようになる。

new Vue({
  el: "#app",
  data: {
    message: "Hello World!",
  },
  methods: {
    goodMorning() {
        return this.message;
    }
  }
})

出力結果：

Hello World!

テンプレート内ではthisは不要。

インスタンス内で自身のインスタンスにアクセスする場合には必ずthisをつける。

コードまとめ

※cssを別に当てています。全てのコードはEdit in JSFiddleより確認できます。

その2はこちら

sotoogre.hatenablog.jp

computedとmethodの違い

修飾子

.lazy

.number

.trim

目次

はじめに

基本的な書き方

親要素に指定できるプロパティ

flex-direction ・・・ 子要素の並ぶ順番

flex-wrap ・・・ 子要素の折り返し

flex-flow ・・・ flex-directionとflex-wrapをまとめて指定

justify-content ・・・ 水平方向の揃え位置

align-items ・・・ 垂直方向の揃え位置

align-content ・・・ 複数行の時の揃え位置

キー修飾子

ディレクティブを学ぶ

ディレクティブとは

v-on

v-onディレクティブでメソッドを使用する

v-onイベントオブジェクトを使用する

イベントオブジェクトでの引数

v-onの引数DOMイベント一覧

イベント修飾子

.stop

.prevent

ディレクティブを学ぶ

ディレクティブとは

v-text

v-once

v-html

v-htmlを使用する際の注意点

v-bind

v-bindの省略記法

v-bindの属性を動的に表現する

v-bindを使用してid属性を追加する

複数のv-bindをオブジェクトとしてまとめる

テンプレート構文とは？

データを描画する

データを描画するには二重中括弧を使用する。

二重中括弧内にはjavascriptの構文をそのまま記述できる

参考演算子も使用できる

メソッド

methodからdataにアクセスする

コードまとめ

flex-direction ・・・子要素の並ぶ順番

flex-wrap ・・・子要素の折り返し

justify-content ・・・水平方向の揃え位置

align-items ・・・垂直方向の揃え位置

align-content ・・・複数行の時の揃え位置