#3 Vue.js基礎（v-on）
kurumin
プログラミングのーと
#1 Vue.js基礎（プロジェクトの作成～デプロイ）
kurumin
Contents
Vueプロジェクトの作成・起動
プロジェクト作成
npm init vue@latestパッケージインストール
npm i開発用サーバ起動
npm run dev単一コンポーネント
<script setup lang="ts">
<!-- スクリプトブロック -->
</script>
<template>
<!-- テンプレートブロック -->
</template>
<style scoped>
<!-- スタイルブロック -->
</style>拡張子は.vueとする。
lang=”ts”
TypeScriptを記述する場合はこの属性を指定する
setup
スクリプトブロックのコードが簡略化できる、おまじないのようなもの
記述の基本
<script setup lang="ts">
import { ref } from "vue";
let name = ref("たろう");
</script>
<template>
<h1>はろー！{{ name }}さん！</h1>
</template>データを表示するマスタッシュ構文
変数を表示する構文。
{{ name }}テンプレートに表示させる変数を定義するref()
単に宣言するだけではだめで、ref()関数を利用する。
let name = ref("たろう");ref()関数で定義した変数を、テンプレート変数という。
ref()関数で用意した変数は、値の変化に応じて表示内容が自動で変わる仕組み（リアクティブ）になっている。
テンプレート変数を更新するには、以下の構文。
let name.value = "はなこ";リアクティブデータ
計算結果をリアクティブにするcomputed()関数
下記のように、マスタッシュ構文の中で計算することもできるが非推奨。
{{ PI * radius * radius }}areaのようなテンプレート変数を用意し、スクリプトブロック内で計算してarea変数を出力することは可能だが、もしもradiusにMath.random()関数を使用し1秒ごとに表示を変更するアプリケーションを作成する場合は算出プロパティという方法を利用することになる。
<script setup lang="ts">
import { ref, computed } from "vue";
const radiusInit = Math.round(Math.random() * 10);
const PI = ref(3.14);
const radius = ref(radiusInit)
// 円の面積の算出プロパティを用意
const area = computed(
(): number => {
return radius.value * radius.value * PI.value;
}
);
// 半径のテンプレート変数に新しい乱数を1秒ごとに格納
setInterval(
(): void => {
radius.value = Math.round(Math.random() * 10);
},
1000
);
</script>
<template>
<p>半径{{ radius }}の円の面積を円周率{{ PI }}で計算すると、{{ area }}</p>
</template>computed()関数
引数には、計算結果をリターンするアロー式を記述する。
省略型でもOK。
const area = computed(
(): number => radius.value * radius.value * PI.value
);(): void
retunがない関数
オブジェクトをまとめてリアクティブにするreactive()
毎回ref()を用いてリアクティブ変数にしてきたが、複数のデータをひとつのオブジェクトとして扱い、まとめてリアクティブにすることもできる。
<script setup lang="ts">
import { reactive, computed } from "vue";
const data = reactive({
PI: 3.14,
radius: Math.round(Math.random() * 10)
});
const area = computed(
(): number => {
return data.radius * data.radius * data.PI;
}
);
setInterval(
(): void => {
data.radius = Math.round(Math.random() * 10);
},
1000
);
</script>
<template>
<p>半径{{ data.radius }}の円の面積を円周率{{ data.PI }}で計算すると、{{ area }}</p>
</template>reactive()
オブジェクト名.プロパティ名でアクセスする必要があるため、一長一短。
基本的にはref()関数を利用すれば問題ないが、オブジェクトをまとめてリアクティブデータにする必要がある場合はreactive()を利用する。
デプロイする
npm run build上記コマンドを実行すると、distフォルダが作成される。
publicフォルダとindex.html
publicフォルダは、デプロイしたときにそのままdistフォルダに格納される。
distのindex.htmlはどこからくるかというと、プロジェクトファイル直下に存在する。
main.ts
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
import ‘./assets/main.css’ ＆ import App from ‘./App.vue’
モジュールをインポートしてるだけの文。
import { createApp } from ‘vue’
Vueアプリケーションを作成する処理。
createApp()の引数には、起点となる単一コーポネントファイルを渡す
createApp(App).mount(‘#app’)
mount()は、createApp()によって生成されたVueアプリケーションを表示するメソッド。
結果、App.vueに記述された内容が、#appタグ内にレンダリングされ、表示される仕組みとなっている。
必要に応じて、App.Vueから他の単一コンポーネントファイルを読み込む。
通常、これらのApp.Vueから読み込まれるコンポーネントファイル類は、src/componentsフォルダ内に格納する。
ABOUT ME
