2.vue的导入.html 858 B

12345678910111213141516171819202122232425262728293031323334
  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>Document</title>
  7. </head>
  8. <body>
  9. <div id="app">
  10. {{message}}
  11. </div>
  12. <!--
  13. vue的特点:
  14. 1. 数据驱动视图发生改变 视图驱动数据发生改变(MVVM设计模式=>model view view model)
  15. 数据 -> 视图
  16. 视图 -> 数据
  17. 2.模块化
  18. 3.组件化
  19. -->
  20. <!-- 引入vue文件 -->
  21. <script src="../vue.js"></script>
  22. <script>
  23. // 实例化vue对象 var app = new Vue()
  24. var app = new Vue({
  25. // el 挂载实例化
  26. el: '#app',
  27. // data 实例化中的数据
  28. data: {
  29. message: 'Hello!'
  30. }
  31. })
  32. </script>
  33. </body>
  34. </html>