Contents
Vue.jsの基本構文
早速、Vue の基本構文から。
気付くのにすごい時間かかりましたが、意外と単純みたいです。
「new Vue」でインスタンスを生成して、その中に書いた処理の値がhtmlで出力されるという仕組み。
See the Pen vue_basic by Ai Tsuchiya (@tsuchippo) on CodePen.
Vue.jsの基本機能
テキストバインド
プログラミング初心者にとって何が辛いかって、よう分からんカタカナが多いってこと。「バインド」ってなに？って思ったんですけど、「結びつける」という意味だそうです。
一番分かりやすい例は、こんな感じ。
See the Pen bind-text by Ai Tsuchiya (@tsuchippo) on CodePen.
jsの「dataオプション」で定義した「textプロパティ」の値が、htmlの{{ }}(マスタッシュ)の箇所に出力されます。
「el:」は、htmlのどの要素に結びつけますか〜？というのを決めるオプションで、ここでは「#app」を指定しているので、htmlの「id=”app”」と結びついているということになります。
属性にバインド(v-bind)
属性って何かというと、「value」、「placeholder」、「class」、「style」などのことを指します。
「v-bind:+属性名=”プロパティ名”」とすることで、その箇所にjsで定義されたプロパティの値が出力されます。
See the Pen v-bind by Ai Tsuchiya (@tsuchippo) on CodePen.
上記の例では、input typeのvalue属性にv:bindを付けているので、その箇所にjsの「dataオプション」の「textプロパティ」の値「’今日の晩御飯はすき焼きだよ！’」が出力されます。
因みに「v:bind」は省略できて上記の例なら、「:value=”text”」と書いても同じ結果になります。
すき焼き食べたい・・・
リストデータをバインド(v-for)
for文のループ処理みたいな感じですね。
「v-for」を使うと、要素にjsで書いた配列データを結びつけて、データを繰り返し出力することができます。
See the Pen v-for by Ai Tsuchiya (@tsuchippo) on CodePen.
上記の例では、「dataオプション」の「mensプロパティ」の中の配列要素(好きな男性の特徴)が「li要素」の中に出力されています。
近頃は「3低(低姿勢・低依存・低リスク)」なんて言われているみたいですけど、なんかそれもつまんないですよね＾＾；
条件式の指定(v-if)
「v-if」を使うと指定した条件に一致した際に、要素に結びつけて値を出力することができます。
See the Pen v-if by Ai Tsuchiya (@tsuchippo) on CodePen.
上記の例では「dataオプション」の「salaryプロパティ」の値がhtmlの「#app」要素に結びついて、「v-if」/「v-else-if」/「v-else」で指定された条件に合致するDOMが出力されています。
年収1000万以上・・・私が稼ぎたいですよ！！
イベントハンドラの登録(v-on)
そもそもいまだに「イベントハンドラ」が分からん。ということでいろいろ調べたところ、
だそうです。
なので、下記の例では「v-on:click」でclickイベント、即ち「要素をクリックした時」のイベントハンドラが登録されており、ボタンがクリックされるとjsの「methods:オプション」に定義されたイベントハンドラ：「showAnswer」が呼ばれて中の関数が実行されます。
See the Pen v-on by Ai Tsuchiya (@tsuchippo) on CodePen.
こちらも省略記法があって、「v-on:click」は「@click」としても同じです。
Vue.jsの機能は他にもたくさんあるよ！
とまぁ、いくつか基本的な機能を書いたのですが、Vueの機能はこんなもんじゃなくてもっと色々複雑なものもたくさんあるのですが、尺が長くなりすぎる(+自分の理解が追いついてない)のでこの辺にさせていただきます・・・
なんてこたない、WEBや本で説明されていることをただ書いただけになってしまいましたが・・自分でコード書いたり言葉で表してみようとすると途端に難しくなってこれだけ書くのに相当時間かかりました。。
プログラミングは独特の用語が多くて、プロパティ？メソッド？オプション？まだよく分かってないです・・
※注
1.プログラミング初心者がまとめた内容ですので、誤りがある可能性があります。
2.出力結果は単なる例です
作成したOP
折角なので、作成した TODO アプリを紹介させていただきます。
Vue のアニメーションってこう、滑らかな感じがたまらんですよね＾＾
Vue.jsのTODO LISTできた！
— つちっぽ@フロントエンド頑張る (@tsuchippo) January 26, 2020
ところどころ改善点あるけど、Vueの便利さがちょっと理解できた！そして久々のOP楽しかった😊#ウェブカツ#ウェブカツ女性割引#プログラミング学習 pic.twitter.com/ADheScAMMW
参考にしたサイト
作成に際し、参考にしたサイトは下記です。
Vue.js公式ドキュメント
日本語の公式ドキュメントがあるというのは、Vue の大きなメリットですね！
基礎から学ぶVue.js WEB版
ウェブカツでもおすすめされていた基礎から学ぶ Vue.js のWEB版です！
Vue.jsミニハンズオン(Qiita)
プログラミング学習をしていれば毎日最低一回は見るであろう、Qiitaより一つご紹介。
基礎から説明されていて、一つずつ機能を実装していきながら作れるので分かりやすかったです。
ここまで読んだ貴方はきっと「new Vue」したくなるはず!?
ということで、引き続きプログラミング学習＋お仕事頑張ります〜！
