博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue知识点总结
阅读量:5879 次
发布时间:2019-06-19

本文共 8458 字,大约阅读时间需要 28 分钟。

1 ### Vue.js 五天
1 ### Vue.js 五天   2   3 ## 一、 组件component  4   5 ### 1. 什么是组件?  6     组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码  7     组件是自定义元素(对象)  8   9 ### 2. 定义组件的方式     10     方式1:先创建组件构造器,然后由组件构造器创建组件 11     方式2:直接创建组件 12  13 ### 3. 组件的分类 14     分类:全局组件、局部组件 15  16 ### 4. 引用模板 17     将组件内容放到模板
 

 

2   3 ## 一、模块化开发  4   5 ### 1. vue-router模块化  6     cnpm install vue-router -S  7   8 #### 1.1 编辑main.js  9      10 #### 1.2 编辑App.vue 11  12 #### 1.3 编辑router.config.js 13  14 ### 2. axios模块化 15     cnpm install axios -S 16  17     使用axios的两种方式: 18         方式1:在每个组件中引入axios 19         方式2:在main.js中全局引入axios并添加到Vue原型中 20  21 ### 3. 为自定义组件添加事件         22  23  24 ## 二、 Elment UI 25  26 ### 1. 简介 27     Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 28         ElementUI  PC端 29         MintUI 移动端 30  31 [官网](http://element.eleme.io/) 32  33 ### 2. 快速上手 34  35 #### 2.1 安装elment ui 36     cnpm install element-ui -S 37  38 #### 2.2 在main.js中引入并使用组件 39     import ElementUI from 'element-ui' 40     import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入 41     Vue.use(ElementUI); 42     这种方式引入了ElementUI中所有的组件 43  44 #### 2.3 在webpack.config.js中添加loader     45     CSS样式和字体图标都需要由相应的loader来加载,所以需要style-loader、css-loader 46  47     默认并没有style-loader模块,所以需要单独安装 48         cnpm install style-loader --save-dev 49  50 #### 2.4 使用组件 51  52 #### 2.5 使用less 53     安装loader,需要两个:less、less-loader 54         cnpm install less less-loader -D 55     在webpack.config.js中添加loader     56  57 ### 3. 按需引入组 58  59 #### 3.1 安装babel-plugin-component 60     cnpm install babel-plugin-component -D   61  62 #### 3.2 配置.babelrc文件 63     "plugins": [["component", [ 64         { 65           "libraryName": "element-ui", 66           "styleLibraryName": "theme-default" 67         } 68     ]]] 69  70 #### 3.3  只引入需要的插件 71  72  73 ## 三、 自定义全局组件(插件) 74  75     全局组件(插件):就是指可以在main.js中使用Vue.use()进行全局引入,然后在其他组件中就都可以使用了,如vue-router 76         import VueRouter from 'vue-router' 77         Vue.use(VueRouter); 78  79     普通组件(插件):每次使用时都要引入,如axios 80         import axios from 'axios' 81  82  83 ## 四、 Vuex 84  85 ### 1. 简介 86     Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 87     简单来说,用来集中管理数据,类似于React中的Redux,都是基于Flux的前端状态管理框架            88  89 ### 2. 基本用法 90  91 #### 2.1 安装vuex 92     cnpm install vuex -S 93  94 #### 2.2 创建store.js文件,在main.js中导入并配置store.选项 95  96 #### 2.3 编辑store.js文件 97     Vuex的核心是Store(仓库),相当于是一个容器,一个store实例中包含以下属性的方法: 98         state       定义属性(状态、数据) 99         getters     用来获取属性100         actions     定义方法(动作)101         commit      提交变化,修改数据的唯一方式就是显式的提交mutations102         mutations   定义变化103         注:不能直接修改数据,必须显式提交变化,目的是为了追踪到状态的变化 104 105 #### 2.4 编辑App.vue        106     在子组件中访问store对象的两种方式:107         方式1:通过this.$store访问108         方式2:通过mapState、mapGetters、mapActions访问,vuex提供了两个方法:109             mapState    获取state110             mapGetters  获取getters111             mapActions  获取actions112 113 ### 3. 分模块组织Vuex          114 115     |-src116         |-store117             |-index.js118             |-getters.js119             |-actions.js120             |-mutations.js121             |-modules  //分为多个模块,每个模块都可以拥有自己的state、getters、actions、mutations122                 |-user.js123                 |-cart.js124                 |-goods.js125                 |....

 

转载地址:http://yadix.baihongyu.com/

你可能感兴趣的文章
php中的$_REQUEST
查看>>
优秀网页设计:别出心裁的创意网站导航菜单
查看>>
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)
查看>>
css important
查看>>
MySQL学习笔记20:数据备份与还原
查看>>
Spring 从零開始-03
查看>>
firefox如何卸载插件plugins和临时文件夹
查看>>
C++ for fun & test
查看>>
MapReduce编程job概念原理
查看>>
messagePack编解码
查看>>
/proc/filesystems各字段含义
查看>>
Fabric密码保存
查看>>
guice基本使用,三种注入方式(二)
查看>>
Android Weekly Notes Issue #235
查看>>
ssh 连接缓慢解决方法
查看>>
【转】Hibernate系列学习之(二) 多对一、一对一、一对多、多对多的配置方法...
查看>>
杭电OJ(HDU)-ACMSteps-Chapter Three-《FatMouse' Trade》《今年暑假不AC》《排名》《开门人和关门人》...
查看>>
关于javaSocket中 Software caused connection abort: recv failed问题
查看>>
【翻译自mos文章】当并行事务恢复进程在执行时,禁用并行事务恢复的方法
查看>>
VUE -- 如何快速的写出一个Vue的icon组件?
查看>>