Vue3 入門

Vue.js はプログレッシブ JavaScript フレームワークであり、主にユーザーインターフェースを構築するために使用されます。

Vue の学習を始めたばかりの場合は、vue-cli コマンドラインツールを使用してプロジェクトを作成することはお勧めしません。より簡単な方法は、ページに直接 vue.global.js ファイルを導入して学習・テストすることです。

Vue3 のアプリケーションは createApp 関数を使用して作成されます。構文形式は次のとおりです：

const app = Vue.createApp({ /* 根组件选项 */ })

createApp に渡されるオプションは、ルートコンポーネントを構成するために使用されます。

アプリケーションインスタンスは、.mount()メソッドを呼び出した後にのみレンダリングされます。.mount()メソッドは「コンテナ」パラメータを受け取ります。これは、実際の DOM 要素または CSS セレクタ文字列です：

<div id="app"></div>
app.mount('#app')

簡単なインスタンス：

Vue.createApp(HelloVueApp).mount('#hello-vue')

createApp のパラメータはルートコンポーネント（HelloVueApp）です。アプリケーションをマウントするとき、このコンポーネントがレンダリングの起点になります。

アプリケーションは DOM 要素にマウントする必要があります。上記のコードでは、mount('#hello-vue')Vue アプリケーション HelloVueApp を

にマウントしています。

次に、Hello Vue!!のコードから学習を始めましょう。

Vue 3.0 インスタンス

<div id="hello-vue" class="demo"> {{ message }} </div> ​ <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } ​ Vue.createApp(HelloVueApp).mount('#hello-vue') </script>

試してみる »

「試してみる」ボタンをクリックしてオンラインインスタンスを表示します

上記のインスタンスでは、まず HTML ページに Vue の JS ファイルを導入します：

<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>

HTML ページには div 要素があります：

<div id="hello-vue" class="demo">
  {{ message }}
</div>

mount('#hello-vue')Vue アプリケーション HelloVueApp を

にマウントしています。

{{ }}オブジェクトのプロパティと関数の戻り値を出力するために使用されます。

{{ message }}アプリケーション内のmessageの値に対応します。

ルートコンポーネントテンプレート

ルートコンポーネントのテンプレートは通常、コンポーネント定義に埋め込まれますが、マウントポイントのコンテナ内に直接テンプレートを定義することで個別に指定することもできます。

インスタンス

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    };
    return { count, increment };
  }
});

app.mount('#app')
</script>

試してみる »

ルートコンポーネントに template オプションが設定されていない場合、Vue は自動的にコンテナの innerHTML をテンプレートとして使用します。

コードの説明：

  • 使用するsetup関数：Vue 3では、コンポーネントのロジックは通常setup関数内で定義されます。ここではsetup関数を使用してリアクティブデータを定義しますcountとメソッドincrement。

  • 使用するref：setup関数内で、refを使用してリアクティブデータを作成しますcount。

  • 定義するincrementメソッド：incrementメソッドを定義してcountの値を増やします。

  • リアクティブデータとメソッドを返す：setup関数内でcountとincrementを返します。これにより、テンプレート内でアクセスして使用できるようになります。

data オプション

data オプションは関数です。Vue は新しいコンポーネントインスタンスを作成する過程でこの関数を呼び出します。この関数はオブジェクトを返す必要があります。その後、Vue はリアクティブシステムを通じてそれをラップし、$data としてコンポーネントインスタンスに保存します。

インスタンス

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// vm.count の値を変更すると $data.count も更新されます
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 逆も同様です
vm.$data.count = 6
document.write(vm.count) // => 6

試してみる »

上記のインスタンスプロパティは、インスタンスが最初に作成されたときにのみ追加されます。そのため、それらがすべて data 関数が返すオブジェクト内にあることを確認する必要があります。

メソッド

コンポーネントにメソッドを追加するには、methodsオプションを使用します。このオプションは、必要なメソッドを含むオブジェクトです。

次のインスタンスでは、methods オプションを追加しました。このオプションにはincrement()メソッドが含まれています：

インスタンス

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` はこのコンポーネントインスタンスを指します
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

試してみる »
その他の拡張