快速掌握常用的vue组件

最新推荐文章于 2024-04-02 16:20:02 发布

布道

最新推荐文章于 2024-04-02 16:20:02 发布

阅读量1.2k

点赞数

分类专栏：全栈系列文章标签： Vue-loader vue-router vue-resource axios vuex

本文链接：https://blog.csdn.net/alex_xfboy/article/details/77942954

版权

全栈系列专栏收录该内容

11 篇文章 3 订阅

订阅专栏

前面的文章有系统的的介绍过vue经典入门，主要是基于2.x的版本，下面将分享下如何快速掌握vue组件。

1. 组件

1.1. 由来

介绍组件之前思考为什么老项目的模块化不足？

Vue.js能够很好的解决组件化的问题，配合Vue.js 官方提供的vue-loader 能够很好的结合webpack做组件化的开发架构。

1.2. 使用

Vue 组件是用HTML-like 的语法编写的*.vue文件。每个 *.vue 文件都包括三部分(<template/>、<script/>、<style/>)。

<template>
  <divclass="example">{{ msg }}</div>
</template>
<script>
exportdefault{
 data() {
   return{
     msg:'Hello world!'
   }
 }
}
</script>
<style>
.example {
 color: red;
}
</style>

❤ template

默认语言：html ；

每个 *.vue 文件几乎都包含一个<template>块；

<template>内的内容字符串会被提取出来，用来编译进Vue 组件内的 template 选项

❤ script

默认语言：js（默认ES2015也会通过Babel支持）；

每个 *.vue 文件几乎都包含一个<script> 块；

脚本就像在CommonJS的环境中一样被执行（就像通过WebPACK中捆绑一个正常的.js模块）。就是说你可以 require() 其他的依赖项。由于默认支持 ES2015 ，你也可以用 import 和 export 语法。

该脚本必须导出一个 Vue.js 组件选项对象，也支持导出一个用 Vue.extend()创建的扩展构造函数，但首先是导出普通对象。

❤ style

默认语言：css；

每个 *.vue 文件支持多个<style> 标签；

默认会通过 style-loader把内容提取并加载到文档的<head>内的<style>标签内。这也是可以通过配置 Webpack使组件内所有样式提取到一个单一的CSS文件；

1.3. Vue-loader

vue-loader 是一个加载器，属于webpack下loader插件,可以把.vue文件输出成组件。

vue-loader 提供了一些非常酷炫的特性：

ES2015默认可用；
在每个Vue 组件内支持其他的Webpack 加载器，如用于<style>的 SASS 和用于<template> 的 Jade。
把<style> 和 <template> 内引用的静态资源作为模块依赖项对待，并用Webpack 加载器处理。
对每个组件模拟有作用域的CSS。
开发阶段支持组件的热加载。

1.4. 组件通讯

方法	场景
props	强耦合的组件间，单纯的信息传递
function	强耦合的组件间多种通信方式
state	同步行为、数据量叫小、数据位不被公用
eventbus	异常行为、数据量较大、公用组件

1.4.1. props

如何双向绑定？

这样太麻烦了吧

1.4.2. function

组件数的问题

有更清晰扁平的通讯方式吗？

1.4.3. state

用了共享STATE后，又会需要有锁的需求，另外这个功能是异步的

1.4.4. eventbus

2. 常用组件

2.1. vue-router

vue-router是Vue.js官方的路由插件，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。http://router.vuejs.org/zh-cn/

2.2. vue-resource

vue-resource是Vue.js的一款请求插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。https://github.com/pagekit/vue-resource

2.3. axios

Vue 原本有一个官方推荐的ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource，目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求。

https://github.com/mzabriskie/axios

2.4. vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(像Redux的React)。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到devtools中。

http://vuex.vuejs.org/zh-cn/intro.html

https://github.com/vuejs/vuex

2.5. 流行UI组件

❤ Vux

基于WeUI和Vue(2.x)开发的移动端UI组件库主要服务于微信页面https://github.com/airyland/vux

❤ Mint UI

项目主页: http://mint-ui.github.io/#!/zh-cn

demo: http://elemefe.github.io/mint-ui/#/

github: https://github.com/ElemeFE/mint-ui

中文文档: http://mint-ui.github.io/docs/#!/zh-cn

❤ Iview

配套的工作流:https://github.com/icarusion/vue-vueRouter-webpack

github: https://github.com/iview/iview

官网: https://www.iviewui.com/

❤ vue-mui

官网: http://mui.yaobieting.com/

github: https://github.com/creatshare/vue-mui

❤ radon-ui

中文文档: https://luojilab.github.io/radon-ui/#!/

github: https://github.com/luojilab/radon-ui

❤ antd vue

中文文档: http://okoala.github.io/vue-antd/#!/components

github: https://github.com/okoala/vue-antd

❤ weex

社区: http://www.weex.help/

官网: http://weex-project.io/cn/

github: https://github.com/alibaba/weex

中文文档: http://www.weex.help/topic/57792770eb60516a48db5485

❤ element

官网: http://element.eleme.io/#/zh-CN

github: http://github.com/elemefe

❤ N3

官网: https://n3-components.github.io/N3-components/

中文文档: https://n3-components.github.io/N3-components/component.html

英文文档: https://github.com/N3-components/N3-components

❤ vuikit

github: https://github.com/vuikit/vuikit

英文文档: https://vuikit.js.org/#/

组件化的理念需要重点复习一下之前章节《js模块化规约》

布道

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
快速掌握常用的vue组件

前面的文章有系统的的介绍过vue经典入门，主要是基于2.x的版本，下面将分享下如何快速掌握vue组件。目录1.组件1.1. 由来1.2. 使用1.3. Vue-loader1.4. 组件通讯1.4.1.props1.4.2.function1.4.3.state1.4.4.eventbus2.常用组件2.1. vue-rout...
复制链接

扫一扫