vue3 الدرس الاول طباعة متغيرات جافاسكريبت داخل html

مقدمة

1- اولا نقوم بانشاء الصفحة الرئيسية index.html في اي مكان تريد في سطح المكتب مثلا ونكتب الكود التالي


 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <div id="app">
        {{ counter }} 
    </div> 
    <script> 
       const Counter = {
         data() {
           return {
             counter:0 
           }
         }
       }  
       Vue.createApp(Counter).mount('#app')
    </script> 
    </body>
    </html>

النتيجة