<html> <head> <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）首先要引入https://cdn.jsdelivr.net/npm/vue/dist/vue.js，相当于引入Jquery那样。
（2）在创建一个Vue对象时需要关注两个参数，一个是挂载点el，另一个是数据data。
（3）挂载点el：挂载点用于定位哪个标签，可以使用id选择器、类选择器和标签选择器，一般建议使用id选择器。因为一般在开发中id是唯一的，而类名可以是不唯一的。
（4）在获取数据是，利用{{}}。
（5）Vue实例的作用范围：el选项中命中的元素以及其内部的后代元素。
（6）Vue是否可以设置其他的DOM元素：可以，但是不能使用html和body标签。
（7）data数据中可以存储复杂的对象：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" class="app"> <ul> <li>{{ message }}</li> <li>{{school.name}}</li> <li>{{school.age}}</li> <li>{{hobby[0]}}</li> <li>{{hobby[1]}}</li> </ul> </div> <script> var app = new Vue({ el: ‘.app‘, data: { message: ‘Hello Vue!‘, school: { name: "张三", age: 18, }, hobby: ["gameing", "reading"] } }); </script> </body> </html>
渲染数据类型时，遵守js的语法即可。
原文：https://www.cnblogs.com/xiximayou/p/12313612.html