Vue.js


基础

Vue.js 是一套构建用户界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装

npm install -g vue-cli
vue init webpack vue
cd vue
npm install vue-router
npm install axios
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

经验

1. CSS 的组件作用域

scoped 属性会自动添加一个唯一的属性(比如 data-v-21e5b78)为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover <style scoped></style>

2. 页面闪烁

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

3. 抽象组件<keep-alive>

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

  1. Element
  2. Mint UI
  3. vue-router
  4. vue-cli

参考

  1. Awesome Vue.js
  2. Vue.js
Yan Peipan 09 January 2017