巷で人気のVue.jsだが、初心者にとってわかりづらかった点など。
どっからどこまでが予約語なのよ
Vue.jsの本家サイトも、どの初心者サイトも、概略を伝える際に、予約語がどこまでなのかわからないのが辛かった。色分けしといてくれたらいいのに。大文字にするんでもいいけど。
本家サイトの右上にある「学ぶ」にマウスオーバーするとAPI一覧が見られる、と気づいたのはだいぶ後になってから（まあGoogleで検索すれば出てくることは出てくるんだけど）。概略を伝える早めの段階で、APIの全体像を見せた方がいいと思う。
APIの中でも「オプション / データ」「オプション / DOM」あたりに書いてあるのが頻出する基本の語なので、この辺ざっと見ておくと予約語がぴっとわかってよろしい。
scriptの読み込みタイミング
これはJavaScript初心者っぽくて嫌だが「Cannot find element」的なことを言われてかぎ回ってから「ああ、DOMが先に読まれちゃってんのか……」てなる。
なんとなくscript要素はhead要素内にお行儀よく入れておきたい性癖というのがあって、bodyの後ろに読み込ませるのは少々気になる。かといってDOMEventListener書くのも面倒……。
調べてみたら、Vue.jsではmountedかnextTickを使うみたい？
要するに「ライフサイクルフック」と呼ばれているものが、イベント発火的に使えるらしい。
この辺りのオプションの「データ」とか「DOM」とか「ライフサイクルフック」だのが一緒くたになって説明されている辺りも、初学者にとっては「えっ？ これはデータでこっちは発火イベント？」みたいになって理解を妨げると思われる。
私の結果的には、HTML5ではscript要素を外部ファイルにしてdefer属性つけると、読み込んでおいて実行を後回しにしてくれるというのでやっと動いた。これ便利だな。
<script src="dateDisplayApp.js" defer></script>
Vueインスタンスの直下にぶら下がっている
JavaScript的に言えば当然なのかもしれないけれど、このオブジェクト的な書き方とVueインスタンス直下にぶら下がってる感が一致してなくて戸惑う。
vm = new Vue({
data:{
foo1: value1,
foo2: value2
},
computed: function(){
bar1:{
get:function(){},
set:function(){}
}
},
methods:{
hoge: function(){},
fuga: function(){}
},
});
// アクセスするときは直下
vm.foo1
vm.bar1
vm.hoge()
vm.fuga()
// こうではないらしい
vm.methods.hoge()
この辺も慣れないとわかりづらい。
