1. yusuke_ten

    Posted

    yusuke_ten
Changes in title
+Vue.jsをシンプルに理解して見ましょう
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,72 @@
+#Vue.jsはみんな知ってるよね?
+最近ホットみたいですねVue.js、今更ですが入門者向けにVue.jsを紹介したいと思います。
+誰でもわかるように書きますので多少間違っていても許してください!何でもしますから!
+
+##双方向データバインディング?
+Vue.jsのインスタンスの作り方とかは他にもいろんな方が紹介していると思うのでそちらを参照してください。
+まず一番基本的で便利なやつを紹介します。
+
+![スクリーンショット 2018-04-22 23.01.47.png](https://qiita-image-store.s3.amazonaws.com/0/251548/f3a46a80-f35b-1500-972e-d43fea297aea.png)
+
+Vueインスタンス内のdataというオブジェクト内の変数がhtmlと連動します。
+かっっこいい言い方すると双方向データバインディングとか言います。
+分かりにくいからhtmlとjsが同じ値になるって覚えたらいいよ!
+
+[jsfiddleで確認してください。](https://jsfiddle.net/yusuke_ten/2s9emen9/5/)
+
+dataの中にさらにオブジェクトを入れることもできます。
+ ![スクリーンショット 2018-04-22 23.08.18.png](https://qiita-image-store.s3.amazonaws.com/0/251548/7fa0ea94-690e-6f7e-d58b-e8c2bb8af6d8.png)
+
+便利だ...
+
+##htmlの属性もバインドしたいって?
+
+さきほど使った{{ }}みたいな記法は*htmlのタグの中に書くことはできません。(大事)*
+なのでこんな風に書きます。
+
+![スクリーンショット_2018-04-22_23_57_40.png](https://qiita-image-store.s3.amazonaws.com/0/251548/30eedade-149f-e6d7-4f22-8bd6a0365145.png)
+
+この辺からややこしいので[jsfiddleで確認してください。](https://jsfiddle.net/yusuke_ten/vc5k8jfx/)
+
+##用語を覚えましょう。
+いきなりv-bindとかわけのわからんやつが出てきましたね。
+今更ですが用語を覚えちゃいましょう。
+
+###ディレクティブ
+v-bindとかvi-forとかのhtmlのタグの中に書くやつ。
+「v-ほにゃらら」と出てきたらディレクティブのことを言っているんだと思いましょう。
+[公式リファレンスのディレクティブ一覧を貼っておきます。](https://012-jp.vuejs.org/api/directives.html)
+ちなみに公式リファレンスのディレクティブ一覧の中にはv-bindが見当たりませんでした。
+仲間はずれにされちゃったんだね可哀想...
+
+###コンポーネントオプション
+Vueインスタンス内のオブジェクトたちの名前です、dataとかmethodsとかpropsとかです。
+僕はオプションって呼んでます、どうでもいい話ですがいつもmethodsを単数形のmethodって書き間違えます。
+[公式リファレンスのコンポーネントオプション一覧を貼っておきます。](https://012-jp.vuejs.org/api/options.html)
+
+*この2つを覚えたらあとは覚えなくてもいいです。*
+
+##ディレクティブの中に式が書けるって?
+
+>ディレクティブ属性値は、単一の JavaScript 式を期待します
+
+と公式は言っています、しかしどこまでJavaScriptを書けるかはいまいち分かりません。
+今回は簡単にv-forを使ってループを書きましょう。
+
+![スクリーンショット_2018-04-23_0_59_57.png](https://qiita-image-store.s3.amazonaws.com/0/251548/b2c8872e-9ff8-2adc-c841-7a138970a43b.png)
+
+ディレクティブの中に式っぽいことを書いたらそれっぽいことをやってくれます、ふわふわすぎてディレクティブ内にどこまで記述できるか分かりません。だれか詳しく教えてください!
+jsfiddleの保存を忘れてました、許してください!何でもしますから!。
+
+##methodsを使う
+methodsというオプションを使ったら「ボタンを押したらこの処理を実行」的なことを簡単に実装できます。
+今回はv-onというディレクティブを使います。
+
+![スクリーンショット_2018-04-23_1_12_12.png](https://qiita-image-store.s3.amazonaws.com/0/251548/1b2f06a3-f498-321b-514e-4fa414b3d002.png)
+
+methodsの関数内では変数の参照にthis.を忘れないようにしましょう。
+
+##おわりに
+今回はここまで。
+みなさんふわふわな紹介でしたがVue.jsというものを何となく分かっていただけたでしょうか?
+次はtemplateを紹介したです(次があれば)。