Help us understand the problem. What is going on with this article?

Vue.js 3.0(beta 20) helloworld

Vue.js 2.x で書いた hello world を Vue.js 3.0 beta を使って書き換え

CDNを使ってHTMLファイルとして作っています。
Composition APIは使ってません。

Vue.js 2.x

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>hello world</title>
<div id="app">
  <p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: { display: 'Hello World!' }
  });
</script>

Vue.js 3.0.0-beta.20

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>hello world</title>
<div id="app">
  <p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.20/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data: () => ({
      display: 'Hello World!'
    })
  });
  app.mount('#app');
</script>

ポイント

  • Vueコンストラクタの代わりに、createAppを使います。
  • data オプションはコンポーネントと同様に、関数にする必要があります。
  • elオプションの代わりに、mountを使います。
ha6_6ru
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away