Vue.js学习

ccf19881030

发布于 2020-03-31 11:00:02

4.7K0

文章被收录于专栏：ccf19881030的博客ccf19881030的博客

前言

最近在看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 iview@1.0.1 --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>