初始vue，hello vue （一看就懂）
阿新 • • 發佈：2021-07-14
效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>初始Vue</title> 7 8 9 10 <!-- 得用 開發環境版本，包含了有幫助的命令列警告 --> 11 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 1213 </head> 14 <body> 15 <!-- 先定義一個最外層的div容器。來接收資料。 --> 16 <div id="app"> 17 <!-- 用花括號的方式，去接收動態變數，可以修改的內容。 --> 18 {{message}} 19 {{variable}} 20 hello {{variable3}} 21 天 {{variable4}} 22 {{variable5}} 23 </div> 2425 26 <script> 27 var app = new Vue({ 28 el: '#app', 29 data : { 30 message:'Hello Vue!', 31 variable:'歡迎來到Vue框架世界', 32 variable3:'張三',// 等於字串拼接了。 比如卦象拼接。 33 variable4:'地否卦象', 34 variable5:'{{2個花括號，這裡叫法是插值表示式。插入一個值的意思}}' 3536 37 38 } 39 }) 40 41 </script> 42 </body> 43 </html>