Vue相关

Vue.js 是一套构建用户界面的渐进式框架。采用自底向上增量开发的设计。

一直在用vue 脚手架把玩项目。

记录下流程：
①部署node环境，安装node.js
②安装cnpm淘宝镜像，

install -g cnpm --registry
1
2
③安装vue-cli脚手架模版
```cnpm install -g vue-cli

④全局安装 webpack

install webpack -g ```
1
2
3
4
⑤创建vue项目
``` vue init webpack mydemo ```（mydemo项目名称）
⑥安装依赖
```cd mydemo

install```
1
```npm run dev

当当当当，一个崭新的vue项目完成
会自动打开浏览器，默认端口号：8080
可以自行在config/index.js中修改端口号。
⑦编译

run build ```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
自动生成一个dist文件夹。包含一个static 和index.html
⑧nginx部署
下载 [nginx](http://nginx.org/en/download.html)
解压 文件，编辑nginx/conf 下的nginx.conf

![nginx](http://upload-images.jianshu.io/upload_images/2901503-6c60932b5675a74d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

启动nginx ，直接双击 nginx.exe
浏览器输入 http://127.0.0.1:8080/  或者 http://localhost:8080
完美运行

----

使用express搭建静态服务

mock数据写在json文件中，proxyTable 里将接口代理到具体mock数据json文件上。
具体方法：

创建 mock 文件夹
build/dev-server.js 中添加如下代码

![image.png](http://upload-images.jianshu.io/upload_images/2901503-35a4f393ac785f2b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

----
Vue 生命周期
![生命周期](http://upload-images.jianshu.io/upload_images/2901503-a400ce4e1980332e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![image.png](http://upload-images.jianshu.io/upload_images/2901503-fb45381227793ec3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如：

---
v-if & v-show区别
v-if 插入or删除。
一般来说，v-if有更高的切换消耗。v-show有更多的初始化渲染消耗。
因此对需要频繁切换而对安全性无要求，使用v-show
如果在运行时，条件不可能改变使用 v-if


[v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
[Vue 中的 v-cloak 解读](https://segmentfault.com/a/1190000008819667)

"active-class" 属 性

这个属性是设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性

<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class

可以在router.js里面设置
const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})

路由中常常会携带参数。http://xxx,com/detail?id=2
对于参数唯一的，
<a v-link="{path:'/detail/001'}">新闻001</a>
<a v-link="{path:'/detail/002'}">新闻002</a>   //跳转链接后面带参数

{
path: ‘/detail/:id’,
name: ‘detail’,
component: Detail,
},
```
获取参数方法let id = $route.params.id

优化后 http://xxx,com/detail/2

参考资料
element
react.js,angular.js,vue.js学习哪个好？
新手向：Vue 2.0 的建议学习顺序
React还是Vue：你该如何选择？
windows下vue+webpack前端开发环境搭建及nginx部署