Vue2中的各种自定义组件

最新推荐文章于 2024-07-23 14:46:42 发布
最新推荐文章于 2024-07-23 14:46:42 发布
阅读量1.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylhsuper/article/details/78492413
版权
复制到页面看下效果。 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script> -->
        <script src="https://unpkg.com/vue"></script>
        <!-- <script type="text/javascript" src="js/vue.js"></script> -->
        <!-- <script type="text/javascript" src="js/vue.min.js"></script> -->
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
        <style type="text/css">
            .red{color: #f00;}
        </style>
    </head>
    <body>
        
        <div id="app1">
            <h2>模板测试1</h2>
            <v-header></v-header> 
        </div>
        <script type="text/javascript">
            Vue.component("vHeader",{//标签中必须要将驼峰法拆开写。写成<vHeader></vHeader>就不会有效果
                template: "<div>这里面是模板1的内容。</div>"
            });
            var app1 = new Vue({
                el:"#app1"
            });
        </script>
        <hr>   
        <div id="app2">
            <h2>模板测试2</h2>
            <!-- 创建一个 to-item 组件的实例 -->
            <to-item></to-item>
        </div>
        <div id="app22">
            <h2>模板测试2-----</h2>
            <!-- 创建一个 to-item 组件的实例 可以多次调用 但必须实例化-->
            <to-item></to-item>
        </div>
        <script type="text/javascript">
            Vue.component("to-item",{   //"to-item"写成"toItem"驼峰写法也行。但调用模板的时候不能用驼峰。
                template: "<strong class='red'>这里是模板2内容的。</strong>"
            });
             //定义模板后，必须实例化，不然是不显示的，找不到Vue中的模板方法。
            var app2 = new Vue({
                el: "#app2"
            }); 
            var app22 = new Vue({
                el: "#app22"
            });
        </script>
        <hr>   
        <div id="app3">
            <h2>这里是模板测试3</h2>
            <ul>
                <other-item v-for="todo in list" :item = "todo" :key="todo.id" :id="todo.id"></other-item>
            </ul>
        </div>
        <script type="text/javascript">
            Vue.component("other-item",{
                props: ["item"],
                template: "<li>{{item.title}}</li>"
            });
            var app3 = new Vue({
                el: "#app3",
                data:{
                    list:[
                        {id: 0,title: "文本1"},
                        {id: 1,title: "文本2"},
                        {id: 2,title: "文本3"}
                    ]
                }
            });
        </script>
        <hr />
        <div id="app4">
            <h2>全局模板4</h2>
            <global-component></global-component><!-- 使用自定义标签在 Vue.js 模板中插入组件，编译时，这部分内容会被替换为组件的内容 -->
        </div>
        <div id="app5">
            <h2>全局模板4-------在全局组件定义之后调用</h2>
            <!-- 这里也插入了这个组件，全局注册的组件可以在所有晚于该组件注册语句构造的 Vue 实例中使用 -->
            <global-component></global-component>
        </div>
        <template id="global-template"> <!-- 这个模板里面只能有一个跟目录 --><!-- 此 DOM 元素的 innerHTML 作为全局注册组件的模板 -->
            <div>
                <h4>这里面是全局定义的组件模板内容</h4>
                <div>{{msg}}</div><!-- 和普通 Vue.js 模板一样，可以进行插值 -->
                <input type="text" v-model="msg" /><!-- 和普通 Vue.js 模板一样，也可以进行表单数据绑定 -->
            </div>
        </template>
        <script type="text/javascript">
            Vue.component("global-component",{
            // Vue.component("globalComponent",{ //globalComponent驼峰写法也行，但引用的时候不行。  使用语法糖（只使用扩展实例选项）全局注册组件
                data: function(){   //Vue 扩展实例构造器的 data 选项，必须是一个工厂函数，返回数据对象
                    return {
                        msg: "输入内容看看会有什么变化。"
                    }
                },
                template: "#global-template"
                //template 是模板，可以是包含 HTML 代码的字符串，也可以是 # + id，如果是 # + id，则会使用该选择子匹配的 DOM 元素的 innerHTML 作为模板
            });
            //在定义模板之后实例化，才有效
            var app4 = new Vue({
                el: "#app4"
            });
            var app5 = new Vue({
                el: "#app5"
            });
        </script>
        <hr />
        <div id="d">
            <div>1</div>
            <v-h></v-h>
        </div>
        <div id="dd">
            <div>2</div>
            <v-h></v-h>
        </div>
        <template id="tem">
            <div>
                <i>11</i>
                {{msg}}
                <input type="text" v-model="msg" />
            </div>
        </template>
        <script type="text/javascript">
            Vue.component("vH",{
                data: function(){
                    return {
                        msg: "hello word."
                    }
                },
                template: "#tem"
                // template: "<h6>888</h6>"
            })
            new Vue({
                el: "#d"
            });
            new Vue({
                el: "#dd"
            });
        </script>
        <hr />
        
    </body>
</html>

ylhsuper
关注
vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
Vue2.X 自定义组件
cc常 的博客
03-18 1397
Vue2.x 自定义组件自定义全局组件Vue中如何创建组件?创建组件的其它方式 - 组件模板自定义局部组件 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 Vue两大核心: 数据驱动界面改变 组件化 什么是组件? 在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件 什么是组件化? 将大界面拆分成小
vue.js2.0 自定义组件初体验
weixin_34129696的博客
05-06 101
理解 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 使用组件 创建单文件组件 &lt;template&gt; &lt;/template&gt; &lt;script&gt; ...
vue2 组件—js原生自定义日历组件实现方法
最新发布
qq_42101569的博客
07-23 651
封装一个日历组件，可以根据日期对应数据匹配对应阈值区间在当前日期下渲染不同颜色的短线。当天之后的日期显示为灰色，并设为无法点击的状态；若选择其他日期，小点位置一直保持在当天日期下，选择的日期显示为蓝色。在本案例中外部框架的高度是固定的，因此就要对含有不同周数的月份进行判断然后在样式设置，恰好占据4周的月份比较少，在本案例中并未对这种情况进行设置。currentMonth代表当前月份，currentYear代表当前年份，clickDate是组件内发生点击日期事件后向父组件传值，以便联动其他系统功能。
vue2-组件
weixin_45002586的博客
11-10 1961
vue 组件
vue2脚手架之自定义组件的总结
小淼淼的博客
10-02 1096
自定义组件的总结
Vue项目2：使用自定义组件
大头皮鞋的博客
07-06 357
本博文是用Vue Cli新建的项目为基础，编写自己的Component组件。 创建项目 进入cmd命令行，切换至工作目录，例如F:\Study\vue\demo C:\Users\Administrator>f: F:\>cd F:\Study\vue\demo F:\Study\vue\demo> 全局安装vue-cli npm install -g vue...
使用 Vue cli 3.0 构建自定义组件库的方法
10-17
总结来说，使用 Vue CLI 3.0 构建自定义组件库的关键步骤包括： 1. 安装和创建项目。 2. 添加必要依赖。 3. 修改工作目录结构和配置文件。 4. 添加编译脚本。 5. 创建自动化组件和文档生成脚本。 这个过程不仅可以...
使用VUE自定义组件封装数据字典实战
03-07
本文主要探讨的是如何使用Vue自定义组件来封装数据字典，以下拉列表为例。 首先，使用Element UI的`el-select`组件可以直接创建下拉列表，但这种方式在处理多个字典数据时会变得复杂。因为每个字典都需要单独请求...
Vue 中的自定义组件
Zhangq_1208的博客
02-08 567
被 Vue 所管理的标签可以认为是 vue 的组件。而在项目开发过程中，经常会遇到一些需要复用的标签结构以及相 应样式、脚本功能。
vue2制作自定义组件的教程
01-08
在Vue2中，自定义组件是构建可复用和模块化应用的核心元素。自定义组件允许开发者将复杂的UI逻辑拆分成独立的、可重用的部分，从而提高代码的可维护性和可读性。本教程将深入讲解如何在Vue2中创建自定义组件，包括...
vue2自定义组件v-model实现
黎小小的博客
11-11 1214
页面设置和组件管理切换：使用自定义组件v-model实现。
Vue2组件
sinat_29304113的博客
12-08 484
组件 目前存在问题：1.依赖关系混乱，不好维护；2.代码复用率不高。 定义： 实现应用中局部功能代码和资源的集合 （css\js\html mp3\mp4\字体…） 作用： 复用编码、简化项目编码、提高运行效率 种类： (1)非单文件组件：一个文件中含有n个组件。 (2)单文件组件：一个文件中含有1个组件。 Vue中使用组件的三大步骤： 一. 定义组件（创建组件） 二. 注册组件 三. 使用组件（写组件标签） 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和ne
Vue2——组件的自定义事件
mantou_riji的博客
07-20 3780
我们也可以定义组件的自定义事件，这样定义出来的事件是给组件用的。父组件定义自定义事件和触发的函数
Vue7：组件
menglong0329的博客
05-26 472
Vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件： <tagName></tagName&g.
vue2的组件
weixin_73577920的博客
01-03 2547
1、组件的作用整个项目都是由组件组成可以让代码复用：相似结构代码可以做成一个组件，直接进行调用就可以使用，提高代码复用性可以让代码具有可维护性（只要改一处，整个引用的部分全部都变）注意点：组件和模块区别模块仅对逻辑进行复用组件针对与结构、逻辑、样式进行复用的UI控件2、组件分类按作用范围分类全局组件：项目中所有地方都可以的组件称为全局组件局部组件(私有组件)：仅有该组件才能使用的组件称为局部组件按照用途来分页面组件自定义组件3、局部组件使用局部组件的具体步骤。
VUE2 组件
DTCloud
04-25 517
组件的写法 在一个.html文件中写组件（非单文件组件） <html> <body> <div id="root"> <Xuexiao></Xuexiao> <!-- 或者单标签 <school /> --> <student></student> </div> </body&gt
Vue2 组件自定义事件
每一个不曾起舞的日子，都是对人生的辜负。
02-01 466
示例程序 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="Vue-v2.5.22.js"&gt;&lt;/script&am
vue2自定义组件
Yana_li的博客
12-09 8461
第一个vue组件 在工程目录/src下创建component文件夹，并在component文件夹下创建一个firstComponent.vue。 在App.vue中使用插件 ( 因为在 index.html 里面定义了div id=”app”所以就以这个组件作为主入口) 第一步，引入 在便签内的第一行写 import firstComponent from './compone
vue2 中自定义组件
02-28
在Vue.js 2中，自定义组件是一种非常重要的概念，它允许开发者将页面拆分为可重用的组件，以提高代码的可维护性和复用性。下面是关于Vue.js 2中自定义组件的介绍： 1. 创建组件： 在Vue.js中，可以使用Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值