Vue组件开发（初学者也能学会）

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量1.4k 收藏 4
点赞数 1
文章标签： vue.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rousongxiaobei_/article/details/132187463
版权

一、组件的使用

1.1创建组件的两种方式

var Header = { 
    template:'模板' , 
    data是一个函数,
    methods:功能,
    components:子组件们 
}//局部声明
​
Vue.component('组件名',组件对象);//全局注册 等于注册加声明了

1.2组件的分类

  • 通用组件（例如表单、弹窗、布局类等) (多个项目都可以复用)

  • 业务组件（抽奖、机器分类）（本项目中复用）

  • 页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）

  • 组件开发三部曲：声明、注册、使用

注意：子组件的命名，如果有驼峰命名，在使用子组件标签时用“-”隔开

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
​
<body>
    组件的使用:组件是开发种最常用的方式。
    <div id="app01"></div>
</body>
<script src="./js/vue2.js"></script>
<script>
    // 使用语法糖来声明局部组件
    var Myheader = {
        template:`
            <div>我是头部</div>
        `
    }
    // 使用完整形式来声明局部组件
    var Mybody = Vue.extend({
        template:`
            <div>我是身体</div>
        `
    });
    // 全局组件的声明和注册是放在一起的,第一个参数是组件名字，第二个参数是组件内容
    Vue.component('myfoot',{
        template:`
            <div>我是尾部</div>
        `
    })
    new Vue({
        el:'#app01',
        // 在模板种使用标签来使用组件
        template:`
            <div>
                <Myheader></Myheader>
                <my-body></my-body>
                <myfoot></myfoot>
            </div>
        `,
        // 使用components 来注册局部组件，
        components:{
            Myheader,
            Mybody
        }
    });
</script>
​
</html>

二、 插槽slot

slot就是在声明子组件时给DOM留下的坑位，以便于父组件在使用子组件的时候可以在坑位里动态的插入自己的内容。

并且，坑位是可以命名的，也就是说，子组件在声明的时候命名坑位，方便父组件在指定的坑位中插入内容

slot是动态的DOM

2.1插槽的使用：

  • 步骤有两步：a.子组件上留坑。b.父组件使用子组件的时候，给坑里赋值.
  • 要有父子组件作为前提。
  • 目的是让子组件成为动态的组件。

2.2匿名插槽

匿名插槽就是在声明的时候没有声明name，会把全部内容都显示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Myheader>
            <div>插槽</div>
        </Myheader>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var Myheader={
        template:`
        <div>
            <slot></slot>
            我是头部
            <slot></slot>
        </div>
        `
    }
    new Vue({
        el:'#app',
        //使用components来注册局部组件
        components:{
            Myheader
        }
    })
</script>
</html>

效果：

2.3 具名插槽

具名插槽会在声明时，指定name。会在子组件中有选择的进行展示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Myheader>
            <div slot="chacao01">插槽01</div>
            <div slot="chacao02">插槽02</div>
        </Myheader>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var Myheader={
        template:`
        <div>
            <slot name="chacao01"></slot>
            我是头部
            <slot name="chacao02"></slot>
        </div>
        `
    }
    new Vue({
        el:'#app',
        //使用components来注册局部组件
        components:{
            Myheader
        }
    })
</script>
</html>

效果：

三、$refs和$parent

这两个属性的作用是获取到子组件实例数组和父组件实例。

有了实例，就可以很方便的操作组件的属性和方法。

3.1 $parent

vm.$parent

实例中应用 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好，我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗？</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa ref="erwa"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }

   var erwa={
        template:`
        <div>
            <hr>
            二娃 
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            }
        },

   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

 效果：

3.2 $refs

$refs的使用需要，在子元素上通过ref属性声明自己的引用名称

vm.$refs

 实例中应用 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好
       <button @click="oude">打一顿</button>
        <!-- <button @click="anfu">安抚一下</button> -->
       <saybyebye ref="dawa"></saybyebye>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }
   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        }
    },
    // 注册局部组件
    components:{
        saybyebye
    }
   })
</script>
</html>

效果：

四、父子组件间的通信

4.1 父传子 ：父传子的时候，通过属性传递

在子组件标签中，自定义属性和值

 <erwa ref="erwa" age="2" :shuxing="shuxing"></erwa>

在子组件内部，通过props属性，获取所有的值

  methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            }
        },
        props:[age,shuxing]

 实例中应用 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好，我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗？</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }

   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            }
        },
        props:['age','shuxing']

   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

效果：

4.2 子传父：子组件给父组件传递数据，采用的是$emit，自定义事件的方式完成

子组件触发自定义事件

var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing']

   }

父组件监听自定义事件

<erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>

var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }

 实例中应用 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好，我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗？</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }

   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing']

   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

 效果：

 五、非父子组件的通信

5.1 创建一个公共组件

//在Vue类的原型对象上，增加一个公共组件。这样所有的组件都可以使用此组件
    Vue.prototype.$middles=new Vue();

5.2 发送方，在公共组件上，触发一个事件

 //触发公共组件的自定义
                this.$middles.$emit('zhuanzou','爷爷被妖怪抓走了，咱俩去救爷爷')

5.3 接收方，监听公共组件上的这个事件，并接受数据

 mounted() {
            //绑定监听，公共组件的指定事件
            this.$middles.$on('zhuanzou',val=>{
                this.lift=100
                console.log(val);
            })
        },

 实例中应用 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好，我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗？</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //在Vue类的原型对象上，增加一个公共组件。这样所有的组件都可以使用此组件
    Vue.prototype.$middles=new Vue();

    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
            <button @click="hujiao2">呼叫二娃</button>
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },
        methods:{
            hujiao2(){
                //触发公共组件的自定义
                this.$middles.$emit('zhuanzou','爷爷被妖怪抓走了，咱俩去救爷爷')
            }
        }

   }
   //二娃
   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing'],
        mounted() {
            //绑定监听，公共组件的指定事件
            this.$middles.$on('zhuanzou',val=>{
                this.lift=100
                console.log(val);
            })
        },
   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

 效果：

 

 六、混入（mixin）

定义

提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

写法

6.1 局部混入

定义个混入对象
    data(){
            return{
                mixinName:'葫芦'
            }
        },
        mounted() {
            console.log('混入对象',this.mixinName);
        },
    }
引用使用
mixins:[commonMiXin]

  实例中应用 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好，我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗？</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //在Vue类的原型对象上，增加一个公共组件。这样所有的组件都可以使用此组件
    Vue.prototype.$middles=new Vue();

    var commonMiXin={
        data(){
            return{
                mixinName:'葫芦'
            }
        },
        mounted() {
            console.log('混入对象',this.mixinName);
        },
    }

    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}--{{mixinName}}
            <button @click="hujiao2">呼叫二娃</button>
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },
        methods:{
            hujiao2(){
                //触发公共组件的自定义
                this.$middles.$emit('zhuanzou','爷爷被妖怪抓走了，咱俩去救爷爷')
            }
        },
        mixins:[commonMiXin]

   }
   //二娃
   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing'],
        mounted() {
            //绑定监听，公共组件的指定事件
            this.$middles.$on('zhuanzou',val=>{
                this.lift=100
                console.log(val);
            })
        },
       
   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

效果： 

Vue.mixin(myMixin);

6.2  全局混入

定义个混入对象

引入使用

Vue.mixin(myMixin);

 

小鱼赶紧洗洗睡吧
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
深入浅析Vue组件开发
09-01
本文是主要介绍基于Vue的一个组件开发。本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧
Vue组件开发技巧总结
08-27
通过代码示例给大家详细分析了Vue组件开发的相关技巧以及知识点，对此有需要的读者们参考下吧。
VUE 创建组件常见的几种方式
知码客
05-24 582
要在其他组件或 Vue 实例中使用单文件组件，你需要使用构建工具（如 Webpack 或 Vite）和相应的加载器（如 vue-loader 或 @vitejs/plugin-vue）来处理。单文件组件（Single File Components，简称 SFCs）是 Vue.js 官方推荐的一种组件编写方式，它将一个组件的模板、JavaScript 和 CSS 写在同一个。方法创建的，注册后的组件可以在任何新创建的 Vue 实例（包括根实例）的模板中使用。局部组件是在 Vue 实例或组件的。
Vue组件化开发
m0_61924520的博客
09-06 2541
组件：是一个独立显示的视图单元，在构建大型应用时，我们通常会把可复用性强的部分。. （例如：头部导航、侧边栏等需要在多个页面展示的部分）提取出来，最终组合成一个完整的页面。. 在vue中，组件是可复用的vue实例。全局组件：注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，全局组件必须写在Vue实例创建之前。:::warning全局组件缺点：组件注册之后无法被回收，一直保存在内存中。
前端vue 教程（详细版）
it_varlue的博客
04-04 4475
vue基础知识.vue生命周期.vue动画使用.vue路由配置和懒加载.vuex的使用.vue的插件库.
Vue：组件化开发
islunatic的博客
04-14 662
JS代码CSS 代码
【Vue】Vite 组件化开发
懂得一千零一种,赋予你失败的方法！
06-23 2192
组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。
vue初学者资料基础篇和项目学习
03-19
Vue的基础教学和项目实践是学习过程中至关重要的部分，对于初学者来说，掌握这些内容能帮助快速上手并深入理解Vue的核心概念。 1. **Vue.js基础知识** - **安装与设置**：Vue可以通过CDN链接引入，或者使用npm进行...
Vue 项目构建与开发入门
05-03
本教程“Vue 项目构建与开发入门”旨在帮助初学者熟悉Vue项目的搭建和开发流程，通过掘金小册的形式，以Markdown文档分享了多个关键知识点。 首先，我们从“构建基础篇 2：webpack 在 CLI 3 中的应用.md”开始，...
前端开发学习笔记，练手Vue小项目
09-05
本学习笔记主要关注于使用Vue.js进行实践性项目开发，帮助初学者通过构建实际应用来提升技能。 1. **Vue.js简介** Vue.js是由尤雨溪开发的渐进式框架，它允许开发者逐步地采用框架的不同部分，从简单的视图层到...
vue初学到入门视频加代码教程.zip
08-04
Vue.js 是一款轻量级的前端JavaScript框架，以其易学...通过这个压缩包，初学者可以期待一个全面且实践性强的学习旅程，涵盖从基础到进阶的Vue开发知识。同时，结合代码示例进行学习，有助于更好地理解和应用所学内容。
一个例子轻松学会Vue.js
10-20
本文通过一个具体的信息管理系统例子，深入浅出地介绍Vue.js的核心概念和语法，帮助初学者快速上手。 1. MVVM设计模式 Vue.js遵循MVVM（Model-View-ViewModel）设计模式，实现数据模型与视图之间的双向绑定。当...
Vue学习笔记之组件开发
bfbshs_ddd的博客
12-04 1160
接上文，本文记录vue的组件开发、组件通信、生命周期等内容
Vue-组件化开发
M_Edison的博客
04-01 1374
文章目录1. vue组件化思想2. 组件化基本使用详情2.1 注册组件的基本步骤2.2 全局组件与局部组件2.3 父组件与子组件2.4 组件的分离写法3. 组件化的数据存放data3.1 组件数据的存放3.2 为什么组件中必须是一个函数data4. 父子组件通信4.1 父传子4.2 子传父5.插槽5.1 普通使用5.2 具名插槽的使用5.3 作用域插槽 1. vue组件化思想 组件化提供了一种抽象，让我们可以开发一个个独立的可复用的小组件来构建我们的应用。 任何的应用都会被抽象成一颗组件树。 组件
用Vue简单开发一个学习界面
qq_62512326的博客
05-26 3931
我们分为三个专题，并且创建4个vue文件，还有以下js。"版权所有，仅限学习使用，禁止传播！
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 6万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
Vue 组件化开发（重要，说三遍）
m0_66451927的博客
07-15 1021
组件化的实现和基本步骤、组件化的基本使用过程、全局组件和局部组件、父组件和子组件的区别、注册组件的语法糖写法、组件模板抽离的写法、为什么组件data必须是函数、组件通信、父传子、props中的驼峰标识、子传父、父子组件通信案例...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 284
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值