快速入手 · Vue速学快练立上手

### 基于HTML的示例典型的HTML页面除了基本的HTML标签之外，使用JS添加动态功能，　使用CSS美观页面的效果。最常见使用`<script>`和`<style>`标签导入JS和CSS文件， Vue虽然是JS框架，但其最终也是遵循基本的原理。最简单也易于理解的方式，导入Vue的JS和CSS在HTML页面中。看下面的代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>getting Started</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html> ``` 上面的代码中： 1. <div id="app"> 的内容是 {{ message }} ，看起来像一个变量（不过不行Vue的JS，则页面的显示就是{{ message }} ）。 2. var app = new Vue() 的语法是创建一个Vue类型的对象，参数对象包含两个属性： * el 的值是 # + 需要渲染的div的ID * data：数据的对象，设置了div 中需要替换的数据。这种方式有一个名字是声明式渲染，也是Vue的核心，即使用简洁的模板语法将数据和页面的元素进行结合。 ### 响应式渲染需要注意的是，Vue渲染后的结果不是动态的，而是响应式的，也就是说，修改js数据对象的值之后，页面也会同步更新。以在Chrome中动态修改上面的message的值为例。在Chrome控制台的Source标签页下，输入`app.message="GoodBye Vue"` 之后，页面的显示的同步更新了，效果如下图。 ![](https://img.kancloud.cn/1c/98/1c988aff6a00b36b986c7872cdb66a0f_1097x518.png)