1. 准备工作
- 新建一个test01.html文件
- ! + Tab 键生成模板，注：(！为英文的叹号)，如下图
- 打右键开Open with Live Server
2. 编写代码
2.1 引入Vue
1. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.2 添加一个div标签
1. <div id="app"> 2. <!-- 差值表达式，可以理解为变量语法 --> 3. {{message}} 4. </div>
2.3 创建Vue实例
1. <script> 2. var app = new Vue({ 3. el: '#app', //el 挂载点，此处使用的是id选择器 4. data: { 5. message: 'Hello Vue!' // data：数据对象 6. } 7. }) 8. </script>
2.4 保存(Ctrl +s)并查看结果
2.5 总结
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
2.6 完整代码
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. </head> 8. <body> 9. <div id="app"> 10. {{message}} 11. </div> 12. 13. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 14. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15. 16. <script> 17. var app = new Vue({ 18. el: '#app', 19. data: { 20. message: 'Hello Vue!' 21. } 22. }) 23. </script> 24. 25. 26. </body> 27. </html>
