【はじめまして Vue.js】はじめの一歩

Vue.js

Last updated at 2024-11-11Posted at 2024-11-11

はじめに

これまでReactしか触れてきませんでしたが、ここに来てVue.jsの知識習得の必要が出てきたため、インプット定着のためのアウトプットの場としてブログにメモを残していこうと思います。

筆者レベル感

React：大体わかる、実装できる
Vue.js：名前は知っているけど中身は一切知らない

Vue.jsの基本

まずはindex.html, main.js, App.vue を理解する

index.html

アプリケーションの土台のHTMLファイル。<div id="app"></div>ではmain.jsで定義したVueアプリケーションが表示される
main.jsでこの要素にVueアプリケーションがマウントされている

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js

Vueインスタンス（アプリケーションの起点）を作成や、ルートコンポーネント（App.vue）を画面にマウントするなど、アプリ全体の初期設定を行う

main.js

import { createApp } from 'vue' // vueのアプリケーションを構築
import App from './App.vue' // component

const myApp = createApp(App)

// createAppで構築したUIを表示できるようにする
// 以下の引数の #app は、index.htmlのid=appを指している
// id=appを持つ要素に、ここで構築したUIを渡す
myApp.mount('#app')

*.vue

コンポーネントを定義するファイル
通常、<template></template>、<script></script>、<style></style>の3部構成
単一ファイルコンポーネント(SFC:Single File Component)と呼ばれる
App.vueはルートコンポーネント

App.vue

<script setup>
// ここにはjavascriptを書いていく

const message = 'Hello!'
const name = 'meme'

console.log(`${message} My name is ${name}.`)


</script>

<template>
  <!-- 表示させる内容を記載する -->

  <h1>{{ message }}</h1>
  <h2>Welcome to my page.</h2>
  <h3>My name is {{ name }}.</h3>
  
</template>

<style>
/* ここにはCSSを書いていく */
h1 {
  color: orange;
}

h2 {
  color: green;
}

h3 {
  color: pink;
}

</style>

本当に基礎の基礎からのスタートなので、少しずつ重ねてゆきます🙏
もし間違いや、誤解を招きそうな表現がありましたら、お手数ですが
ご指摘をいただけますと幸いです！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up