vueの基礎編

今回からVueの基礎をやっていこう。

Vueの書き方

Vueでは{{ }}この中にデータを反映される。マスタッシュ構文と言う。

<p>{{ message }}</p>

<script>
import { ref } from 'vue'
const message = ref("こんにちは")
</script>

class・IDなどにもマスタッシュは使える

ディレクティブ

v-を使う。v-bindやv-ifなど色々あるので後記する。

v-bind

v-bind:△△="⚪︎⚪︎"
要素の△△属性の値として、変数⚪︎⚪︎の値を設定する。

<a v-bind:href="url">{{ url }}</a>
<script>
import { ref } from 'vue'
const url = ref('https://www.yahoo.co.jp/')
</script>

省略:hrefのように:とつける事で可能

v-on

関数を設定する

<template>
<button v-on:click="aaa"></botton>
</template>
<script setup>
function aaa() {
// clickされたら時の処理
}
</script>

省略@clickのように@とつける事で可能

v-model

v-onとv-bindの相合した感じ。ユーザーの入力や操作に対して行う

<template>
<input type="text" v-model="content">
<p>{{ content }}</p>
</template>
<script setup>
const content = ref('')
</script>

条件付きレンダリング v-if

v-ifを使ってレンダリングに条件をつける

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
<script>
// importは省略
const awesone = ref(true)
</script>

リストレンダリング v-for

v-forでリストを繰り返し表示する

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item.name }}・{{ index }}</li>
  </ul>
</template>

<script setup lang="ts">

interface aaa {
  name:string,
  age:number,
}
const list:aaa[] = [
  {name:"太郎",age:20},
  {name:"二郎",age:30},
  {name:"三郎",age:40}
  ]
</script>

list配列にあるオブジェクトをv-forで表示する
list一つ一つをitemに渡し表示している。

v-html

<template>
<p>{{ htmlStr }}</p>
<p v-html="htmlStr"></p>
</template>

<script setup>
import {ref} from "vue"
const htmlStr = ref(`<a href="www.google.com">Vue.jsのTOPページ</a>`)
</script>

上記を実行すると、文字列としてタグが出るマスタッシュ構文と
ちゃんと機能している構文に分かれる。v-htmlはタグを解釈してくれる。

マスタッシュ構文が一瞬見える時の解決

v-cloak

<p v-cloak>{{aaa}}</p>

タグにv-cloakと入れるとレンダリングされた後にしか出ない。