Vue简介

Vue是什么

是一套用于构建用户界面的渐进式JavaScript框架

简单应用:只需一个轻量小巧的核心库

复杂应用:可以引入各式各样的Vue插件

渐进式:Vue可以自底向上逐层的应用 (从简单应用到复杂应用就是渐进式)

Vue特点:

1、采用组件化模式,提高代码复用率、且让代码更好维护

2、声明式编码,让编码人员无需直接操作DOM,提高开发效率

3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点

初始Vue

1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象

      const vm = new Vue({
            el: '#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
            data: { //data中用于存储数据,数据供el所指定的容器去使用
                name: '我恁爹'
            }
        });

2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法

<h1>Hello,{{name}}</h1>

3、root容器里的代码被称为【Vue模板】

4、Vue实例和容器是一 一对应的

5、真实开发中只有一个Vue实例,并且会配合着组件一起使用

6、{{XXX}}中的XXX要写js表达式,且XXX可以自动读取到data中的所有属性

7、一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新

Vue模板

插值语法

功能: 用于解析标签体内容

语法: {{xxx}}

xxxx 会作为 js 表达式解析,且可以直接读到data中的所有属性

例:

<h3>你好,{{name}}</h3>

指令语法

功能: 解析标签属性、解析标签体内容、绑定事件。。。

语法:v-bind:href = 'xxxx'

 xxxx 会作为 js 表达式被解析 (可以简写为:href=“xxxx”)

说明:Vue 中有很多的指令,形式都是v-???,此处只是用 v-bind 举个列

<a v-bind:href="url">点我去尚硅谷学习</a>

数据绑定方式

单向数据绑定

语法:v-bind:href ="xxx" 或简写为   :href

特点:数据只能从 data 流向页面

<input type="text" v-bind:value="name">

双向数据绑定

语法:v-mode:value="xxx" 或简写为  v-model="xxx"

特点:数据不仅能从 data 流向页面,还能从页面流向 data

注:双向绑定一般都应用在表单元素上(如input、select)

v-model:value可以简写为v-model,因为v-model默认收集的就是value值

<input type="text" v-model:value="name">

el和data的两种写法

el

1、new Vue时配置el属性

  new Vue({
            el: '#root',//第一种
            data: {
                name: 'sb'
            }
        })

2、先创建Vue 实例,随后通过vm.$mount('#root')指定el的值

v.$mount('#root') //第二种

data

1、对象式

  data的第一种写法,对象式
             data: {
                 name: 'sb'
            }

2、函数式

使用组件时,data必须使用函数式,否则会报错

//data的第二种写法,函数式
            data() {
                console.log(this);
                return {
                    name: 'sb'
                }
            }

注:由Vue管理的函数,一定不要写箭头函数,因为箭头函数的this指向不是Vue实例

mvvm模型

M:模型(Model) :对应 data 中的数据

V:视图(View) :模板

VM:视图模型(ViewModel) : Vue 实例对象

注:data中所有的属性,最后都出现在了vm身上

vm身上所有的属性及Vue原型上的所有属性,在Vue模板中都可以直接使用

数据代理

Object.defineProperty()方法

        let number = 18;
        let person = {
            name: 'sv',
            sex: 'man'
        }
        Object.defineProperty(person, 'age', {

            // enumerable: true, //控制属性是否可以枚举(遍历),默认值是false
            // writable: true, //控制属性是否可以被修改,默认值是false
            // configurable: true //控制属性是否可以被删除,默认值是false
            //当有人读取person对象的age属性时,get函数(getter)就会被调用,且返回值就是age的值
            get() {
                console.log('有人读取age属性了');
                return number;
            },

            //当有人修改person对象的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
            set(value) {
                console.log('有人修改了age属性,且值是', value);
                number = value;
            }
        })

通过一个对象对另一个对象中属性的操作(读/写)就是数据代理

例:通过obj2操作obj1中的x

        let obj1 = {
            x: 100
        }
        let obj2 = {
            y: 200

        }
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x
            },
            set(value) {
                obj1.x = value
            }
        })

Vue中的数据代理

通过vm对象来代理data对象中属性的操作(读/写)

好处:更加方便的操作data中的数据

原理:

通过Object.defineProperty()把data对象中所有属性添加到vm上

为每一个添加到vm上的属性,都指定一个getter/setter。

在getter/setter内部去操作(读/写)data中对应的属性

事件处理

事件的基本使用

语法:使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名

事件的回调需配置在methods对象中,最终会在vm上

methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象

@click=“demo” 和 @click=“demo($event)” 效果一样,但后者可以传参

   <div id="root">
        <h2>你是来{{name}}的吧!</h2>
        <button v-on:click="showInfo1">需要手纸吗(不传参)</button>
        <button @click="showInfo2($event,'老六')">需要手纸吗(传参)</button>
    </div>
  new Vue({
            el: '#root',
            data: {
                name: '拉屎'
            },
            methods: {
                showInfo1() {
                    alert('叫爸爸!')
                },
                showInfo2(event, number) {
                    alert(number + '叫爸爸!!')
                }
            }
        })

事件修饰符

prevent:阻止默认事件(常用)

<a href="http://www.baidu.com" @click.prevent="showInfo">快张嘴</a>

stop:阻止事件冒泡(常用)

<div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">给我张开!</button>
    <!-- 修饰符可以连续写 -->
    <!-- <a href="http://www.baidu.com" @click.stop.prevent="showInfo"></a> -->
</div>

once:事件只触发一次(常用)

<button @click.once="showInfo">我最后说一次!张开!</button>

capture:使用事件的捕获模式(外层执行)

<div class="box1" @click.capture="showMsg('靓仔')">
    div1
    <div class="box2" @click="showMsg('吊毛')">div2</div>
</div>

self:只有event.target是当前操作的元素时才触发的元素(也可以阻止冒泡)

<div class="demo1" @click.self="showInfo">
    <button @click.stop="showInfo">给我张开!</button>
</div>

passive:事件的默认行为立即执行,无需等待事件回调执行完毕

<!-- scroll是给滚动条添加滚动事件,wheel是给滚轮添加滚动事件 -->
<ul class="list" @wheel.passive="demo">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
     new Vue({
            el: '#root',
            data: {
                name: '小飞棍'
            },
            methods: {
                showInfo(e) {
                    alert('啊!!!')
                },
                showMsg(msg) {
                    console.log(msg);
                },
                demo() {
                    for (let i = 0; i < 1000000; i++) {
                        console.log('#');
                    }
                    console.log('一滴都没了');
                }
            }
        })

键盘事件

1、Vue中常用的按键别名:

回车:enter

删除:delete(捕获’删除‘和’退格’键)

退出:esc

空格:space

换行:tab(特殊,必须配合keydown去使用)

上:up

下:down

左:left

右:right

2、Vue为提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

3、系统修饰键(特殊):ctrl、alt、shift、meta

配合keyup使用:按下修饰键的同时,在按下其他键(可以固定一个键生效,例如@keyup.ctrl.y),随后释放其他键,事件才被释放

配合keydown使用:正常触发事件

4、也可以使用keyCode去指定具体的按键(不推荐)

5、Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名

计算属性

定义:要用的属性不存在,要通过已有的属性计算得来

原理:底层借助了Object.defineproperty方法提供的getter和setter

get函数什么时候执行?

1、初次读取时执行一次

2、当依赖的数据发生改变时会被再次调用

优势:与methods实现相比,内部有缓存机制(复用),效率更高

注:

1、计算属性最终都会出现在vm上,直接读取使用即可

2、如果计算属性要被修改,那必须写set函数去响应修改,且set中引起计算时依赖的数据发生改变

    <div id="root">
        姓:<input type="text" v-model="firstName"><br> 
        名:<input type="text" v-model="lastName"><br> 
        全名:<span>{{fullName}}</span>
    </div>
        new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                fullName: {
                    //get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
                    //get什么时候调用?1.初次读取fullName时 2、所依赖的数据发生变化时
                    get() {
                        //此处的this是vm
                        return this.firstName + '-' + this.lastName
                    },
                    //set什么时候调用?当fullName被修改时
                    set(value) {
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })

只考虑读取不考虑修改的时候就可以使用简写形式

        new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                fullName() {
                    return this.firstName + '-' + this.lastName
                }
            }
        })

监视属性watch

当被监视的属性变化时,回调函数自动调用,进行相关操作

    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

监视的属性必须存在,才能进行监视!!

监视的两种方法:

new Vue时传入watch配置

 const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '冻人'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
             watch: {
                 isHot: {
                     handler(newValue, oldValue) {
                         // immediate:true,//初始化时让handler调用一下 
                         console.log('isHot被修改了', newValue, oldValue);
                     }
                 }
             }
        })

通过vm.$watch监视

        vm.$watch('isHot', {
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }
        })

深度监视

Vue中的watch默认不监测对象内部值的改变(一层)

配置deep:true可以监测对象内部值改变(多层)

注:

Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以

使用watch时根据数据的具体结构,决定是否采用深度监视

watch简写

            watch: {
                isHot(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue);
                }
            }

vm.$watch简写

        vm.$watch('isHot', function(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
        })

computed和watch之间的区别

1、computed能完成的功能,watch都可以完成

2、watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作

两个重要的小原则:

1、所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象

2、所有不被Vue所管理的函数(定时器的回调、ajax的回调等),最好写成箭头函数,这样this的指向才是vm 或 组件实例

绑定样式

class样式

语法:      :class="xxx"

xxx可以是字符串、对象、数组(这三个数据类型是指在vm的data中存储的数据类型)。

字符串写法适用于:类名不确定,要动态获取。

<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
 mood: 'normal',

数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。

<div class="basic" :class="classArr">{{name}}</div>
classArr: ['atguigu1', 'atguigu2', 'atguigu3'],

对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。

<div class="basic" :class="classObj">{{name}}</div>
classObj: {
     atguigu1: false,
     atguigu2: false,
},

style样式

语法::style="{fontSize: xxx}"

其中xxx是动态值

<div class="basic" :style="styleObj">{{name}}</div>
styleObj: {
    fontSize: '40px',
    color: 'red',
},

语法::style="[a,b]"是(数组对象)

其中a、b是样式对象。

<div class="basic" :style="styleArr">{{name}}</div>
styleArr: [{
    fontSize: '40px',
    color: 'blue',
}, {
    backgroundColor: 'gray'
}]

条件渲染

v-if

写法:

(1).v-if="表达式"

<h2 v-if="false">欢迎来到{{name}}</h2>

(2).v-else-if="表达式"

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>

(3).v-else="表达式"

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>

适用于:切换频率较低的场景。

特点:不展示的DOM元素直接被移除。

注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”(中间不能插入其他元素),v-else-if、v-else不能单独使用,要配合v-if一起使用。

v-show

语法:v-show="表达式"

<h2 v-show="false">欢迎来到{{name}}</h2>

适用于:切换频率较高的场景。

特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。

v-if与template的配合使用,template不影响结构,渲染时自动脱掉

<template v-if="n === 1">
		<h2>你好</h2>
		<h2>尚硅谷</h2>
		<h2>北京</h2>
</template>

基本列表

v-for指令(遍历)

用于展示列表数据

语法:v-for="(item, index) in xxx" :key="yyy"

可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

面试题:react、vue中的key有什么作用?(key的内部原理)

虚拟DOM中key的作用:

key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:

对比规则:

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!

②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM,随后渲染到到页面。

用index作为key可能会引发的问题:

若对数据进行:逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

如果结构中还包含输入类的DOM:

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示, 使用index作为key是没有问题的。

列表过滤(案例)

    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

watch(监视属性)实现

          new Vue({
        	el:'#root',
        	data:{
        		keyWord:'',
        		persons:[
        			{id:'001',name:'马冬梅',age:19,sex:'女'},
        			{id:'002',name:'周冬雨',age:20,sex:'女'},
        			{id:'003',name:'周杰伦',age:21,sex:'男'},
        			{id:'004',name:'温兆伦',age:22,sex:'男'}
        		],
        		filPerons:[]
        	},
        	watch:{
        		keyWord:{
        			immediate:true,
        			handler(val){
        				this.filPerons = this.persons.filter((p)=>{
        					return p.name.indexOf(val) !== -1
        				})
        			}
        		}
        	}
        })

computed(计算属性)实现

        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                persons: [
                    {id: '001',name: '马冬梅',age: 19,sex: '女'}, 
                    {id: '002',name: '周冬雨',age: 20,sex: '女'}, 
                    {id: '003',name: '周杰伦',age: 21,sex: '男'}, 
                    {id: '004',name: '温兆伦',age: 22,sex: '男'}
                ]
            },
            computed: {
                filPerons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })

列表排序(案例)

    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
                <input type="text">
            </li>
        </ul>
    </div>
        new Vue({
            el: '#root',
            data: {
                keyWord: '',
                sortType: 0, //0原顺序 1降序 2升序
                persons: [{
                    id: '001',
                    name: '马冬梅',
                    age: 30,
                    sex: '女'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: 31,
                    sex: '女'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: 18,
                    sex: '男'
                }, {
                    id: '004',
                    name: '温兆伦',
                    age: 19,
                    sex: '男'
                }]
            },
            computed: {
                filPerons() {
                    const arr = this.persons.filter((p) => {
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                        //判断一下是否需要排序
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr
                }
            }
        })

Vue监视数据的原理

vue会监视data中所有层次的数据。

如何监测对象中的数据?

通过setter实现监视,且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性,Vue默认不做响应式处理

(2).如需给后添加的属性做响应式,请使用如下API:

Vue.set(target,propertyName/index,value)

vm.$set(target,propertyName/index,value)

如何监测数组中的数据?

通过包裹数组更新元素的方法实现,本质就是做了两件事:

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板,进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法:

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!

收集表单数据

若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。

若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。

若:<input type="checkbox"/>

1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)

2.配置input的value属性:

(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)

(2)v-model的初始值是数组,那么收集的的就是value组成的数组

备注:v-model的三个修饰符:

lazy:失去焦点再收集数据

number:输入字符串转为有效的数字

trim:输入首尾空格过滤

过滤器

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。

注册过滤器

Vue.filter(name,callback) 或 new Vue{filters:{}}

使用过滤器

{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注:

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

内置指令

学过的指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听, 可简写为@

v-if : 条件渲染(动态控制节点是否存存在)

v-else : 条件渲染(动态控制节点是否存存在)

v-show : 条件渲染 (动态控制节点是否展示)

v-text指令

作用:向其所在的节点中渲染文本内容

与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

v-html指令

作用:向指定节点中渲染包含html结构的内容。

与插值语法的区别:

(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。

(2).v-html可以识别html结构。

严重注意:v-html有安全性问题!!!!

(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

v-cloak指令(没有值)

本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。

使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令

v-once所在节点在初次动态渲染后,就视为静态内容了。

以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

v-pre指令

跳过其所在节点的编译过程。

可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。

自定义指令

定义语法:

局部指令:

new Vue({      directives:{指令名:配置对象} })                    

 new Vue({  directives{指令名:回调函数} })  

全局指令(new Vue外):

Vue.directive(指令名,配置对象)

Vue.directive(指令名,回调函数)

配置对象中常用的3个回调

(1).bind:指令与元素成功绑定时调用。

(2).inserted:指令所在元素被插入页面时调用。

(3).update:指令所在模板结构被重新解析时调用。

注:一般来说,bind和update中的内容基本一致

例:创建一个fbind自定义属性

 fbind: {
                //指令与元素成功绑定时(一上来)
                bind(element, binding) {
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value
                }
            }

备注:

1.指令定义时不加v-,但使用时要加v-;

2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名,出现这种情况使用引号将名字括住,不然会报错。

生命周期

1.又名:生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或 组件实例对象。

生命周期分析

1) 初始化显示

beforeCreate()数据代理、数据监测前

此时,无法通过vm访问到data中的数据、methods中的方法

created()数据代理、数据监测后

此时,可以通过vm访问到打data的数据、methods中配置的方法

beforeMount()虚拟DOM转为真实DOM前

此时:页面呈现的是未经Vue编译的DOM结构,所有对DOM的操作都不奏效

mounted()虚拟DOM转为真实DOM后

此时:页面呈现的是经过Vue编译的DOM结构,所有对DOM的操作都奏效(尽量避免操作),一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件

2) 更新状态: this.xxx = value

beforeUpdate()数据更新前

此时,数据是新的,页面是旧的。即:页面和数据未保持同步

updated()数据更新后

此时,数据与页面都是新的。即:页面和数据保持同步

销毁 vue 实例: vm.$destory()

beforeDestory()

此时:vm中所有的data、methods、指令等都处于可用状态(可用但不再进行数据更新),马上执行销毁过程。一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾工作

destoryed()

常用的生命周期钩子

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效,但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐