vue组件化

最新推荐文章于 2024-05-21 14:32:44 发布
最新推荐文章于 2024-05-21 14:32:44 发布
阅读量294 收藏
点赞数
分类专栏： vue 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AYUKiss/article/details/105939406
版权

组件化

为什么要使用组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

在vue里，所有的vue实例都是组件

全局组件

在多个vue实例中都可以使用
案例：

<body>
<div id="app">
    <test></test>
    <test></test>
    <test></test>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    //创建组件
    const cpnc=Vue.extend({
        template: `
                <div>
                <p>hello 组件</p>
                </div>
                `
    });
    //注册组件
    Vue.component('test',cpnc)
    var app=new Vue({
        el: "#app",
        data:{
    },
    });
</script>

简写

<body>
<div id="app">
    <test></test>
    <test></test>
    <test></test>
</div>
</body>
<script src="js/vue.js"></script>
<script>
   Vue.component("test",{
       template: `
            <div>
            <p>hello 组件你好</p>
            </div>
       `
   });
    var app=new Vue({
        el: "#app",
        data:{
    },
    });
</script>

局部组件

只能在当前vue实例中使用，常用
实例：

<body>
<div id="app">
    <test></test>
    <test></test>
    <test></test>
</div>
</body>
<script src="js/vue.js"></script>
<script>

  const cpn=Vue.extend({
      template: `
                <div>
                <p>hello vue局部组件</p>
                </div>
                `
  });
    var app=new Vue({
        el: "#app",
        data:{
        },
        //局部组件注册
        components:{
            test: cpn
        }
    });
</script>

模板分离写法

在这里插入图片描述
2.
在这里插入图片描述
组件内部不可以访问vue实例里面的数据

组件内部也可以有data属性，供给组件使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
为什么组件里的data要使用函数，当每次调用的时候，因为return返回的是新的对象的实例，对象之间互不干扰，组件复用时互不干扰

模板分离写法

<body>
<div id="app">
<test></test>
</div>

<template id="tem">
<p>{{title}}</p>
</template>
</body>
<script src="js/vue.js"></script>
<script>

    var app=new Vue({
        el: "#app",
            components: {
                test: {
                    template: `#tem`,
                    data() {
                        return {
                            title: "hello 组件"
                        }
                    }
                }
            }

    });
</script>

父子组件通信

在这里插入图片描述

props数据验证
验证都支持哪些数据类型呢？
String
Number
Boolean
Array
Object
Date
Function
Symbol
在这里插入图片描述

父传子

<body>
<div id="app">
<test :meg="message"></test>
</div>

<template id="tem">
<div>
    <p>{{meg}}</p>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>

    var app=new Vue({
        el: "#app",
        data:{
          message:"你好啊"
        },

            components: {
                test: {
                    template: `#tem`,
                    //定义在子类
                    props:{
                      // meg:String
                        meg:{
                        //如果是对象
                        	/*type：Object
                        	default：{  
                        	return {}
                        	}*/
                            type:String,
                            default:"这是我的默认值",
                            //必传，不传报错
                            required:true

                        }
                    },

                    }
                }
    });
</script>

子传父

<body>
<div id="app">
<!--  传给父类事件-->
<test @cbtn="pbtn"></test>
</div>

<template id="cpn">
  <div>
  <button v-for="item in category" @click="btnclick(item)">{{item}}</button>
  </div>
</template>

<script src="js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return {
        category: [
          {id:'1',name:'张三',age:18},
          {id:'2',name:'李四',age:19},
          {id:'3',name:'王二',age:20},
          {id:'4',name:'麻子',age:21}
        ]
      }
    },
    methods: {
      //发射事件
      btnclick(item){
        this.$emit('cbtn',item)
      }
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
    },
    components:{
      test:cpn
    },
    methods: {
      pbtn(item){
        alert(item.id+item.name+item.age);
      }
    }

  })
</script>

</body>

父访问子组件

$refs

<body>
<div id="app">
	//ref标记
    <test ref="aaa"></test>
    <button @click="getname">按钮</button>
</div>

<template id="tem">
    <div>
        <p>子组件</p>
    </div>
</template>
</body>
<script src="js/vue.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        methods: {
            getname() {
            		//取出对应的组件对象
                alert(this.$refs.aaa.name)
            }
        },
        components: {
            test: {
                template: `#tem`,
                props: {},
                data() {
                    return {
                        name: '张三'
                    }
                }
            }
        }

    });
</script>

插槽slot

预留空间，方便扩展
在这里插入图片描述

<body>
<div id="app">
    <test>
        <button>按钮</button>
    </test>
    <test><input placeholder="我是输入框"></test>
    <test></test>

</div>

<template id="tem">
    <div>
        <p>我是子组件</p>
        <!--预留插槽，插槽也可以有默认值-->
<!--  带默认值的插槽 <slot><button>按钮</button></slot>-->
        <slot></slot>
    </div>

</template>
</body>
<script src="js/vue.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        components: {
            test: {
                template: `#tem`,
            }
        }

    });
</script>

具名插槽（修改具体的插槽）

<body>
<div id="app">
    <test><h1 slot="left">啊哈哈</h1></test>
    <test></test>
</div>

<template id="tem">
    <div>
        <slot name="left"><p>左插槽</p></slot>
        <slot name="center"><p>中插槽</p></slot>
        <slot name="right"><p>右插槽</p></slot>
    </div>

</template>
</body>
<script src="js/vue.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        components: {
            test: {
                template: `#tem`,
            }
        }

    });
</script>

展示：
在这里插入图片描述
父组件替换插槽的标签，内容由子组件提供
在这里插入图片描述

<body>
<div id="app">
    <test></test>
    <test>
        <template v-slot="slot">
            <p>{{slot.data.join(',')}}</p>
        </template>
    </test>
    <test></test>
</div>

<template id="tem">
    <div>
        <slot :data="meg">
            <p v-for="item in meg">{{item}}</p>
        </slot>
    </div>

</template>
</body>
<script src="js/vue.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        components: {
            test: {
                template: `#tem`,
                data() {
                    return {
                        meg: ['java', 'js', 'c++']
                    }
                }
            }
        }

    });
</script>

模块化

解决引入命名变量冲突
ES6：
在这里插入图片描述
type模块化
import 导入
在这里插入图片描述
export导出
在这里插入图片描述

思考
在这里插入图片描述
在这里插入图片描述

樱花献佛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 在纯 HTML 普通项目中实现组件化，让原生 html 项目支持引入 *.vue 组件 / 组件与组件间的互相引用等，完美解决了引入组件出现的跨域问题（保姆级详细教程，完整示例源码及插件）
王佳斌
05-09 2409
html中使用vue组件，在HTML页面中引入vue组件，HTML界面利用 http-vue-loader.js以组件方式引入vue文件，使用http-vue-loader引入组件出现报错，在html页面使用http-vue-loader插件引入组件报跨域错误，如何解决http-vue-loader引用组件时出现跨域问题，纯html原生web项目引入vue后如何实现组件引入，使用http-vue-loader插件控制台报错跨域，http-vue-loader 跨域怎么办官方文档， html页面如何引入.vu
普通HTML文件如何使用VUE组件
qq_63704334的博客
06-19 1万+
标签内，编写Vue组件的JavaScript代码。首先，创建一个Vue组件对象，定义组件的模板、数据和方法等。需要注意的是，Vue组件的代码可以放在单独的JavaScript文件中，然后在HTML文件中使用。你也可以将Vue框架的JavaScript文件下载到本地，并使用相对路径引入。标签内，添加以下代码来引入Vue框架的JavaScript文件。现在，你可以在HTML文件中使用Vue组件了。1. 引入Vue框架：在HTML文件中的。3.编写Vue组件：在HTML文件中的。中，并显示组件中定义的内容。
Vue.js-组件化开发
hxy1625309592的博客
04-25 276
1.1 基本概念 组件化是Vue.js中的重要思想。 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。 ​ 组件化思想的应用 有了组件化的思想，我们在之后的开发中就要充分的利用它。 尽可能的将页面拆分成一个个小的、可复用的组件。 这样让我们的代码更加方便组织和管理，并且扩展性也更强。 1.2 组件化的基本使用 组件的使用分成三个步骤 创建组件构造器。 注册组件 使用组件。 代码示例 <!DOCTYPE html&
vue的组件化
CSSAJBQ_的博客
05-21 375
vue的组件化，就是根据功能、业务逻辑、数据流向等因素进行划分把页面拆分成多个组件。组件是资源独立的，组件也可以相互嵌套。在src的components文件下创建，main.js中全局注册。或者在当前需要使用的vue页面同级目录下创建components文件夹代表当前页面的私有组件。可以在src的components文件下创建2个文件夹区分公共组件和私有组件。在src的components文件下创建一个TopTitle.vue的文件。私有组件：创建组件，并通过components节点注册组件。
咬文嚼字vue系列(一)
sjpeter的专栏
07-17 388
1.基础知识 AMP，CMP，UMP的由来 AMD是RequireJS在推广过程中对模块定义的规范化产出，AMD是异步加载模块，推崇依赖前置。 CMD是SeaJS在推广过程中对模块定义的规范化产出，对于模块的依赖，CMD是延迟执行，推崇依赖就近。 UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先，异步加载；CommonJS是服务器优先，同步加载。 dom模板与字符串模板 HT...
在HTML页面中引入vue组件
zysskt的博客
10-20 1万+
vue2
vue组件
MixedSignals的博客
08-26 275
注册局部组件，这个组件只能在这个实例中使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="vue.js"></script> <div id="app"> <name></name&g
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
vue组件化.zip
04-17
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
Vue组件化开发
06-21
本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官 方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三 方组件的使用、手把手带你打造自己的表单组件、Vue核心插件...
html中使用vue组件
热门推荐
guoyp2126的博客
08-04 2万+
VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue，大家很容易去了解和熟悉VUE。现在看来在html使用vue组件还有两大作用，一个是封装比较复杂的组件，在其他应用中使用，另一个作用是调试样式.........
如何在原生HTML里面使用VUE（保姆级教学）
qq_57956183的博客
07-14 1万+
上面是在原生HTML里面引入vue的方法，其他的同理，如：elementUI、ant Desgin Vue等，都可以用类似的方式引入到原生HTML里。这样就可以在html里面使用Vue了，下期我将分享在html里面使用Vue组件~成功引入vue后，我们就可以在html文件里使用vue，下面是示例；将上面代码添加到html的head里，即可全局使用vue的方法；（2）将搜索到的内容全选复制项目的vue.js文件里，如图；（3）在index.html里面引入；）复制到浏览器，并搜索；（1）将CDN的路径（
【html页面引入vue页面】使用httpVueLoader.js让html页面引入vue文件当组件使用，html组件化开发
seeeeeeeeeee的博客
01-16 6482
最近遇到的一个需求，就是html页面需要组件化开发，然后找了一圈，发现很多组件化开发不好用一般就是几种，比较用的多的一个是iframe嵌套页面，一个就是通过js生成页面写组件。感觉都挺麻烦的。就想着有没有能像vue哪样简单的组件引入方式。而且iframe加载也慢。没有组件快。后来发现了这个httpVueLoader.js非常好用。只需要引入这个文件，然后其他使用方法和vue差不多了。稍微有点变动可能就是传值方面。传值下面也给出了方案。集中传值的方法应该大体是够用了的。
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 6355
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
vue如何在html页面更优雅的使用组件化开发
qq_42451776的博客
11-03 1016
文章目录存在问题htmlindex.jsheaderCom.js 存在问题 没有实现全局组件的复用，只能在单一页面做逻辑的拆分 传递array 类型数据到子组件，会出现无法解析语法的问题 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"
Vue组件化
qq_49375885的博客
06-13 369
Vue组件化开发就是把网页的重复代码抽取出来，分装成一个个可复用的视图组件，然后将这些可视化组件组装在一起构成一个完整的系统。
【Vue学习笔记】 组件化
biancheng_的博客
03-18 300
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
vue 组件化,模块化
最新发布
06-25
Vue.js 是一个流行的前端JavaScript框架，它的核心理念之一就是组件化和模块化开发。这两个概念在 Vue 中是相辅相成的： 1. **组件化**：Vue 提倡将界面拆分成可重用的、独立的组件。每个组件都有自己的模板、数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值