Vue.js学習中です!初心者です!
以下のコードでグローバルコンポーネントが動かないので、原因を教えてくださると幸いです!
理想は、ボタンをクリックする毎にcount+1されるようにしたいです!
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Vue.js</title> 7 </head> 8 <body> 9 <div id="app"> 10 <liked>好き</liked> 11 </div> 12 13 <!-- Vue.js読み込み --> 14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15 <script> 16 // グローバルコンポーネント 17 Vue.component("liked", { 18 data() { 19 return { 20 count: 0, 21 }; 22 }, 23 // テンプレートリテラルでhtmlをまとめる 24 templete: `<button @click="countUp">Like{{count}}</button>`, 25 methods: { 26 countUp: function () { 27 this.count++; 28 }, 29 }, 30 }); 31 // <!-- Vue.js起動(Vueインスタンスの生成) --> 32 var app = new Vue({ 33 el: "#app", 34 }); 35 </script> 36 </body> 37</html> 38
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。