vue全称Vue.js，是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
安装方式
下面是3种引用方式，开发环境表示js文件未压缩，方便开发时阅读源码，而生产环境代表js代码进行了压缩处理，提升线上使用加载速度
1.本地引用下载地址
开发环境：https://cn.vuejs.org/js/vue.js
生产环境：https://cn.vuejs.org/js/vue.min.js
2.cdn方式引用
开发环境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.npm方式
最新稳定版
$ npm install vue
优点
首先这里介绍两种编程范式
1.命令式
原生js和jquery就是命令式，这种方式命令机器如何去做事情，这样不管你想要的是什么，它都会按照你的命令实现。
2.声明式
vue使用声明式，这种方式告诉机器你想要的是什么，让机器想出如何去做。
声明式让我们更好的实现视图与数据的分离，做到所有要显示的数据都响应式
基础语法
原始数据
html
<div id="app">
<span>{{ message }}</span>
</div>
js
const app = new Vue({
el: '#app', //el用于指定挂载的标签范围
data: { //data里存放所有数据，为json格式
message: 'Hello Vue!'
}
})
显示
Hello Vue!
修改数据
js
app.message = "你好 Vue!";
显示
你好 Vue!
进阶语法
使用vue内置的各种指令
条件判断
html
<div id="app">
<p v-if="flag">现在你看到我了</p>
</div>
js
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
在控制台输入 app.flag = false ，你会发现之前显示的消息消失了。
循环
html
<div id="app">
<ul>
<li v-for="subject in subjects">{{ subject }}</li>
</ul>
</div>
js
const app = new Vue({
el: '#app',
data: {
subjects: ['语文','数学','英语']
}
})
添加数据特别简单
js
app.subjects.push('美术');
处理交互事件
举例：使用点击事件做个计数器
html
<div id="app">
<p>{{ counter }}</p>
<button v-on:click="increase">+</button>
<button v-on:click="reduce">-</button>
<!--
上面两行里面的v-on:click可写成@click
<button @click="increase">+</button>
-->
</div>
js
const app = new Vue({
el: '#app',
data: {
counter: 0 //设置初始值为0
},
methods: {
increase: function () {
this.counter++;
},
reduce: function () {
this.counter--;
}
}
})
到这里就算入门vue了，不过真正的应用到项目里面我们还需要更深入的学习，了解他更多的语法知识~