# vuejs 開発時に遭遇したエラーリスト
# jquery のように vuejs を使う場合
npm yarn でインストールして vue-cli やフレームワークで稼働するのが一般的になった今、社内のホームページがまだドリームウエーバーで作られていることもあって、どっちかというと jQuery の方が多く利用されています。
だが、vuejs 使いたい気持ちは粘り強く jQuery から脱出して速く vuejs に乗り換えたい。
cli なしで vuejs 導入記録
head 部分に導入 正式名称ではインストール
<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
body のどこかに 正式名称では宣言的レンダーリング
<div id="app">
{{ message }}
</div>
fotter に挿入
data の値を変更するとリアルに再度レンダーリングしてくれることの正式名称はリアクティブ
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
});
</script>
レンダーリング後結果表示
Hello Vue!
# Error compiling template エラー
[Vue warn]: Error compiling template
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
# Avoid using non-primitive value as key, use string/number value instead エラー
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead
v-for のkeyセットは文字と数字しか許可してません。配列やオブジェクトを key として入れるとこのエラー出ます。
エラー起こす NG 例
<div v-for="item in items" :key="item">
{{item}}
</div>
問題なし OK 例
<div v-for="(item, index) in items" :key="index">
{{item}}
</div>