Vue.js学习

前言

最近在看Vue.js相关的东西，比如说vue-router、vuex，还有基于Vue.js的前端UI框架Element-UI和iview

Vue router

其中，Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动**的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为
  关于vue router的使用，可以开始起步或尝试一下官方的示例 (查看仓库的 README.md 来运行它们)。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。
Vuex中的核心概念有：State、Getter、Mutation、Action、Module，下面的图展示了Vuex的状态管理：

Element-UI

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型,由饿了么前端开发。

手册目录

• 指南
• 开发指南
• 组件

iview ui

iview ui是一套基于 Vue.js 的高质量UI 组件库

关于iView

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

1.特性

• 高质量、功能丰富
• 友好的 API ，*灵活地使用空间
• 事无巨细的文档
• 细致、漂亮的 UI
• 使用单文件的 Vue 组件化开发模式
• 基于 npm + webpack + babel 开发，支持 ES2015
• 安装 #

2.安装

1.使用 npm

$ npm install [e-mail] --save

或使用

<script type="text/javascript" src="iview.min.js"></script>

2.示例

<template>
    <Slider :value.sync="value" range></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

参考资料

• vue.js官网中文文档
• Vue router中文官方文档
• Vue router - github
• vuex中文官方文档
• vuex-github
• awesome-vue
  A curated list of awesome things related to Vue.js
• vuex-router-sync - github
• element - github
  A Vue.js 2.0 UI Toolkit for Web https://element.eleme.io/
• iviewui
• https://www.iviewui.com/
• iview - github
• iview-码云
• iview webapp
  一套高质量的 微信小程序 UI 组件库