はじめに
Vueを学習する必要がありました。
差し当たって、
- 定評がある（人気がある）
- 中古本で大量に出回って安く買える入門書
ということで、探したところ、以下の本が良さそうでした。
技術評論社 「Vue.js入門 基礎から実践アプリケーション開発まで」(ISBN978-4-297-10091-9)
中古本の難点
2018年に出版されているので、最新のバージョンではない、あるいは現在のトレンドから外れていたりします。
この本の場合、Vue2.x→Vue3.xへ破壊的変更がされているという難点があります。
本書は、Vue2.xで書かれています。
Vue3.Xの書き方
Vue2.xの記述方式をVue3.xに替えたら特に問題ないでしょう？
ということで、最初に出てくるソースコードを書き換えてみたところ、以下のようになりました。
CDNの読み込み、インスタンス生成の記述方法から違いますね。
Vue2.X
<!DOCTYPE html>
<title>はじめてのVue.js vue2.x</title>
<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app"></div>
<script>
new Vue({
template: '<p>{{msg}}</p>',
data: {msg:'hello!!'}
}).$mount('#app')
</script>
Vue3.X
<!DOCTYPE html>
<title>はじめてのVue.js vue3.x</title>
<div id="app"></div>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.3.4/dist/vue.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
template: '<p>{{msg}}</p>',
data() {
return {
msg: 'hello world'
}
}
}).mount('#app')
</script>
本書の進め方
- Vue開発で必要なことが一通りわかるようになっているので、まず、Vue2.xで書いてある通りにやってみる。
- Vue3.X向けに書き直してみる。この書き直しで、自分で調べて努力するので、普通にすすめるより力がつくかもしれない・・・。
最後に
私自身は、Vue2.0のソースコードを改修する作業のために学習し始めたので、Vue3.Xにする必要ないんですけども。