Vue预习课02：Hello World.pdf

vue的基础使用

  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>
  10.   <!-- 1.宿主元素 -->
  11.   <div id="app">
  12.     {{title}}
  13.   </div>
  15.    <!-- 引入vue文件 -->
  16.   <script src="vue.js"></script>
  18.   <script>
  19.     // 将vue绑定到宿主元素中
  20.     // 1.创建vue实例
  21.     const app = new Vue({
  22.       el: '#app',
  23.       data: {
  24.         title: 'hello, vue'
  25.       }
  26.     })
  27.     setTimeout(() => {
  28.       // 更改vue实例中的数据
  29.       app.title = 'change title'
  30.     }, 1000)
  31.   </script>
  32.   <script></script>
  33. </body>
  34. </html>

Vue的设计思想

  • vue是数据驱动应用
  • vue是MVVM（Model、View、ViewModel ）的践行者

image.png
模型中的数据通过VM绑定在视图中
在视图的事件通过VM可以更改模型中的数据

MVVM框架的三个要素：响应式、模板引擎、渲染
响应式：vue如何监听数据的变化
模板：vue的模板如何编写和解析
渲染：vue如何将模板转换为html

响应式：数据更改后视图会发生变化 模板引擎：将模板编译成render函数（即渲染函数） 渲染：当页面的数据发生变化的时候，执行渲染函数，渲染函数执行之后生成虚拟DOM，新旧虚拟DOM进行比较，转换成html。

上述过程不需要用户操作DOM元素，提升的用户开发的效率