はじめに
Vue.jsを初めて触る人でもこれだけ覚えてたら書ける内容を記事に書いていきます。
Vue.jsを使うには
Vue.jsを動かすためにVue.jsをインストールする方法と直接htmlに書く方法があります。
今回は直接htmlに書く方法で書いていきます。
htmlの<head></head>にVue.jsのURLを入れることでVue.jsが使えるようになります。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
See the Pen Vue.js基礎 - 読み込み方 by MIYOSHI ERIKA (@karen_u) on CodePen.
jsの値を渡してhtmlで表示
Vue.jsを使って早速動かして見ましょう
js側に書いてある内容についての説明をしていきます。
-
el
-
#appのように、DOM要素を指し示すセレクタが指定できます。 - htmlに書いてある
<div id="app">タグで囲まれている内容がVueアプリケーションとして認識されます。
-
-
data
- Vueアプリケーション内で使用する変数を指定できます。
data内で書いてあるtitle: 'Hellow World!'は
titleという変数に「Hellow World!」という文字列を渡します
という意味になります。
htmlでjsで書いた変数を使いたい場合は
<h1>{{ title }}</h1>と書くと表示されます。
See the Pen Vue.js - 変数 by MIYOSHI ERIKA (@karen_u) on CodePen.
v-text
titleをテキストとして表示したい場合はv-textを使用します。
See the Pen vue.js - v-text by MIYOSHI ERIKA (@karen_u) on CodePen.
v-html
titleをhtmlとして表示したい場合はv-htmlを使用します。
dataの中身を<h1>タグを入れると
上記で書いた<p>{{ title }}</p>と<p v-text="title"></p>
には文字列で<h1>Hellow World!</h1>と表示されます。
しかしv-html内で書いているところだけはh1タグを認識してくれます。
See the Pen
vue.js - v-html by MIYOSHI ERIKA (@karen_u)
on CodePen.
v-bind
v-bindを使用することでURLを指定やフォントの色を変えることができます。
- 画像を指定する場合
v-bind:src="{変数名}" - 画像の大きさを指定する場合
bind:width="{変数名}" - リンクを指定したい場合
v-bind:href="{変数名}" - フォントの色を指定したい場合
v-bind:style="{color:{変数名}}" - cssを指定したい場合
v-bind:class="{変数名}"
※v-bindは:と省略することができます。
例えば、v-bind:src="{変数名}"の場合は、:src="{変数名}"
See the Pen vue.js - v-bind by MIYOSHI ERIKA (@karen_u) on CodePen.
v-model
- 自動的に入力要素のタイプに基づいて要素を表示させることができます。
- 初期値に何かしら表示または選択をしたい場合
- テキスト内で初期値に文字列を表示したい場合は、`
{変数名}:'初期値の文字列' - チェックボックス内で初期値に選択場合は、`
{変数名}:'[{チェックボックスのvalue}]' - ラジオボタン内で初期値に選択場合は、`
{変数名}:'{ラジオボタンのvalue}'
- テキスト内で初期値に文字列を表示したい場合は、`
See the Pen vue.js - v-model by MIYOSHI ERIKA (@karen_u) on CodePen.
- 初期値を指定しない場合
- テキスト内で初期値を空で表示したい場合は、
{変数名}:'' - チェックボックス内で初期値に選択したくない場合は、`
{変数名}:'[]' - ラジオボタン内で初期値に選択したくない場合は、`
{変数名}:''
- テキスト内で初期値を空で表示したい場合は、
See the Pen vue.js - v-model(初期値なし) by MIYOSHI ERIKA (@karen_u) on CodePen.
v-on
v-onとはイベントを実行するメソッドです。
javascriptでボタンを押下した際にonclickが使用されますが、これと同じ動き方をします。
See the Pen vue.js - v-on by MIYOSHI ERIKA (@karen_u) on CodePen.
「１増やす」ボタンを押下すると「count」が１ずつ増える
という意味になります。
v-if
html内に直接v-if="{変数名}"と書くことでif文を書くことができます。
今回はデフォルトでfalseにしているのでチャックボックスにチェックが入っていませんが、
デフォルトでtrueにするとチェックボックスがチェックするようにすることも可能です。
そのさいはjs側に書いているcheckboxValueの値をtrueに変更します。
See the Pen vue.js - v-if by MIYOSHI ERIKA (@karen_u) on CodePen.
v-for
if文と同様にhtml内に直接v-for="({Key}, {value}) in {変数名}"と書くことでfor文を書くことができます。
ここではfor文を使用してテーブルを作成する方法です。
See the Pen vue.js - v-for by MIYOSHI ERIKA (@karen_u) on CodePen.