效果
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> 12 13 </head> 14 <body> 15 <!-- 先定义一个最外层的div容器。来接收数据。 --> 16 <div id="app"> 17 <!-- 用花括号的方式，去接收动态变量，可以修改的内容。 --> 18 {{message}} 19 {{variable}} 20 hello {{variable3}} 21 天 {{variable4}} 22 {{variable5}} 23 </div> 24 25 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个花括号，这里叫法是插值表达式。插入一个值的意思}}‘ 35 36 37 38 } 39 }) 40 41 </script> 42 </body> 43 </html>