1、vue
简介
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。vue是国人开发的，文档对国人还是很友好的，很多东西可以直接去官网找。优缺点
- Vue.js是一套构建用户界面的框架，只关注视图层，易上手，有配套的第三方类库。
- 提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
- 一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目
2、环境安装
nodejs安装：https://nodejs.org/en/npm安装淘宝镜像：npm install -g cnpm –registry=https://registry.npm.taobao.org安装webpack：cnpm install webpack -g安装vue-cli。npm install –global vue-cli环境安装：cnpm install运行Vue项目：npm run serve
3、前端的MVVM
前端视图层的概念，主要把每个页面分成了M（Model）、V（View）、VM（VM ViewModel）。VM是其中核心，M和V间的调度者。前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）。
M：保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你个数组，此数据即为M）。V：每个页面的html结构。VM：一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。
4、常用指令
vue指令都是以v-xxx开头的，vue指令都可以作为标签属性直接使用。
v-text
更新标签的文本内容，如果包含dom标签会当做字符串直接显示。1
<p v-text="msg"></p>v-html
如果内容包含dom标签，可以渲染成相应的组件。1
2
3
4
5
6
7
8
9
10
11
12
13
14var vue = new Vue({
el:"#app",
data:{
info:"worlds",
ht:"<tr><th>hello</th></tr><tr><th>你好</th></tr>"
},
methods:{
add(msg){
vue.info = msg;
}
}
});
<table v-html="ht"></table>v-show
可以控制组件是否显示，是display的封装，组件一直在dom树节点上1
<p v-show="false">world</p>v-if v-else-if v-else
显示与隐藏，隐藏的话将不在dom树节点显示1
2
3<p v-if="info == 'world'">世界</p>
<p v-else-if="info == 'hello'">你好</p>
<p v-else>拜拜</p>v-for
循环创建节点1
<p v-for="i in 100">world world</p>v-model
数据双向绑定，可以通过修改dom组件中的文本值，修改js脚本中的变量值，只对表单元素有效果1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19var vue = new Vue({
el:"#app",
data:{
msg:"",
info:"你好"
},
methods:{
setText(){
vue.info = this.msg;
}
}
});
<div id="app">
<p v-text="info"></p>
<p v-html="info"></p>
<p><input type="text" v-model="msg"><button @click="setText()">点击</button></p>
</div>v-on
相当于@为按钮绑定点击事件1
2<button v-on:click="setText">点击</button>
<button @click="setText()">