vue19 组建 Vue.extend component、组件模版、动态组件

最新推荐文章于 2024-01-11 11:57:28 发布
最新推荐文章于 2024-01-11 11:57:28 发布
阅读量146 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yaowen/p/6977695.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
    </div>
    <script>
        var Aaa=Vue.extend({//继承出来一个Vue类Aaa
            template:'<h3>我是标题3</h3>'
        });
        var a=new Aaa();//a跟vm一样
        console.log(a);
        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            template:'<h3>我是标题3</h3>'
        });
        Vue.component('aaa',Aaa);//aaa是组建实例，全局组件
        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            data(){
                return {
                    msg:'我是标题^^'
                };
            },
            template:'<h3>{{msg}}</h3>'
        });

        Vue.component('aaa',Aaa);


        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        });

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            data(){
                return {
                    msg:'我是标题^^'
                };
            },
            methods:{
                change(){
                    this.msg='changed'
                }
            },
            template:'<h3 @click="change">{{msg}}</h3>'
        });

        Vue.component('aaa',Aaa);


        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        });

    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa></aaa>
    </div>

    <script>
        var Aaa=Vue.extend({
            template:'<h3>{{msg}}</h3>',
            data(){// es6语法，函数不写：，组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json)
                return {
                    msg:'ddddd'
                }
            }
        });


        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            },
            components:{ //局部组件，放到某个组件内部，Vue.component('aaa',Aaa);
                aaa:Aaa
            }
        });

    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>
    <script>
        var Aaa=Vue.extend({
            template:'<h3>{{msg}}</h3>',
            data(){
                return {
                    msg:'ddddd'
                }
            }
        });
        var vm=new Vue({
            el:'#box',
            data:{
                bSign:true
            },
            components:{ //局部组件
                'my-aaa':Aaa
            }
        });
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>
    <script>
        Vue.component('my-aaa',{//全局，公共的提出去
            template:'<strong>好</strong>'
        });
        var vm=new Vue({
            el:'#box'
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            components:{ //局部
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue'
                        }
                    },
                    methods:{
                        change(){
                            this.msg='changed';
                        }
                    },
                    template:'<h2 @click="change">标题2->{{msg}}</h2>'
                }
            }
        });
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>

    <template id="aaa">
        <h1>标题1</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue',
                            arr:['apple','banana','orange']
                        }
                    },
                    methods:{
                        change(){
                            this.msg='changed';
                        }
                    },
                    template:'#aaa'
                }
            }
        });

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
    </div>

    <script type="x-template" id="aaa">
        <h2 @click="change">标题2->{{msg}}</h2>
        <ul>
            <li>1111</li>
            <li>222</li>
            <li>3333</li>
            <li>1111</li>
        </ul>
    </script>

    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'my-aaa':{
                    data(){
                        return {
                            msg:'welcome vue'
                        }
                    },
                    methods:{
                        change(){
                            this.msg='changed';
                        }
                    },
                    template:'#aaa'
                }
            }
        });

    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <input type="button" @click="a='aaa'" value="aaa组件">
        <input type="button" @click="a='bbb'" value="bbb组件">
        <component :is="a"></component> <!-- 动态组件-->
    </div>

    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'<h2>我是aaa组件</h2>'
                },
                'bbb':{
                    template:'<h2>我是bbb组件</h2>'
                }
            }
        });

    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/yaowen/p/6977695.html

weixin_30338481
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
10-17
主要介绍了vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue独立组件开发：动态组件 Vue.extend及$mount
weixin_41952131的博客
04-18 388
在很多项目中我们需要使用动态组件，动态组件最大的区别是不能写死在模版中，而是在JS中调用，具有相当的灵活性。本文介绍了如何利用extend和mount方法创建动态组件，希望能帮到你。
Vue基于extend方法实现动态插入自定义组件以及组件props传值，“js-dynamic-components”。
薛定谔的猫的博客
04-05 1524
在很多时候，开发vue项目需要对我们自己开发的自定义组件进行动态的控制，以实现按照我们想要的组件去进行渲染，同时可以动态的管理操作前端的自定义组件渲染显示。那么如何实现？
ECharts 源码解读 四
Lingfur的博客
10-31 514
2021SC@SDUSC Component源码解读 主要介绍各component的渲染过程以及其使用的zrender graphic echarts对Component的定义呢，可以认为是除Series外的其他配置项。 组件类型 series 系列， legend 图例组件 tooltip 提示框组件， toolbox 工具栏组件， xAxis 直角...
《Vue2 进阶知识》动态挂载组件之Vue.extend + vm.$mount
最新发布
前端技术
01-11 639
《Vue2 进阶知识》动态挂载组件之Vue.extend + vm.$mount
Vue-extend和VueComponent
qq_40792800的博客
08-10 1843
在一个非单文件组件中(一个文件中包含n个组件，最常见的就是单个html文件中存在多个组件)，如果我们需要在这个文件中创建n个组件，然后再页面上展示，这时候我们就需要先定义组件，然后注册组件，最后使用组件。原则上，默认一个非单文件组件中 只存在一个 new Vue() 定义的根组件，可以有无数个 Vue.extend() 定义的子组件，这是因为，如果所有组件都用 new Vue() 定义，那么如果存在组件包裹的情况，子组件内部双向绑定的数据不会生效。， 因为是通过函数返回的。.........
用Vue.extend构建消息提示组件的方法实例
12-10
按照官方文档说法，他是一个类构造器，用来创建一个子类vue并返回构造函数，而Vue.component它的任务是将给定的构造函数与字符串ID相关联，以便Vue.js可以在模板中接收它。 了解了这点之后我们开始做我们的消息提示...
vue组件定义，全局、局部组件，配合模板及动态组件功能示例
12-10
本文实例讲述了vue组件定义，全局、局部组件，配合模板及动态组件功能。分享给大家供大家参考，具体如下： 一、定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'我是标题3</h3>' }); Vue....
vue.js实例对象+组件树的详细介绍
01-19
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置，可通过id或class或标签名 template: 装载的内容。HTML代码/包含指令或者其他组件的HTML片段，...调用Vue.component(组件标签,组
Vue中通过Vue.extend动态创建实例的方法
12-09
在Vue中，如果我们想要动态地来控制一个组件的显示和隐藏，比如通过点击按钮显示一个对话框或者弹出一条信息。我们通常会提前写好这个组件，然后通过v-if = “show”来控制它的显示隐藏。如下所示： <div> <button @click = "show = !show">弹出</button> <span xss=removed>这是一条通过按钮控制显示隐藏的信息</span> </div> 另外还有一种实现方法就是通过Vue.extend来动态地创建实例，在想要进行显示的时候创建实例。  在需要隐藏的时候删除这个实例。 1.通过Vue.extend创建构造
Vue.extend + vm.$mount 动态加载组件
前端技术
01-21 610
前提是组件模板已定义好，例如组件AComponents.vue <template> <h1>这是 A 组件.</h1> </template> <script> export default { name: 'AComponents', } </script> 主页中调用 <template> <div class="extend-main"> <button @clic.
Vue.extend动态组件
qq_38152997的博客
09-05 1235
Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。 Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必
Vue.extend动态注册子组件
weixin_34376986的博客
05-29 370
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能，使用起来也蛮不错的。 is 预期：string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作。 示例： <!-- 当 `currentView` 改变时，组件也跟着改变 --> <component v-bind:is="...
vue.extend() 动态创建组件
mhbsoft的博客
02-02 672
toast.js import Toast from "./toast.vue"; import Vue from 'vue'; const ToastConstructor = Vue.extend(Toast); function showToast(text, duration=2000) { const toastDOM = new ToastConstructor({ el: document.createElement('div'), data() {
Vue2.x将vue文件编写的组件使用API方式动态创建（vue文件替代HTML）
黄彪博客
02-05 732
文章目录文章参考问题描述解决办法解决思路解决方式 Vue.extend() API 文章参考 Vue.extend 看完这篇，你就学废了 vue2.x挂载$mount、Vue.extend()函数的作用——由elementUI message方法联想 Vue2.x 如何将vue文件编写的组件变为注册到全局组件？Vue.extend() 问题描述 在工作中使用的是Vue 脚手架搭建的，现在需要在地图上弹出一个pop 弹窗，问题是这个弹窗里面的内容全部要自己通过html写出来，因此官方给出的代码是自己写一
vue通过extend动态创建全局组件（插件）学习小记
weixin_30399797的博客
05-15 510
测试环境:nodejs+webpack，例子是看文章的，注释为自己的理解 创建一个toast.vue文件： <template> <div class="wrap" v-if="show"> <div>{{text}}</div> <div>{{temp1}}</div> ...
构建个人组件库——vue.extend和vue.component
我不是水哥
04-28 7085
    需求：构建一个类似elment-ui的组件库，打包发布到npm     个人探索：webpack打包发布到npm流程 --&gt; 组件开发环境和组件发布环境探索 --&gt;两种类型的组件     个人探索流程和实际流程基本是反着来的     本文目标：完成两种类型的组件，extend生成一个类似alert的组件，component生成一个search框组件     前置条件：本...
【Vue】动态添加组件的两种实现
热门推荐
MicroAnswer的博客
06-20 2万+
文章详情：【Vue】动态添加组件的两种实现 链接：https://www.microanswer.cn/blog/9
Vue.component 和 Vue.extend 的用途有什么区别
03-13
Vue.component 可以直接在模板中使用，而 Vue.extend 需要在组件中使用。另外，Vue.component 可以注册一个已经存在的组件，而 Vue.extend 则需要创建一个新的组件。总之，Vue.component 和 Vue.extend 都是用于创建...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值