![見出し画像](https://assets.st-note.com/production/uploads/images/38637586/rectangle_large_type_2_3140e50107e33cb59b71a97f170e65a5.png?width=1200)
Vue.jsは3.0が公開されています。
v2系のVueを使ってきましたが、v3.0が9月に公開されたようです。どこが変わったかを調べて見ました。参考ページです。
公式ページです。
まず、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(...)
となっていました。
他のもまだまだたくさんあるようです。ボチボチやっていきましょう。
この記事が気に入ったらサポートをしてみませんか?