Vue.jsは3.0が公開されています。

JavaScriptフレームワーク「Vue.js 3」が公開 | OSDN Magazine

v2系のVueを使ってきましたが、v3.0が9月に公開されたようです。どこが変わったかを調べて見ました。参考ページです。

Vue 3の新しい機能と変更点・全11件 – console dot log

公式ページです。

Vue.js

まず、CDNは

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

となっています。HTMLは

<div id="app">
 {{ message }}
</div>

そして、スクリプトですが

const App = {
 data() {
   return {
     message: 'Hello Vue!!'
   }
 }
}

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

となります。

ブラウザで確認すると、

Hello Vue!!

と表示されます。

Vue.js 2.xの場合は

new Vue({
   el: '#app'
   
    data: {
      message: 'Hello Vue!!'
    }
});

となっていました。もう一度整理すると、

data変数の設定が関数のみとなっています。

data() {
   return {
     message: 'Hello Vue!!'
   }
 }

Vueの"Components"(コンポーネント)も変わっています。

基本形は

// Create Vue application
const app = Vue.createApp(...)

// Define a new component called todo-item
app.component('todo-item', {
 template: `<li>This is a todo</li>`
})

// Mount Vue application
app.mount(...)

Vue.js 2.xの場合は

// todo-item と呼ばれる新しいコンポーネントを定義
Vue.component('todo-item', {
 template: '<li>This is a todo</li>'
})

var app = new Vue(...)

となっていました。

他のもまだまだたくさんあるようです。ボチボチやっていきましょう。