vue UI组件开发

作者: rayman_v | 来源:发表于2017-07-01 22:07 被阅读210次

如何开发vue、react、angular的组件库教程
vue的UI框架--MintUI AND ElementUI
小程序使用 vant 快速创建页面
vue修改子组件样式的方法
element ui中使用第三方字体小图标(亲测有效)
vue里面父组件如何修改子组件样式
FED之必备技能 - 收藏集 - 掘金
vue UI组件开发
Vue单文件组件开发的基本套路--以常用的Modal模态框组件开
Vue组件开发

1. 新建组件：

<script src="/public/javascripts/vue.js"></script>
<style>
    #app1{background-color: red}
    #app2{background-color: blue}
</style>
<body>
<div id="app1">
    <box-one></box-one>
    <box-two></box-two>
    <boxThree></boxThree>
</div>
<div id="app2">
    <box-one></box-one>
    <box-two></box-two>
</div>
<box-one></box-one>
<box-two></box-two>
<script>
Vue.component('box-one', {
    template: '<div class="box-one">box-one</div>'
});
var app1 = new Vue({
    el: '#app1',
    components: {
        'box-two': {
            template: '<div class="box-two">box-two</div>'
        },
        'boxThree': {
            template: '<div class="boxThree">boxThree</div>'
        }
    }
});
var app2 = new Vue({
    el: '#app2'
});
</script>

Vue.component 方法用于注册全局组件，new Vue({ components: {}}) 用于注册某个实例内使用的组件，所以 <box-two></box-two> 在 #app2 中失效；
由于浏览器渲染标签时会把标签全部转成小写，驼峰式组件名称会失效，如事例中的 <boxThree></boxThree>；
在实例以外无法使用任何组件；

2. 浏览器渲染网页标签的限制：

<script src="/public/javascripts/vue.js"></script>
<style>
    .red{background-color: red}
    .blue{background-color: blue}
</style>
<body>
<div id="app1">
    <table class="red">
        <box-one></box-one>
    </table>
    <select class="red">
        <box-two></box-two>
    </select>
    
    <table class="blue">
        <tr is="box-one"></tr>
    </table>
    <select class="blue">
        <option is="box-two"></option>
    </select>
</div>
<script>
Vue.component('box-one', {
    template: '<tr><td>box-one</td></tr>'
});
Vue.component('box-two', {
    template: '<option>option</option>'
});
var app1 = new Vue({
    el: '#app1'
});
</script>

由于受到浏览器渲染标签的限制，例如 table 标签子元素只能是 tbody 或 tr 、select 标签子元素只能是 option ，类似的其他更多的标签，所以 vue 引入了 is 属性；
如果使用的是组件文件 .vue 后缀的文件开发，则因为是字符串方式渲染的，所以不受限制；

3. 组件中的 `data` 数据集：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <done-button></done-button>
</div>
<script>
Vue.component('done-button', {
    template: '<button>{{text}}</button>',
    data: function (){
        return {
            text: 'ok'
        }
    }
});
var app1 = new Vue({
    el: '#app1'
});
</script>

不同于 new Vue({}) 中的实例数据集，组件中的 data 数据集必须是一个函数，再使用函数返回一个对象集，否则会报错；

4. 实例给组件传值：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <done-button text="submit" textOne="submit1" text-two="submit2"></done-button>
</div>
<script>
Vue.component('done-button', {
    template: '<button :data-text="text" :data-text-one="textOne" :data-text-two="textTwo">{{text}}</button>',
    props: ['text', 'textOne', 'textTwo']
});
var app1 = new Vue({
    el: '#app1'
});
</script>

props 定义的字符串数组中的值，可以像 data 数据集一样在组件内自由调用；
props 定义的字符串数组中的值，会作为组件标签中的标签属性名，给实例赋值；
受浏览器渲染标签属性的影响，标签属性的命名如果使用驼峰式，则使用时 vue 会自动生成对应的短横线隔开式属性名，如事例中的 text-two；

5. 组件标签属性使用动态数据：

<script src="/public/javascripts/vue.js"></script>
<style>
    .appNumber{background-color: red}
</style>
<body>
<div id="app1">
    <done-button :number="appNumber"></done-button>
    <button class="appNumber" @click="appNumber++">{{appNumber}}</button>
</div>
<script>
Vue.component('done-button', {
    template: '<button @click="number++">{{number}}</button>',
    props: ['number']
});
new Vue({
    el: '#app1',
    data: {
        appNumber: 0
    }
});
</script>

实例中的 appNumber 变化时，组件中的 number 会跟着变化；
组件中的 number 变化时，实例中的 appNumber 并不会变化；
实例中的 appNumber 的值，会覆盖组件内 number 的值；
但如果 appNumber 的值是数组或对象，由于是引用类型，则双方都会互相影响；

6. 自定义组件属性的值的规则：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <done-button number1="a" number2="1" :number3="1" ></done-button>
</div>
<script>
Vue.component('done-button', {
    template: '<button :num1="number1" :num2="number2" :num3="number3">{{number1}}</button>',
    props: {
        number1: {
            type: Number
        },
        number2: {
            type: Number
        },
        number3: {
            type: Number
        }
    }
});
new Vue({
    el: '#app1'
});
</script>

props 允许接受一个对象作为参数，每个参数作为一个元素属性，type 为属性的值期待的类型；
如果条件不符合，vue 的开发版下会在 console 打印出错误信息，但功能还是能正常传值的；
事例中 number2 传递的其实是 String 类型的 '1'，而只有 :number3 这种赋值才能传递数值类型的 1；
可选项：

{
   // 属性类型： String、Number、Boolean、Function、Object、Array，null-任意类型，
   // 可以使用数组多选
   type: null,
   
   // 是否必须被赋值：true、false
   required: false,
   
   // 默认值：可以是一般任意值或有返回值的函数
   default: '',
   
   // 自定义判断函数：参数 value 为调用时传入的值，
   // 返回 true、false 来通知 vue 机制是否报错
   validator: function(value){ return true } 
}

7. 组件内给实例发送通知：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <done-button v-on:child="father" ></done-button>
</div>
<script>
Vue.component('done-button', {
    template: '<button v-on:click="add()">增加</button>',
    methods: {
        add: function () {
            this.$emit('child', 11);
        }
    }
});
new Vue({
    el: '#app1',
    methods: {
        father: function(number) {
            console.log('father' + number);
        }
    }
});
</script>

vue-component-2.gif

组件内无法直接与组件外数据集绑定，只能发送事件通知，组件内使用 this.$emit('child', 11) 告诉实例，该调用 child 事件了，后面的参数会变成 child 的调用参数传递；
实例在初始化组件时，定义 v-on:child="father" 元素属性，来监听 child 事件收到通知时应该执行什么处理，通过 father 的形参，可以直接访问 child 的调用参数；

8. 组件之间通信：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <done-button ></done-button>
    <cancel-button></cancel-button>
</div>
<script>
var bus = new Vue();
Vue.component('done-button', {
    template: '<button v-on:click="send()">发送</button>',
    methods: {
        send: function () {
            bus.$emit('done-emit', 11);
        }
    }
});
Vue.component('cancel-button', {
    template: '<p>{{text}}</p>',
    data: function (){
        return {
            text: '00'
        }
    },
    mounted: function() {
        var _this = this;
        bus.$on('done-emit', function(number) {
            _this.text = number;
        });
    }
});
new Vue({
    el: '#app1',
    methods: {
        call: function(value) {
            console.log('father:' + value);
        }
    }
});
</script>

vue-component-3.gif

可以定义一个全局实例 bus ，在不同组件内使用 bus.$emit 发送通知，使用 bus.$on 监听通知；

9. 组件内容节点的分发：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <box></box>
    <box>
        <h4>box1</h4>
    </box>
    <box>{{box2Text}}</box>
</div>
<script>
Vue.component('box', {
    template: '<p><slot>默认</slot></p>'
});
new Vue({
    el: '#app1',
    data: {
        box2Text: 'box2'
    }
});
</script>

vue 默认在组件内定义了 <slot> 标签，用于获取组件被使用时的内容节点；
<slot> 标签的内容为组件的默认内容节点；
内容节点也可使用动态数据；

10. 多个 `<slot>` 标签之间的使用：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <box>
        <p>ppppp</p>
        
        <p slot="h4">h4</p>
        <h4 slot="h4">h4</h4>
        
        <p slot="h5">h5</p>
        <h5 slot="h5">h5</h5>
    </box>
</div>
</div>
<script>
Vue.component('box', {
    template: [
        '<div id="box">',
            '<div class="default">',
                '<slot></slot>',
            '</div>',
            '<div class="h4">',
                '<slot name="h4"></slot>',
            '</div>',
            '<div class="h5">',
                '<slot name="h5"></slot>',,
            '</div>',
        '</div>',
    ].join('')
});
new Vue({
    el: '#app1'
});
</script>

没有声明 name 属性的 <slot> 标签，是为组件的内容节点中没有声明 slot 属性的标签而占位；
声明了 name 属性的 <slot> 标签，是为组件的内容节点中与之相等 slot 属性的标签而占位；
多个标签应用了相同的 slot 属性也会有效；

11. `<slot>` 标签回传数据给内容节点：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <box >
        <template scope="props">
            <span>{{props.text}}</span>
        </template>
    </box>
</div>
</div>
<script>
Vue.component('box', {
    template: '<div id="box"><slot v-for="i in items" :text="i"></slot></div>',
    data: function (){
        return {
            items: [0,1,2,3,4]
        }
    }
});
new Vue({
    el: '#app1'
});
</script>

首先，数据是组件内提供的，但数据的布局方式由实例调用组件时决定；
在组件的内容节点内，必须使用 <template> 标签包含着要渲染的子元素，并且定义 scope="props" 属性，而 <template> 标签内则是 props 对象的作用域上下文；
props 内自动含有 <slot> 标签中的属性，例如事例中的 text 属性，则可直接使用 props.text 访问到 text 属性的值；
当然，也可以结合 <slot name="header"> 使用，而 <template slot="header"> 即可；
<template> 标签为 vue 保留的标签，实际只是个占位符；

12. 动态切换组件：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <component :is="view"></component>
    <button @click="view = 'inlinebox'">change</button>
</div>
</div>
<script>
Vue.component('box', {
    template: '<div id="box">box</div>',
});
Vue.component('inlinebox', {
    template: '<div id="inlinebox">inlinebox</div>'
});
new Vue({
    el: '#app1',
    data: {
        view: 'box'
    }
});
</script>

vue-component-4.gif

<component> 标签为 vue 保留的标签，实际只是个占位符；
is 属性可指定组件标签名，也可绑定动态变量；

13. 在实例中访问子元素对象：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
    <box ref="box1"></box>
</div>
</div>
<script>
Vue.component('box', {
    template: '<div id="box">box</div>',
});
new Vue({
    el: '#app1',
    mounted: function() {
        console.log(this.$refs);
    }
});
</script>

只要为组件指定 ref 属性，实例中则会在 $refs 中访问到组件的对象；

如何开发vue、react、angular的组件库教程
关键词：vue,react,angular,开发,封装,ui组件,组件库,常用组件目标：开发相应的组件库vue-...
vue的UI框架--MintUI AND ElementUI
基于Vue的ui框架: 饿了么公司基于vue开发的vue的ui组件库 Element Ui 基于vue pc端的U...
小程序使用 vant 快速创建页面
vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 v...
vue修改子组件样式的方法
在使用 vue 的开发中，我们有时会引用外部组件，包括 UI 组件（ElementUI、iview）。当标...
element ui中使用第三方字体小图标(亲测有效)
element ui我就不过多介绍了，它是基于vue的ui组件库，相信使用vue开发的人，难免离不开它们。那么在...
vue里面父组件如何修改子组件样式
在vue的开发中，我们需要引用子组件，包括ui组件（element、iview）。但是在父组件中添加scoped之...
FED之必备技能 - 收藏集 - 掘金
『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔....
vue UI组件开发
1. 新建组件： Vue.component 方法用于注册全局组件，new Vue({ components: {...
Vue单文件组件开发的基本套路--以常用的Modal模态框组件开
在实际开发工程化vue项目时，基本都是使用单文件组件形式，即每个.vue文件都是一个组件。最基本的就是UI组件了，...
Vue组件开发
在学习vue的时候，发现有很多使用vue开发的ui组件。本着学习的目的，自己也仿照Element写一些组件。使用...

vue UI组件开发

1. 新建组件：

2. 浏览器渲染网页标签的限制：

3. 组件中的 `data` 数据集：

4. 实例给组件传值：

5. 组件标签属性使用动态数据：

6. 自定义组件属性的值的规则：

7. 组件内给实例发送通知：

8. 组件之间通信：

9. 组件内容节点的分发：

10. 多个 `<slot>` 标签之间的使用：

11. `<slot>` 标签回传数据给内容节点：

12. 动态切换组件：

13. 在实例中访问子元素对象：

相关文章

如何开发vue、react、angular的组件库教程

vue的UI框架--MintUI AND ElementUI

小程序使用 vant 快速创建页面

vue修改子组件样式的方法

element ui中使用第三方字体小图标(亲测有效)

vue里面父组件如何修改子组件样式

FED之必备技能 - 收藏集 - 掘金

vue UI组件开发

Vue单文件组件开发的基本套路--以常用的Modal模态框组件开

Vue组件开发

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

让前端飞

vue UI组件开发

1. 新建组件：

2. 浏览器渲染网页标签的限制：

3. 组件中的 data 数据集：

4. 实例给组件传值：

5. 组件标签属性使用动态数据：

6. 自定义组件属性的值的规则：

7. 组件内给实例发送通知：

8. 组件之间通信：

9. 组件内容节点的分发：

10. 多个 <slot> 标签之间的使用：

11. <slot> 标签回传数据给内容节点：

12. 动态切换组件：

13. 在实例中访问子元素对象：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3. 组件中的 `data` 数据集：

10. 多个 `<slot>` 标签之间的使用：

11. `<slot>` 标签回传数据给内容节点：