JavaScript! - Vue.js -使い方の基本。

2022年7月19日 06:22

いろんな方が説明されていますが、自分なりに理解ができるように整理していきます。　　　　

VueJSの導入する方法ですがnode.jsを使ってサーバ、自分パソコンにインストールして使う方法もありますが、

簡単に"CDN"をリンクして使う方法で試していきます。

"CDN"を使う方法はホームページHTMLに組み込んで使うことができ1ページのみのページでも作ることもできお手軽です。

"CDN"です。

<script src="https://unpkg.com/vue@next"></script>

簡単の基本のHTMLの中に入れ込みます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
body{
font-family: sans-serif;
}
  </style>

<script src="https://unpkg.com/vue@3"></script>

  <title>Vue.js</title>

</head>
<body>

 // この部分に書いていく。

</body>
</html>

そしてVue.jsは<body>の中に<scrip>タグを作ってそこに書いていきます。

使い方、HTML、script の例ですが、

 <div id='app'>
    <h1>{{ message }}</h1>
  </div>

<script>
  Vue.createApp({
    data(){
      return{
        message: "Hello World"
      }
    }
  }).mount('#app')
</script>

const app = {
     data(){
        return{
           message: "Hello World"
        }
     }
 }

 Vue.createApp(app).mount('#app')

最初のは変数を使わずに直接" Vue.createApp"に入れています。

ここで、上記のようにdata(){}として使うこともできますが、Vue3からはsetup()を使うことができるようになっています。

"data(){}"を使うタイプを"OptionAPI"と呼びます。新しく"setup"を使うタイプを"CompositionAPI"と呼びます。

大規模、複雑なものを作るときは"CompositionAPI"の方がコードの見通しがよく使い勝手も良くなています。

このへんがVue2とVue3との違いになり、少しわかりにくい印象があります。

なので今後は"CompositionAPI"に移行していくものと考えます。

const app = {

        setup(){

          return{
             message : "Hello World"
          }
        }
      }
Vue.createApp(app).mount('#app')

という感じで変更できます。

あと、

message : "Hello World"

としていますが、これを、

setup() {
　　const message = Vue.ref("Hello World");

と書いて、HTMLで書いている

<h1>{{ message }}</h1>

の"message"を参照できる仕組みとなっています。

このHTMLを表示させると{{ message }}に"Hello World"が挿入されるということになります。

HTMLの要素を参照してデータを入れていくことができます。

Vue3の説明がdata()を使ったものとsetup()が使われているサイトがあるので整理しとかないと混乱の元になるので注意が必要です。どちら使っても良いが、data()はVue2で使われていたもの、setup()は新しく使い回しなどしやすく改良されているものとして理解しておいた方が良いと思います。

Vue3ではdata()はVue2と同じように使えるのでまずは使いやすい方から使えば良いのではないでしょうか。

この記事が気に入ったらサポートをしてみませんか？