什么是Vue
Vue是一个基于JS的渐进式框架。那什么是渐进式框架？渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验；并能搭配不同的模块、框架一起使你的程序更丰富。
Vue的特点
- 解耦视图和数据；
- 可复用的组件；
- 前端路由技术；
- 状态管理；
- 虚拟DOM等。
使用Vue
- CDN引入；
<script src="https://cdn.jsdelivr.net/npm/vue"></script> - 下载后引入；
开发环境 https://vuejs.org/js/vue.js，生产环境 https://vuejs.org/js/vue.min.js - NPM安装；
npm install vue -g
Vue的MVVM
MVVM就是指Model层、View层和View Model层；
- Model层：数据层，这里指的数据可能是我们自定义的数据，也可以是网络请求的数据；
- View层：视图层，也就是HTML中常说的DOM层，主要是显示各种数据信息等；
- View Model层：视图模型层，是View层和Model层沟通的桥梁；一方面它实现了数据绑定，将Model层的改变实时反应到View层中；另一方面它也实现了DOM监听，当DOM发生改变可以对应改变数据。
举例：在输入框中输入数据，并实时显示到页面上。
...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" id="input" v-model="inputVal"/>
<span id="span">{{inputVal}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
inputVal:''
}
})
</script>
</body>
...
第一步：引入Vue并创建一个Vue对象；
第二步：创建Vue对象的时候，传入了一个options；
- el：该属性决定了这个Vue对象挂载到哪一个元素上，我们这里挂载到了id为app的元素上；
- data：该属性中通常会存储一些我们自定义的数据；
- methods：该属性存储我们自定义的函数；
- created：该属性是Vue的生命周期函数，除了created外还有mounted、updated、destroyed、beforeCreate、beforeMount、beforeUpdate、beforeDestroy等等。具体使用说明可参照官方文档。
第三步：绑定数据。在input中绑定一个自定义数据inputVal后，那么input的输入值改变时就会实时改变inputVal并同步显示在span上。
