-
webpack-simple Vue 使用 webpack 简单例子
-
vue-webpack-boilerplate Vue 使用 webpack 例子
-
vue-cli Vue 命令行工具
-
vue-devtools Vue 开发工具
-
vue-router Vue 路由
-
vuex 状态管理
-
vue-server-renderer 服务端渲染
-
element-ui 后台组件库
-
vue-strap 桌面 UI 组件
-
vux 移动端UI组件库
-
vue-resource 网络请求 -
axios 网络请求
-
https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.4mzjlwaij
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
- WebStorm 安装 VUE 插件
Vue-loader在v9.8.0之后加入了对CSS Modules的支持。
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:
v-bind: 可缩写为 :
- 计算属性: 只有在它的相关依赖发生改变时才会重新取值,更好的方式是
- method: 每当重新渲染的时候,method 调用总会执行函数,只有纯粹的数据逻辑,而不是去处理 DOM 事件细节
- watch: 通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调
- 事件修饰符: 处理 DOM 事件细节
- v-if 是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
- v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。
Vue 组件的 API 来自三部分
- Props 允许外部环境传递数据给组件
- Events 允许组件触发外部环境的副作用
- Slots 允许外部环境将额外的内容组合在组件中。
组件需要的一切都是通过上下文传递,包括:
- props: 提供props 的对象
- children: VNode 子节点的数组
- slots: slots 对象
- data: 传递给组件的 data 对象
- parent: 对父组件的引用
- v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
- v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
- v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。