vue是一个渐进式的javascript，可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验，也可以使用更多的vue核心库去进行开发。
vue是一个轻量级的mvvm框架，通过数据驱动和组件化进行前端开发，通过简单的api就能实现响应式的数据绑定和组合的视图组件。
首先要导入vue 的js
<script src="vue-2.4.0.js"></script>
1.
| <body> <div id="app"> <h2>Hello {{name}}</h2> </div> </body> <script> let app= new Vue({ el: '#app', date:{ name: 'Vue' } }) </script> |
1.创建一个vue对象，浏览器内存中就有一个vue
2.创建vue的时候，传入一个参数，这个参数是一个对象options
3.参数中有el属性，该属性决定了这个vue对象挂载到哪一个元素上。
4.参数中有date属性，该属性定义存储大部分的数据，这些数据可以自己直接定义，也可以从网络中获取。
2.vue列表循环显示
| <body> <div id="app"> <ul> <li v-for="item in books">{{item}}</li> </ul> </div> </body> <script> let app = new Vue({ el: '#app', data: { books: ['vue', 'Vue从入门到精通', 'java从入门到放弃', '数据库从入门到删库'] } }) </script> |
3.计算器案例
| <body> <div id="app"> <h3>当前计数：{{count}}</h3> <button @click="addCount">加</button> <button @click="delCount">减</button> </div> </body> <script> let app = new Vue({ el: '#app', data: { count: 0 }, methods: { addCount() { this.count++ }, delCount() { this.count-- } } }) </script> |
@click 这是vue中监听点击事件的方式，而@click需要指定发生点击时所执行的方法，该方法是在methods中定义的。
什么是mvvm
mvvm：能够帮助我们减少不必要的dom操作，提高渲染效率，数据绑定单向，双向，通过框架提供的一些指令，我们只需要关注数据业务逻辑，不需要关注dom是如何渲染的，在vue中，一个最核心的思想就是不让用户去操作dom元素。
model: 对应数据层的域模型，它主要做数据的管理，通过ajax/fetxh/axios等api完成客户端和服务端的model同步，在层间关系里，它主要用于抽象出viewmodel中的model。
view：view是作为视图模板，用于定义结构，布局。它自己不处理数据，只是将viewmodel中的数据展现出来。
viewmodel：viewmodel起着链接view和model的作用，同时用于处理view中的逻辑。viewmodel从model中取数据，渲染到view中。
来源：oschina
链接：https://my.oschina.net/u/4610504/blog/4501667