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

前置き

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

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

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

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

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

ロードマップ

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

テキスト

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

<template>
  <div class="page">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: 'Hello Nuxt.js!',
    }
  },
}
</script>

<style lang="scss" scoped>
  .page {
  }
</style>

</div>

</template>

export default {

data () {

return {

text: 'Hello Nuxt.js!',

}

</script>

.page {

}

</style>

生のHTML

v-htmlを使った場合

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

<template>
  <div class="page">
    <p v-html="text" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '<a href="https://www.google.com/?hl=ja">リンク</a>',
    }
  },
}
</script>

<style lang="scss" scoped>
  .page {
  }
</style>

</div>

</template>

export default {

data () {

return {

text: '<a href="https://www.google.com/?hl=ja">リンク</a>',

}

</script>

.page {

}

</style>

v-htmlを使わない場合

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

<template>
  <div class="page">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '<a href="https://www.google.com/?hl=ja">リンク</a>',
    }
  },
}
</script>

<style lang="scss" scoped>
  .page {
  }
</style>

</div>

</template>

export default {

data () {

return {

text: '<a href="https://www.google.com/?hl=ja">リンク</a>',

}

</script>

.page {

}

</style>

属性

v-bind

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

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

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

<template>
  <div class="page">
    // 省略して:href="url"でもOK
    <a v-bind:href="url">リンク</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: '/',
    }
  },
}
</script>

// 省略して:href="url"でもOK

</div>

</template>

export default {

data () {

return {

url: '/',

}

</script>

Mustacheはタグ内で使えない

Mustache は、HTML 属性の内部で使用することはできません。
代わりに、v-bind ディレクティブを使用してください
https://jp.vuejs.org/v2/guide/syntax.html#%E5%B1%9E%E6%80%A7

これはできるけど

<p>{{ text }}</p>

1	<p>{{ text }}</p>

これはできない

<p {{ text }}></p>

1	<p {{ text }}></p>

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

JavaScript式の使用

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

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

<template>
  <div class="page">
    <p>{{ items[0].price * items[0].quantity }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { price: 100, quantity: 3 },
        { price: 200, quantity: 5 },
      ],
    }
  },
}
</script>

<p>{{ items[0].price * items[0].quantity }}</p>

</div>

</template>

export default {

data () {

return {

items: [

{ price: 100, quantity: 3 },

{ price: 200, quantity: 5 },

}

</script>

ディレクティブ

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

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

アロー関数

関数名 = ( ) => console.log('text');

1	関数名 = ( ) => console.log('text');

⬇️元々の形はこちら

関数名( ) {
  console.log('text');
}

関数名( ) {

console.log('text');

}

引数

簡単な例

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

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

<template>
  <div class="page">
    <button
      type="button"
      @click="click(10)"
    >
      click
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    click (x) {
      let y = x + 1
      console.log(y)
    },
  },
}
</script>

<button

type="button"

@click="click(10)"

click

</button>

</div>

</template>

export default {

methods: {

click (x) {

let y = x + 1

console.log(y)

}

</script>

第二引数追加

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

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

<template>
  <div class="page">
    <button
      type="button"
      @click="click(10, 10)"
    >
      click
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    click (width, height) {
      let area
      area = (width * height)/2
      console.log(area)
    }
  },
}
</script>

<button

type="button"

@click="click(10, 10)"

click

</button>

</div>

</template>

export default {

methods: {

click (width, height) {

let area

area = (width * height)/2

console.log(area)

}

</script>

サンプル①

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

<template>
  <div class="page">
    <button
      type="button"
      @click="click('text')"
    >
      click
    </button>
  　<h1 id="title">
      どちらの色が変わるか
    </h1>
    <p id="text">
      引数で指定しています。
    </p>
  </div>
</template>

<script>
export default {
  methods: {
    click (id) {
      document.getElementById(id).style.color = "pink"
      console.log(id)
    },
  },
}
</script>

<button

type="button"

@click="click('text')"

click

</button>

どちらの色が変わるか

</h1>

引数で指定しています。

</p>

</div>

</template>

export default {

methods: {

click (id) {

document.getElementById(id).style.color = "pink"

console.log(id)

}

</script>

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

<template>
  <div class="page">
    <button
      type="button"
      @click="click('text', 'pink')"
    >
      click
    </button>
  　<h1 id="title">
      どちらの色が変わるか
    </h1>
    <p id="text">
      引数で指定しています。
    </p>
  </div>
</template>

<script>
export default {
  methods: {
    click (id, color) {
      document.getElementById(id).style.color = color
      console.log(id)
    },
  },
}
</script>

<button

type="button"

@click="click('text', 'pink')"

click

</button>

どちらの色が変わるか

</h1>

引数で指定しています。

</p>

</div>

</template>

export default {

methods: {

click (id, color) {

document.getElementById(id).style.color = color

console.log(id)

}

</script>

サンプル②

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

<template>
  <ul>
    <li
      v-for="(todo, index) in todos"
      :key="index"
      @click="deleteTodo(index)"
    >
      {{ todo }}
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      todos: ['これと', 'あれと', 'それ']
    }
  },
  methods: {
    deleteTodo (index) {
      alert (index)
    },
  },
}
</script>

<ul>

<li

v-for="(todo, index) in todos"

:key="index"

@click="deleteTodo(index)"

</li>

</ul>

</template>

export default {

data () {

return {

todos: ['これと', 'あれと', 'それ']

}

methods: {

deleteTodo (index) {

alert (index)

}

</script>

テンプレートリテラル

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

before

const name = 'aLiz'
console.log('私は' + name + 'の人です')

1 2	const name = 'aLiz' console.log('私は' + name + 'の人です')

after

const name = 'aLiz'
console.log(`私は${name}の人です`)

1 2	const name = 'aLiz' console.log(`私は${name}の人です`)

まとめ

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

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

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

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

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

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