Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
导入Vue.js
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
{{ message }}
</div>
{ }叫做差值表达式，可以理解成模板的语法，作用就是把数据跟页面结构关联起来
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue!‘
}
})
el: ‘#app‘, //#号是id选择器，跟HTML中id为app的div关联起来
Vue实例的作用范围是什么？
是否可以使用其他的选择器？
是否可以设置其他的dom元素？
<body>
<div id="app">
{{ message }}
<h2> {{ school.name }} {{ school.mobile }} </h2>
<ul>
<li>{{ campus[0] }}</li>
<li>{{ campus[1] }}</li>
<li>{{ campus[2] }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
message: "HealthBody",
school: {
name: "焦虑烧麦 ",
mobile: "400-300-123",
},
campus: ["人大", "建筑", "设计"]
}
})
</script>
</body>
原文：https://www.cnblogs.com/jaolvv/p/14680836.html