基本步骤

这里我们不考虑node服务器环境，只考虑最简单的情况，其步骤为：

  1. 引入vue
  2. 编写容器
  3. 定义Vue实例
  4. 完成业务功能

完整demo

引入资源可以使用CDN，当前则本地引入，使用IDE，idea2019.当前结构：
image.png

01vue入门案例.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7. </head>
  8. <body>
  9. <!--2 创建容器-->
  10. <div id="app">
  11.     {{msg}}
  12. </div>
  14. <!--    1 引入vue -->
  15. <script src="../lib/vue.js"></script>
  16. <!-- 3 创建Vue实例和上面的容器绑定-->
  17. <script>
  19.     var vm = new Vue({
  20.         el:'#app',
  21.         data:{
  22.             msg:'烈火刀法，天下第一'
  23.         }
  24.     })
  26. </script>
  27. </body>
  28. </html>

效果

image.png

解释

image.png