一、 Vue.js 是什么？
官网的描述：Vue 是一套用于构建用户界面的渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
这里有几个关键字： 渐进式框架、现代化的工具链、支持类库
1、用一个例子说明
我们现在很多界面排版的方式，div布局：
Vue是怎样渐进式到现有的界面上去呢，Vue提供一个很直接的方式就是像JQuery那样，直接引入包的Vue.js（这个包在官网就可以直接下载） <script src="./vue.js"></script> ,然后你就在现有的界面上使用Vue的东西，然后界面就是变成这样下面的图，某个div或者是板块变成Vue框架，你现有的其他界面是完全没有影响的，现在我们界面使用出现两个不同类库，这就是Vue的现代化的工具链、支持类库，当你一步步把一个个板块替换，最后整个界面都是Vue框架，完成整个界面重构的效果，这就是Vue的渐进式框架
2、引入使用
官网-起步 ，在官网上有详细介绍了几种引入方式。这里我就不说了，看一下官网就好了
三、声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
我来编写了一个例子，分别是javaScript、jQuery、Vue的写法来说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello </title>
</head>
<body>
<!-- javascript -->
<h2 id="app1"> hi javascript </h2>
<!-- jQuery -->
<h1 id="app2" class="title"> hi juqery</h1>
<!-- vue -->
<div id="app3">
<h1>{
{message}}</h1>
<ol>
<li v-for="item in lists">{
{item.index}}{
{item}}</li>
</ol>
</div>
</body>
<script src="./jquery.min.js"></script>
<script src="./vue.js"></script>
<script>
var h1 =document.getElementById("app1")
h1.innerHTML='嘻嘻'
$(function(){
var h1 = $("#app2");
$('.title').html('hello jquery');//修改后的内容
})
const app = new Vue({
el: "#app3",
data: {
message: "hello vue",
lists: ["java","C","C++","Vue","react"]
}
})
</script>
</html>
1.javaScript、jQuery两个的写法就是按照写的代码一步步执行，最后实现界面效果，这种编程方式就是我们说命令式编程，就是我们来告诉计算机，你第一步干什么，第二步干什么，第三步...
2.Vue，它只是把id的交给了Vue的el这个元素做管理，然后在data做数据DOM，没有那些步骤操作，我们表面看到就是这样，很简洁。但是你了解到vue源码就会知道，其实Vue做了很多很多操作，只是这些操作我们没看到。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的,这就是一个声明式渲染。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
学习参考：binggoling