Vue组件

最新推荐文章于 2025-01-12 09:11:23 发布
原创 最新推荐文章于 2025-01-12 09:11:23 发布 · 791 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script>
        //全局组件
        var AAA = Vue.extend({
            template:'<h3>这是标题</h3>'
        });

        Vue.component('aaa',AAA);

        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{}
            });
        }
    </script>
</head>
<body>
<div id="box">
    <aaa></aaa>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script>
        Vue.component('aaa',{
            template:'<h3>这是标题</h3>'
        });
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{}
            });
        }
    </script>
</head>
<body>
<div id="box">
    <aaa></aaa>
</div>
</body>
</html>

局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script>
        var Aaa = Vue.extend({
            template:'<h3>{{msg}}</h3>',
            data(){
                return{
                    msg:'dddddd'
                }
            }
        });
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    dSign:true
                },
                //局部组件
                components:{
                    aaa:Aaa
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <aaa></aaa>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script>
        Vue.component('aaa',{
            template:'<strong>标题</strong>'
        });
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                components:{
                    aaa:{
                        template:'<h2>文字文字</h2>'
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <aaa></aaa>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                components:{
                    'aaa':{
                        data(){
                            return {
                                msg:'文字文字'
                            }
                        },
                        methods:{
                            change(){
                                this.msg = '改变了'
                            }
                        },
                        template:'<h2 @clcik="change">标题-》{{msg}}</h2>'
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <aaa></aaa>
</div>
</body>
</html>

组件的其他形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--<script src="../js/Vue.js"></script>-->
    <script src="../js/vue1.0.js"></script>
    <script>
        //全局组件
        window.onload = function(){
            var Aaa = Vue.extend({
                //data必须是函数形式，return返回的必须是json格式
                data(){
                    return {
                        msg:'这是标题'
                    };
                },
                methods:{
                    change(){
                        this.msg='点击后改变了的文字'
                    }
                },
                template:'<h3 @click="change">{{msg}}</h3>'
            });

            Vue.component('aaa',Aaa);

            var vm = new Vue({
                el:'#box',
                data:{

                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <aaa></aaa>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/Vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                components:{
                    aaa:{
                        data(){
                            return {
                                msg:'welcome vue'
                            }
                        },
                        methods:{
                            change(){
                                this.msg = 'changed';
                            }
                        },
                        template:'<h2 @click="change">标题->{{msg}}</h2>'
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <aaa></aaa>
</div>
</body>
</html>

动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/Vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    a:'aaa'
                },
                components:{
                    aaa: {
                        template:'<h2>这是aaa标签</h2>'
                    },
                    bbb:{
                        template:'<h2>这是bbb标签</h2>'
                    }
                }
            });
        }
    </script>
</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>
</body>
</html>
Vue组件：插槽
pan_junbiao的博客
09-09 1555
在实际开发中，子组件往往只提供基本的交互功能，而内容是有父组件来提供的。为此，Vue.js 提供了一种混合父组件内容和子组件模板的方式，这种方式称为内容分发。Vue.js 参照当前 Web Components 规范草案实现了一套内容分发的 API，使用 元素作为原始内容的插槽。
Vue组件：动态组件、缓存组件、异步组件
pan_junbiao的博客
09-10 1139
Vue.js 提供了对动态组件的支持。在使用动态组件时，多个组件使用同一挂载点，根据条件在不同组件之间进行动态切换。动态组件通过使用 Vue.js 中的元素，动态绑定到该元素的 is 属性，根据 is 属性的值来判断使用哪个组件。在多个组件之间进行切换的时候，有时需要保持这些组件的状态，将切换后的状态保留在内存中，以避免重复渲染。为了解决这个问题，可以用一个 元素将动态组件包含起来。
vue3中实现页面onload和onshow
siennagesen的博客
07-11 3369
vue3中实现页面onload（onMounted）和onshow（watch监听页面路径变化，前后相同即为onshow）
vue 滚动加载
花生日记
06-02 1755
使用该方法还有个好处就是它可以隐藏元素，因为如果我们的组件是一个 button，那么在组件中只有一个元素，但是在v-ui中我们可以隐藏多个元素，这就是因为 handler方法需要进行初始化操作。首先，v-ui中是通过将组件的 button放入到v-ui的 DOM树中来获取组件数据的。因为如果你只对一个组件数据进行更新，而其他的组件数据并没有修改的话，那么当你再次进行更新的时候，它会将当前组件的数据和之前的进行比较，如果之前的数据发生了变化，那么会把这个变化告知给其他的组件。// 发送请求获取数据。
vue onload传参 赋值_Vue如何刷新当前页面？我是这样做的，你呢？
weixin_39605345的博客
12-12 3300
点击上方“执行上下文”，选择“置顶公众号”关键时刻，第一时间送达！function a(a,b)和function b({a,b})的区别 // 前者在传参的时候可以是单独的传参方式，也可以是键值对的方式如：a(1,2)Ora({a:1,b:2})// 后者传参的时候必须以键值对的方式出现如：b({a:1,b:2})vue如何动态加载组件 1、使用import导入组件，可以获取到组件le...
小程序问题：封装公共组件的onLoad方法不生效
专注于前后端技术知识分享。
11-06 7557
于是就出现了页面数据不能加载的问题，在一番打印查找之后，发现是组件中onLoad方法一直没有执行，导致内部的方法没有调用，表格里的数据没有拿到。然后在Component构造器的lifetimes配置项中，使用与onLoad方法同等作用的attached 方法，发现内部的方法成功调用，拿到表格数据。uni中，在页面当中引用公共组件时onLoad方法不执行 ，可以使用vue自带生命周期函数created、mounted ，或者使用$refs获取组件中的方法并调用来解决。// 组件所在页面的生命周期声明对象。
自定义组件onLoad函数不执行
weixin_70243424的博客
07-21 915
【代码】自定义组件onLoad函数不执行。
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
Vue组件化编程3：组件的嵌套、VueComponent构造函数
casually的博客
12-13 1315
以上就是组件的嵌套、VueComponent构造函数的全部内容，这对于我们以后Vue项目开发很有帮助，要好好理解理解。
vue 控件component
weixin_30781433的博客
08-18 144
<html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cd...
VUE笔记
qq_27917755的博客
07-15 560
vue笔记
Vue快速了解并上手-3
weixin_45969711的博客
11-12 1635
系列文章目录 上期我们讲解了系统指令、过滤器、自定义指令等等内容，这期我们继续讲解vue相关知识 文章目录系列文章目录1、计算属性1.1、计算属性实现表格内容的搜索2、在Vue中实现请求发送2.1、axios2.1.1、axios表格2.1.3、实现表格获取请求数据2.1.4、实现表格数据删除2.1.5、实现表格数据的添加2.1.6、实现表格数据的搜索2.2、watch-基本使用总结 1、计算属性 场景:当表达式过于复杂的情况下 可以采用计算属性 对于任何复杂逻辑都可以采用计算属性 常用的计算属性的例
Vue onload事件的坑
XIONGDA的博客
11-13 4559
先占个位，大概就是asnyc同步异步的问题 等我有时间再来写，开个新坑，基于webgis的矢量数据管理系统
Vue路由传值
王春燕的博客
06-07 2209
​ 一、路由传值： 1、通过路由的路径带参数（url中显示参数），同时配置路由的时候也要带上参数，获取参数使用this.$route.params.id，直接拿路由里面的参数。 2、不用在router.js路由页配置参数来接收（url中不显示参数，刷新页面会丢失传递过来的参数），而是通过name或者path去跳转（name和path写法一样，区分name和path） ​...
window.onload用法
acess520的博客
04-14 1256
window.onload用法: 网页中的javascript脚本代码往往需要在文档加载完成过后才能去去执行，否则可能会导致无法获取对象的情况，为了避免这样的情况发生 我们可以采用2种方式： 1,、将脚本代码放在网页底端，这样运行代码的时候，因为是从上往下运行的，所有可以确保操作对象已经加载完成。 2、通过window.onload来执行脚本代码。 第1种方式需要将代码放在合适 的位置，
Vue生命周期函数
q709971076的博客
08-25 292
今天小编继续和大家一起研究Vue，今天要一起探讨的是生命周期函数，在小编的理解中，生命周期就是在一定时间自动执行的函数，就类似原生js中的window.onload。 小编先拷贝一张来自Vue官方文档中的一张图 其实在这张图中，已经完整的说明了Vue中每个生命周期中的函数的执行时间，但是小编还是要用代码结合注释，更加详细的说明生命周期。 const app = Vue.createApp({ data(){ return { message: 'helllo world'
【Uniapp-Vue3】页面生命周期onLoad和onReady
最新发布
XunLin233的博客
01-12 1209
onLoad在页面载入时触发，多用于页面跳转时进行参数传递。
Vue框架1
lealiujj的博客
08-28 179
Vue框架个人总结一、： 1、html中的元素都需要用vue来实例化为一个vue对象： window.onload = function(){ var vm = new Vue({ el:'#app', //el表示元素(elements)，后面是选择器。可以选择多个吗？？ 不行，写多个默认选第一个 data:{message:'hello world!'...
Vue组件开发实践与示例分析
资源摘要信息: "在本文档中，我们将探讨关于Vue组件的示例以及相关的开发细节。Vue.js是一个流行的前端JavaScript框架，它允许开发者通过组件化的方式构建用户界面。组件是Vue的核心概念之一，它允许开发者封装可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值