vue组件 和 生命周期

最新推荐文章于 2024-05-20 10:06:54 发布
最新推荐文章于 2024-05-20 10:06:54 发布
阅读量922 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53366282/article/details/123689373
版权

目录

vue组件学习

 vue组件切换

vue父组件传递子组件

vue子组件向父组件传值

生命周期

vue组件学习

代码：

<!DOCTYPE html>
<head>
    <title>组件学习</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 一个页面可以有多个vue实例 -->
    <div id="app">
        <p>{{msg}}</p>
        <my-component name="父组件传值到子组件"></my-component>
        <my-component></my-component>
        <my-component></my-component>
    </div>
    <div id="tianjin">
        <p>{{str}}</p>
        <twice-component></twice-component>
    </div>
    <!-- template 模板 -->
    <!-- <template > 标签类比<style> -->
    <template id="temptest">
        <button v-on:click="count++">被单击{{count}}次  {{message}}</button>
    </template>

    <script>
        //组件只能通过函数来定义  在script里写全局组件
        Vue.component('my-component',{
            props:['name'],//传递
            data(){
                return{count:0,message:'改变前'}
            },
            template: '#temptest'
        })
        // 数据可以通过Vue实例也可呀通过函数定义
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"数据"
            }
            // ,
            // data(){
            //     return{ msg:"data函数方式"}
            // }
        });
        var vm = new Vue({
            el:'#tianjin',
            data:{
                str:"第二个vue实例"
            },
            // 在实例里写局部的组件
            components:{
                //自动把驼峰名称转换为带-的。例如 组件twiceComponent 调用时是<twice-component>
                twiceComponent:{
                 data(){
                   return{ count:0}
                },
                    template: '<button v-on:click="count++">第二个vue实例被单击{{count}}次</button>'
                }
            }
        })
    </script>
</body>

运行结果如下

 单击按钮会增加次数

 vue组件切换

代码如下：

<!DOCTYPE html>
<head>
    <title>组件切换</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="#" @click.prevent="flag?flag:flag=!flag">登录</a>
        <a href="#" @click.prevent="flag?flag=!flag:flag">注册</a>
        <login v-if="flag"></login>
        <register v-else></register>
    </div>

    <script>
        Vue.component('login',{
            template: '<div>登录页面</div>',
        })
        Vue.component('register',{
            template: '<div>注册页面</div>',
            created(){

            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            // 钩子函数
            beforeCreate(){

            },
            created(){

            },
            beforeMount(){

            },
            mounted(){

            },
            beforeUpdate(){

            },
            updated(){

            },
            beforeDestroy(){

            },
            destroyed(){
                
            }

        })
    </script>
</body>

运行结果为：

 单击注册可变为

vue父组件传递子组件

<!DOCTYPE html>
<head>
    <title>父组件传递子组件</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <my-parent name="传递值"></my-parent>
    </div>

    <script>
        Vue.component('my-parent',{
            // props 选项传递数据
            props:['name'],
            template:'<div>我是父组件{{name}}</div>'
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"数据"
            }
        })
    </script>
</body>

 运行结果为：

vue子组件向父组件传值

 

<!DOCTYPE html>
<head>
    <title>子组件向父组件传值</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <parent></parent>
    </div>
    
    <template id="child">
        <div>
            <button @click="click">Send</button>
            <input type="text" v-model="message">
        </div>
    </template>

    <script>
        
        // 父组件
        Vue.component('parent',{
            template:'<div><child @childfn="transContent"></child>'+'子组件传来的值: {{message}}</div>',
            data(){return {message: ''}},
            methods: {
                transContent(payload){
                        this.message = payload
                }}
            })

        // 子组件
        Vue.component('child',{
            template: '#child',
            data(){
                return {message: '子组件的消息'}
            },
            methods: {
                click(){
                    // $emit 方法就是触发事件，并把本值传过去
                    this.$emit('childfn', this.message);
                }
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"数据"
            }
        })
        
           
       
    </script>
</body>

运行结果为：

输入框输入消息后点击Send按钮为：

生命周期

 

<!DOCTYPE html>
<head>
    <title>生命周期</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="isShow" ref="div">test</div>
        <button @click="isShow=!isShow">更新</button>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"数据",
                isShow: false
            },
            // beforeCreate:统计一个Vue实例的耗时 与created方法 获取当前时间相减，就能得到实例创建的耗时。
            beforeCreate(){ //不常用
                console.log('实例创建之前')
                console.log(this.$data.msg)//this.$data.msg=this.msg  $data可以省略
            },
            //created:最常用就是请求后端接口，获取数据，将数据同步到data里
            created(){  //常用 
                console.log('实例创建之后')
                console.log(this.msg)
            },
            beforeMount(){
                console.log('挂载之前')
                // 通过this.$el获取el的DOM元素
                console.log(this.$el.innerHTML)
            },
            mounted(){
                console.log('挂载之后')
                // 通过this.$el获取el的DOM元素
                console.log(this.$el.innerHTML)
            },
            beforeUpdate(){
                console.log('更新之前')
                console.log(this.isShow)
                console.log(this.$refs.div)
            },
            updated(){
                console.log('更新之后')
                console.log(this.isShow)
                console.log(this.$refs.div)
            
            },
            beforeDestroy(){
                console.log('销毁之前')
            },
            destroyed(){
                console.log('销毁之后')
            }

        })
    </script>
</body>

 运行结果为：

 点击更新后为：

 

看云清雾淡
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件生命周期详解
08-28
主要为大家详细介绍了vue组件生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue组件及生命周期
m0_63400611的博客
05-31 382
组件化开发指的是: 根据封装的思想,把页面上可以重用的UI结构封装为组件,从而方便项目的开发和维护vue是一个支持组件化开发的前端框架vue中规定: 组件的后缀名是 .vue, 之前接触到的 App.vue 文件本质上就是一个 vue 组件每个 .vue 组件都由3部分构成,分别是: 注意: 在 .vue 中,不能使用"data: {}"方式在其中定义数据,需要采用上述代码的方式在 vue 文件中定义 methods 方法的形式和html中一致,但在其中 this 指向的则是当前组件的实例对象 其中
6. Vue组件的生命周期&生命周期函数
Mr_LiuP的博客
03-07 1351
vue组件生命周期以及生命周期函数详解
Vue组件的生命周期
m0_74343097的博客
01-07 1733
生命周期、生命周期函数
Vue----组件的生命周期
emmmm.....
04-26 3024
1 组件运行的过程 2 监听组件的不同时刻 2.1 组件中全部的生命周期函数 2.2 组件中主要的生命周期函数 2.3 created 2.4 mounted 2.5 unmounted 2.6 updated 3 完整的生命周期图示
Vue父组件监听子组件生命周期
10-14
主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue组件和Route的生命周期实例详解
08-28
主要介绍了Vue组件和Route的生命周期的相关知识,需要的朋友可以参考下
vue中的事件
weixin_43390711的博客
05-16 158
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1098
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 753
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 345
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1037
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
用vue实现json模版编辑器
qq_44428688的博客
05-14 527
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
vue+elementui省市联动选择
atregret的博客
05-17 180
看上面官方文档，最清晰。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 832
基于Vue3 + js-tool-big-box的3个随机数字
四天学会JS高阶（学好vue的关键）——深入面向对象（理论+实战）（第三天）
最新发布
爱游戏爱学习的博客
05-20 414
深入对象 原型对象
vue 使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超一秒时自动切换到对应分区
weixin_45956838的博客
05-17 557
使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超过一秒自动切换到对应分区
vue 组件的生命周期
08-16
Vue组件的生命周期可以分为以下几个阶段： 1. 创建阶段（Creation）： - beforeCreate：在实例初始化之后，数据观测（data observer）和事件配置（event/watcher setup）之前调用。 - created：完成实例的数据...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值