day 83 Vue学习三之vue组件

 

本节目录

• 一 什么是组件
• 二 v-model双向数据绑定
• 三 组件基础
• 四 父子组件传值
• 五 平行组件传值
• 六 xxx
• 七 xxx
• 八 xxx

一 什么是组件

　　首先给大家介绍一下组件(component)的概念

　　我们在进行vue开发的时候，还记得我们自己创建的vm对象吗，这个vm对象我们称为一个大组件，根组件(页面上叫Root)，在一个网页的开发中，根据网页上的功能区域我们又可以细分成其他组件，或称为子组件，看下面的图解：

    
    




    
{{ msg }}
    

    

　　以vue官网来看，vue官网是用vue开发的：

　　　　

 

　　　　每个组件中都有对应的data()，methods，watch等属性功能，组件是为了功能模块化，为了解耦，每个组件有自己的数据属性，监听自己的数据属性等操作。

　　　　后面我们学习组件会知道组件是可以嵌套的，那么就看看图解组件嵌套的组件树，及数据流向，数据是单项数据流 ，数据从整个项目的入口进来之后，先流向我们的大组件vue，然后再流向其他子组件，看图解：

　　　　 　　

 

 

二 v-model双向数据绑定

　　

　　v-model的双向数据绑定，v-model只能应用在input、textarea、select等标签中，那v-model怎么用呢，看代码，双向数据绑定又是什么意思呢，看下面的图解。　

    
    




    
    
    
    
    
{{ msg }}

 

　　效果图：

　　　　　　

 

　　双向数据绑定流程图解：

　　　　　　

　　那么我们自己通过前面学的内容来完成一个类似v-model的input标签的一个双向数据绑定的效果，这里只是模拟了一个双向数据绑定的效果，帮助大家理解其原理的大概实现方式，但实际其原理比下面的代码要复杂的多，注意这里只是模拟，看代码：　

    
    




    
    
    
{{ msg }}

　　　　模拟的就不用记了，咱们主要记住v-model的用法，实现双向数据绑定。

　　

　　textarea的v-model

    
    




    
{{ message }}
    

    
    

 　　单个复选框的v-model：

    
    




    
    
    {{ checked }}

 

　　多个复选框的v-model

    
    




    

        
        
        姓名Jack
        
        姓名John
        
        姓名Mike
        

        选择的名称: {{ checkedNames }}
    

　　单选框raido的v-model

    
    




    

        
      
      1
      

      
      2
      

      Picked: {{ picked }}
    

　　单选下拉框的v-model

    
    




    

        
        
            请选择
            A
            B
            C
        
        Selected: {{ selected }}
    

　　　　注意：如果 v-model 表达式的初始值未能匹配任何选项， 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

 　　多选下拉框的v-model

A B C
Selected: {{ selected }}

　　　

 　　值的绑定

　　　　关于值的绑定大家看看下面的写法就可以，这里不多说了

　　　　对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

  ABC

 

　　　　但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

　　　　复选框：

// 当选中时 vm.toggle === 'yes' 
// 当没有选中时 vm.toggle === 'no'

 

　　　　　　这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。

 　　　　单选按钮：

// 当选中时
vm.pick === vm.a

 

 　　　　选择框的选项

    
  123


// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

 

　　修饰符

 　　　　.lazy  懒监听

　　　　　　在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：

　　　　.number

　　　　　　 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符，意思就是让用户只能输入数字：

　　　　　　这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

　　　　.trim

　　　　　　如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

 　　

　　以后用vue开发的话，基本也就放弃jQuery了，因为jQuery里面有的功能，vue里面基本都有，vue没有ajax，但是我们有别的办法。

　　另外给大家说一个vue社区，vue中文社区，这里面有vue的很多项目，你可以来这里找项目来学习，这里的项目基本都只有前端的代码，后端需要我们自己写，其中 vue awesome，是vue高星项目，也就是很多人都喜欢，比较nb的项目，记着FQ玩，不然有些东西你搜不了。

 　　　　

 

 　　　　　　

　　　　　　这里面有很多vue的高级应用，我们学的都是基础，想玩高级的，就来这里学。

 　　给大家推荐一些高星的vue-ui组件：后面我们的学习的项目，用Element UI。

　　　　Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。下面介绍一下给大家强烈推荐优秀的的Vue UI组件库。

　　　　1、 iView UI组件库iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。iView官网：https://www.iviewui.com/

　　　　2、Vux UI组件库Vux是基于WeUI和Vue2.x开发的移动端UI组件库，主要服务于微信页面。Vux的定位已经很明确了，一是：Vue移动端UI组件库，二是：WeUI的基础样式库。Vux的组件涵盖了所有的WeUI的内容，还扩展了一些常用的组件。比如：Sticky、timeline、v-chart、XCircle。Vux是个人维护的。但是GitHub上star还是很高的，达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux文档基本的组件用法和效果都讲解到位了。在vux官网上也展示了很多Vux的使用案例。在微信页面开发中，基本没有太多的bug，开发还是比较顺手的。Vux官网：https://vux.li/

　　　　3、Element UI组件库Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库，更新频率还是很高的，基本一周到半个月都会发布一个新版本。组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。没有实际使用过，网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。Element官网：http://element.eleme.io/#/zh-CN

　　　　4、Mint UI组件库Mint UI基于 Vue.js 的移动端组件库，同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的，开发移动端web项目还是很方便，文档也很简介明了。很多页面Mint UI组件都已经封装好，基本可以照着例子写，简单的调整一下就可以实现。不过，在GitHub上看最后一次代码提交在2018年1月16日，截止到目前已经过去半年了。不知道是项目比较稳定没有更新，还是项目有被废弃的可能。我们会持续关注Mint UI的动态。Mint UI官网：http://mint-ui.github.io/#!/zh-cn

　　　　5、Bootstrap-Vue UI组件库Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现，完成了广泛和自动化的WAI ARA可访问性标记。Bootstrap 4是最新发布的版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。想当初刚流行响应式网站的时候，Bootstrap是世界上最受欢迎的建立移动优先网站的框架，Bootstrap可以说风靡全球。就算放在现在很多企业网站都是采用Bootstrap做的响应式。Bootstrap-Vue可以让你在Vue中也实现Bootstrap的效果。Bootstrap-Vue官网：https://bootstrap-vue.js.org/

　　　　6、Ant Design Vue UI组件库Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的上手。Ant Design Vue官网：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

　　　　7、AT-UI UI组件库AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品，支持现代浏览器和 IE9 及以上。AT-UI 更加精简，实现了后台常用的组件。AT_UI官网：https://at-ui.github.io/at-ui/#/zh

　　　　8、Vant UI组件库Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的，主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。截止到目前，Vant已经开源了50+ 个经过有赞线上业务检验的组件。比如：、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的，不太在意界面，实现业务逻辑的话，用Vant组件库开发还是很快的。Vant官网：https://youzan.github.io/vant/#/zh-CN/intro

　　　　9、cube-ui UI组件库cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。在交互体验方面追求极致。遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。cube-ui官网：https://didi.github.io/cube-ui/#/zh-CN

　　　　10、Muse-UI UI组件库Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件，用于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可用于开发的复杂单页应用Muse-UI官网：https://muse-ui.org/#/zh-CN

　　　　11、N3-components UI组件库N3组件库是基于Vue.js构建的，让前端工程师和全栈工程师能快速构建页面和应用。N3-components超过60个组件 组件列表、自定义样式、支持多种模化范式（UMD）、使用ES6进行开发。N3官网：https://n3-components.github.io/N3-components/component.html

　　　　12、Mand MobileMand Mobile是面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。Mand Mobile含有丰富的组件30+的基础组件，覆盖金融场景，极高的易用性组件均有详细说明文档、案例演示，汲取最前沿技术，组件化轻量化实现，兼顾稳定和品质，努力实现金融场景的全覆盖。Mand Mobile官网：https://didi.github.io/mand-mobile/#/zh-CN/home

　　　　13、we-vue UI组件库we-vue 是一套基于 Vue.js 的移动关组件库，结合 weui.css 样式库，封装了一系列组件，非常适于微信公众号等移动端开发。we-vue 包含35+ 个组件，单元测试覆盖率超 98%，支持 babel-plugin-import，完善的在线文档，详细的在线示例。we-vue官网：https://wevue.org/

　　　　14、veui UI组件库veui是一个由百度EFE team开发的Vue企业级UI组件库。目前文档还没有，只有demo。GitHub上说是正在进行的一项工作。那我们就耐心等待吧。veui官网：https://ecomfe.github.io/veui/components/#/

　　　　15、Semantic-UI-Vue UI组件库Semantic-UI-Vue是基于 Vue.js对Semantic-UI 框架的实现。Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。Semantic-UI-Vue提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。Semantic-UI-Vue官网：https://semantic-ui-vue.github.io/#/

 　　　　16 vueAdmin 基于vuejs2和element的简单的管理员模板

　　以后我们做vue开发，基本都是基于组件开发的，下面我们就来学学组件基础。

　　　　

三 组件基础

通常一个应用会以一棵嵌套的组件树的形式来组织：

　　

　　　　每个组件都有自己的数据属性、方法、监听、钩子函数等自己相应的功能，一个组件就可以称为一个模块，组件化开发就是咱们说的模块化开发了。

下面我们来学一下组件怎么玩。

1 局部组件 

　　 使用局部组件遵循三步：打油诗：声子（声明子组件）、挂子（挂在子组件）、用子（使用子组件）。

 　　再说局部组件之前，我先给大家说一个东西，叫做template模板，这个不是组件昂，只是我们后面组件要用这个东西，看代码

    
    



    {{ msg }}

 　　看效果：这个回头我们学到生命周期，你再回来看这个就会很清楚了。

　　　　

　　好，接下来学我们的局部组件，看代码：

 

　　

　　打开页面看效果：

　　　　

 

　　看图解：

　　　　

　　上面代码的另外一种写法，不在vue对象里面写template了，并且除了App组件外，我们在给App组件加一个子组件，大家看代码，一个组件挂到另外一个组件上，那这个组件称为子组件，另外一个组件称为父组件。

　　　　上面代码的简单流程图解：

　　　　　　

 简单总结一下

　　1.声明子　　　

let App = {
        data() {
            return {
                text: '我是Jaden'
            }
        },
      
        template: 
            `
                

                   
                
            `
        ,
    };

 

 　　2.挂子

{
        如果有template，用template也是可以挂子的,并且template优先级比el高
        template:``
        components: {
            App //子组件
        }
}

 　　　　3 用子　

父组件的template中，或者el对应的标签中来使用


在template中使用的时候可以这样写
template:`

    

`,
或者直接写
template:``,

 

　　　　上面我们学了一下组件的基础，我们提到了一个模块化开发，有些朋友可能不太理解，那么我们在GitHub上下载一个项目，来看看：

　　　　第一步：到GitHub上下载这个项目

　　　　

　　　　下载到本地之后，按照人家的说明来运行项目

# 克隆到本地，或者下载zip压缩包
git clone https://github.com/bailicangdu/vue2-happyfri-master.git

# 进入文件夹
cd vue2-happyfri-master

# 安装依赖
npm install 或 yarn(推荐)

# 开启本地服务器localhost:8088
npm run dev

# 发布环境
npm run build

 

 　　　　一个组件里面包含了HTML、CSS、JS等内容，我们就看一下这个项目的src文件夹里面的main.js和page文件夹里面的内容，大致看看就清晰一些了。

 

　　2 全局组件

　　直接看代码，局部组件使用时需要挂载，全局组件使用时不需要挂载。那么他们两个什么时候用呢，局部组件就在某个局部使用的时候，全局组件是大家公用的，或者说每个页面都有这么一个功能的时候，在哪里可能都会用到的时候。

　　　　　　

 

　　我们发现这个全局组件应用到哪个组件上都可以，就比如这个button组件一样，我们可能需要很多的button按钮，每个button按钮里面的文字还不一样，这样我们就需要按照自己组件中需求来改button按钮里面的文字，这个怎么玩呢，看代码：slot(插槽)内容分发组件

 

 

 

四 父子组件传值

 

通过prop属性进行传值

1 首先说父组件往子组件传值  ：两步

　　1.在子组件中使用props属性声明，然后可以直接在子组件中任意使用

　　2.父组件要定义自定义的属性

　　看代码：

 

 　　子组件还可以给子组件的子组件传值，将父组件的值传递给孙子组件的意思，看代码：

 

　　2 子组件父组件传值  ：两步

　　a.子组件中使用this.$emit('fatherHandler',val);fatherHandler是父组件中使用子组件的地方添加的绑定自定义事件 

　　b.父组件中的methods中写一个自定义的事件函数：appFatherHandler(val){}，在函数里面使用这个val，这个val就是上面子组件传过来的数据

 　　看代码：

 

 

五 平行组件传值

 先看一下什么是平行组件，看图：

　　

　　平行组件的传值，假如说我们将组件1的数据传递给组件2，那么就需要在组件2中声明一个方法，通过$on来声明，而组件1中要触发一个方法，通过$emit来触发。并且前提是这两个方法要挂载到一个公用的方法上，比较懵逼是不是，你想，在组件1中声明的方法，在组件2中能用吗，是不是不能用啊，所以我们需要一个公用的方法，两个组件将$on和$emit都放到这个公用的方法上，而不是绑定给某个组件的this对象上，说了半天都是废话，直接看代码吧：　　　

 

　　

 

　　说了半天的父子组件传值，你应该可以想到，通过平行组件传值的方法其实都可以解决，做一个全局的对象bus来做组件之间的传值。但是我们后面要学的vuex更好用，前面这个bus用的也挺多的，这个vuex就像一个前端的数据库，把前端的数据都保存在vuex里面了，那么所有的组件都可以用这里面的数据，简单在这里提一下吧：看图：

　　　　

 

 　　　　就大概这么个意思吧，后面我们会学到昂，目前我们学了两种组件之间数据传值的方案，其实有7种，其他的没必要学了昂，玩好这两个就够你用了。

　　　　　　

　　

　　

 

 

六 xxx

 

 

 

 

七 xxx

 

 

 

 

八 xxx

　　

 

 

 

 

 

 

转载于:https://www.cnblogs.com/yanghongtao/p/10785228.html