Vueと共通

【Nuxt.js】Nuxt番外編:始める前に、このコードは知っておこう!

前置き

Vue, Nuxtを始める前に、
コードの知識として
最低限これだけは知っておくと良い!
という物をまとめました💁‍♀️✨

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

また、後半はVue, Nuxtとは
直接関係ありませんが
Progateなどの学習サイトと
合わせて学んでほしい内容です💡

コードは完全に覚えなくて良いので
・このコードでどんなことができるのか
・どんな単語でググればコードが検索できるか
を考えて読み進めてください📚


いやいや、
コードの知識というより、
どのような手順で学ぶかが知りたい🤔💭
という方はロードマップをご覧ください🗺✨


テンプレートへのデータ展開

テキスト

"Mustache" 構文
{{ }} (二重中括弧)で展開します🌟


生のHTML

v-htmlを使った場合

htmlとして展開できます🌷
きちんとaタグが動作していることが
確認できます✨👀

v-htmlを使わない場合

純粋なテキストになるので
aタグは動作しません🌀


属性

v-bind

v-bind:{ 属性名 }="{ 変数 }"

タグの属性を変数にしたい時に使います。
aタグの属性hrefで変数urlv-bindしています。

解説記事はこちら
【Nuxt.js】Nuxt文法編:v-bind

Mustacheはタグ内で使えない

Mustache は、HTML 属性の内部で使用することはできません。
代わりに、v-bind ディレクティブを使用してください

https://jp.vuejs.org/v2/guide/syntax.html#%E5%B1%9E%E6%80%A7

これはできるけど

これはできない

ので、
タグ内で変数をバインドしたい時は
v-bindを使いましょう🌟


JavaScript式の使用

<template>タグ内では
四則演算や三項演算など
直接JSの式を書くことができます🤗

items配列の0番目
(配列番号は0から始まります)
pricequantityを掛けています。


ディレクティブ

v-ifなど
v-から始まるNuxtで使える属性です。

これ以外にもありますが、
いくつか解説記事もございます
【Nuxt.js】Nuxt文法編:v-if, v-else, v-else-if
【Nuxt.js】Nuxt文法編:v-slot(初級)
【Nuxt.js】Nuxt文法編:v-model①


アロー関数

⬇️元々の形はこちら


引数

簡単な例

methodsclick(x)xが引数です💫
xに10を代入したいので
methodsを発火させる部分で
click(10)にしています☝️🌟

consoleで11が表示されているか
確認してみてください👀


第二引数追加

使える引数の個数や種類は
関数によって違いますが、
簡単な使い方はこちらです。

consoleで50が
表示されるはずです🍎🙋‍♀️


サンプル①

getElementById(id)
idが引数です。
引数を変数にしていますが、
指定は文字列でしなければなりません。
そこで@click="click('text')"にし
これでid="text"になってる
pタグだけ色がピンクに変わります✨🧙‍♀️

どうせなら
色も引数にしちゃいましょ🧞‍♂️


サンプル②

とにかく渡したい値を
書けばOK🤗💕
この場合はindex番号を渡しているので
index番号をalertで表示できるように
なっています💡


テンプレートリテラル

変数、定数に文字列を連結させる時
''で囲って+で繋げても良いけど…🤔💭
数が多いと大変ですよね💡
全体をで囲って変数、定数のとこだけ
${変数名}でできちゃう!!
というものです⚡️🎸

before

after


まとめ

いかがでしたか?💡
これを使えば
こんなことができるんだな👍✨
ということが分かればOKです💕


私が学習を始めた時、
調べる力が全てなので覚えなくて良い
とあらゆる場所で言われていました。

ただ、最初って
本当に右も左も分かりません😩
ググろうとしても
例えばテンプレートリテラルを
使いたい場合
「テンプレートリテラル」
「文字列」「変数」「連結」
などの言葉を覚えていないと
検索すらできません🔍

私はこの最低限覚えるべき単語すら
「覚えなくて良いもの」と
本気で勘違いしていました🤭笑

覚えなくて良いのはコードであって
ググるために必要な単語ではありません🌀

皆さんの学習の手助けになれば良いな
と思っています🎈🧸

-Vueと共通
-,

© 2020 aLiz Nuxt