vue 基础教程（五） 虚拟dom_diff 定义组件 父组件和子组件

最新推荐文章于 2024-05-12 15:44:14 发布
最新推荐文章于 2024-05-12 15:44:14 发布
阅读量183 收藏
点赞数
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43815680/article/details/109043484
版权
本文是Vue基础教程的第五部分，主要讲解虚拟DOM的区别与更新算法，详细阐述了如何定义组件，以及组件间的通信，包括父传子和子传父的实践案例，帮助读者深入理解Vue的组件化思想。
摘要由CSDN通过智能技术生成

1 虚拟dom_diff

在这里插入图片描述

2 定义组件

1）

2）
先写一个最简单的全局组件
需要注意 几件事情

1、 注意写的顺序  必须是Vue.component 定义在前面 new Vue（{}）定义在后面
2、如果全局组件定义的是 navbar  上面也必须用这个  不过渲染后变成了 div  
3、全局组件中 使用方法 直接写在 和template 同级别就好  不能写在 new   Vue中

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<body>
    <div id="box">
        <navbar></navbar>
    </div>

</body>
<script>
    Vue.component('navbar', {
            template: `
        <div>
        <button @click="getClick()">返回</button>
        navbar
        <button>主页</button>
        </div>
       `,
            methods: {
                getClick() {
                    console.log('back');
                }
            }
        }),


        new Vue({
            el: "#box"
        })
</script>

</html>

3）局部组件
有几个需要注意的事情

1、 new Vue({}) 它在定义的时候 同时生成一个 根组件  root
 2、它里面定义的局部 组件 components:{} 只能在它内部使用 
 3、全局定义组件 Vue.component:{}   可以在任何地方使用

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<body>
    <div id="box">
        <navbar></navbar>
        <navchild></navchild>
    </div>

</body>
<script>
    Vue.component('navbar', {
            template: `
        <div>
        <button @click="getClick()">返回</button>
        navbar
        <button>主页</button>
         
        </div>
        
       `,
            methods: {
                getClick() {
                    console.log('back');
                }
            }
        }),


        new Vue({
            el: "#box",
            components: {
                navchild: {
                    template: `<div>navchild</div>`,
                }
            }
        })
</script>

</html>

4）组件和实例区别
在这里插入图片描述
5）父传子
属性向下传递
有几个事情需要先说明一下

1、new  Vue({}) 创建 会产生一个根节点 是所有节点的父节点
2、 父节点的数据和属性可以传给子节点
3、一个节点如果在另一个组件内使用 就作为它的子节点
4、跟节点传递数据 需要利用 v-bind 绑定 

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<body>
    <div id="box">
        <navbar myname="home"></navbar>
        <navbar myname="list"></navbar>
        <navbar :myname="parent"></navbar>
    </div>

</body>
<script>
    Vue.component("navbar", {
            template: `
        <div>
    <button>返回</button>
    navbar--{{myname}}
    <button>首页</button>
        </div>`,
            props: ["myname"],
        }

    )

    new Vue({
        el: "#box",
        data: {
            "parent": '根组件的状态',
        }
    })
</script>

</html>

需要注意另外一个问题，如果 加上另外一个控制是否显示一些东西的情况
在这里插入图片描述
加一点 属性验证
在这里插入图片描述

6） 子传父
事件向上传递

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<body>
    <div id="box">
        <child @myevent="handleEvent"></child>
    </div>

</body>
<script>
    // 子组件 
    Vue.component('child', {
        template: `<div>  
        child组件
    <button @click="payMoney"> click</button>
        </div>`,
        methods: {
            payMoney(ev) {
                this.$emit('myevent', 1000) //分发事件给父组件
            }
        }
    })

    new Vue({
        el: "#box",
        methods: {
            handleEvent(ev) {
                console.log("父组件收到钱了", ev)
            }
        }
    })
</script>

</html>

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

7） 子传父 找个案例 加深理解

点击子组件内的按钮可以实现 显示和隐藏
怎么做 ？
1)
这个实现非常的简单 但是如果现在的操作按钮在子组件里面呢 ？

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<body>
    <!-- 父组件 -->
    <div id="box">
        <button @click="isShow=!isShow">click</button>
        <sidebar v-show="isShow"></sidebar>
    </div>

</body>
<script>
    Vue.component('sidebar', {
        template: ` <div style="background:yellow;width:200px">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>`


    })

    new Vue({
        el: "#box",
        data: {
            isShow: false,
        }
    })
</script>

</html>

2）
如果当前的操作按钮在子组件中，我们应该怎么处理这个事情 ？
有另外 一个按钮开始定义在 另一个子组件 navbar中

<html>

<head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 父组件 -->
    <div id="box">
        <navbar @event="handleEvent"></navbar>
        <!-- <button @click="isShow=!isShow">click</button> -->
        <sidebar v-show="isShow"></sidebar>
    </div>

</body>
<script>
    // 另外一个子组件 navbar
    Vue.component('navbar', {
        template: `
    <div>
        navbar
        <button @click="handleClick">click</button>
    </div>
        `,
        methods: {
        // 子组件点击之后 将事件 event(随便写的)上抛给父组件 父组件处理 
            handleClick() {
                this.$emit('event')
            }
        }
    })

    // 一个子组件   sidebar
    Vue.component('sidebar', {
        template: ` <div style="background:yellow;width:200px">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>`
    })

    // 这个是父组件  含有一个根组件 
    new Vue({
        el: "#box",
        data: {
            isShow: false,
        },
        methods: {
            handleEvent() {
                this.isShow = !this.isShow
            }
        }
    })
</script>

</html>
小白追梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue概述
qq_21428081的博客
03-25 946
一、Vue简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue 不支持 IE8 及以下版本，因为...
vue 概述
weixin_56263402的博客
08-02 849
vue 概述
vue基本概况
weixin_46759666的博客
07-11 121
v-if v-show <body> <div id="app"> {{title}} <div v-if="isAlt">zhengque</div> <div v-else>另一种选择</div> <span v-show="ishow">oeifj </span> <h3 v-if="tab==1">shouye</h3> <h3 v-i
Vue的diff算法
最新发布
ZTBztb123456的博客
05-12 288
当 Vue 在列表中渲染多个相同的节点时，它需要使用一种策略来确定哪些节点是“稳定”的，哪些节点是新的或已删除的。这意味着如果你改变了一个节点的位置（例如，将一个节点从一个父节点移动到另一个父节点），Vue 会销毁该节点并在新的位置重新创建它，而不是简单地“移动”它。对于元素节点，Vue 会比较其属性和子节点，以确定是否需要进一步的 diff 操作。Vue.js 的 diff 算法是其性能优化的关键部分，它用于比较新旧虚拟 DOM 树并计算出最小的变更集，以便将这些变更应用到真实的 DOM 上。
Vue笔记 (二) Vue的插值操作和简单V指令
weixin_43026567的博客
03-20 165
插值操作Mustache 可以通过Mustache语法(也就是双大括号),将data中的文本数据插入到HTML中： <div class="div"> <!-- 插到标签中 --> <h2>Hello {{name}}</h2> <!-- 使用了两个Mustache--> <h2>{{firstName}} {...
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
vue里面父组件修改子组件样式的方法
08-28
Vue 中父组件修改子组件样式的方法 在 Vue 开发中，经常会遇到父组件修改子组件样式的问题。由于 scoped 属性的存在，父组件的样式无法渗透到子组件中。那么，如何让父组件修改子组件的样式呢？下面将分享三种方法...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
vue 子组件和父组件传值的示例
10-14
本篇文章将深入探讨Vue子组件与父组件之间的数据传递，帮助开发者更好地理解和运用这一核心特性。 ### 一、子组件向父组件传值 #### 1. 子组件中 在子组件中，我们通常使用`$emit`事件触发器来向父组件发送事件，...
vue 父组件调用子组件方法及事件
08-27
Vue 父组件调用子组件方法及事件 在 Vue 中，父组件调用子组件方法及事件是非常常见的需求，特别是在复杂的组件树中。今天，我们将详细介绍如何实现父组件调用子组件方法及事件。 父组件调用子组件方法 在上面的...
js diff组件
11-26
一个通用的js diff组件,使用起来非常方便，有兴趣的同学可以下载研究一下
react-diff-view:git diff组件
04-28
React差异视图 一个git diff组件，用于消耗git统一diff输出。 概述 拆分视图 统一检视 优化选择 功能齐全 一个干净而小巧的核心，可以显示差异。 支持拆分（并排）视图和统一（一列）视图。 可容忍的性能。 灵活的装饰组件，用于围绕更改块呈现自定义内容。 可扩展的小部件体系结构，以支持代码注释和各种要求。 可自定义的事件和样式。 强大的令牌系统可实现代码突出显示，标记特殊单词，内嵌diff等，并支持Web worker。 如果提供了源文本，则可以使用一堆实用程序函数来比较diff结构。 运行npm start可以享受具有diff显示，折叠的代码扩展，代码注释和较大的diff延迟加载的全功能演示。 我测试了2.2MB差异文件的性能，其中更改了375个文件，插入了18721个插入（+），删除了35671个（-） 。 在我的笔记本电脑（MacBook Pro 1
二. Vue-插值表达式与指令
weixin_45701449的博客
07-02 290
插值表达式与指令 插值表达式: {{ Mustache }} 插值 如：{{msg}} 指令: 1.什么是指令： 什么是自定义属性： 在html5中引入的规范化自定义属性，如abc：123，而标准属性则如color：red 指令的本质就是自定义属性 指令的格式：以v-开始（如v-cloak），由开发者进行设定的 2.v-cloak指令用法： 插值表达式存在的问题：“闪动”： 当浏览器因为频繁刷新等原因造成卡顿时，差值表达式会存在显示花括号之后再迅速显示值的内容 如何解决该问题： 解
Vue的概述
XLGKXSH的博客
08-11 766
Vue的概述 什么是Vue？ Vue的开发者是尤雨溪，是受到angular的启发，是一个实现UI层的渐进式的js框架。 Vue用到哪里？ Vue.js可以用在很多地方，从简单的表单验证到复杂的大型企业应用程序，vue都可以胜任，核心库是实现UI层的。 为什么用Vue？ （1）有非常好的中文文档 （2）学习曲线比较缓和（易上手） （3）速度快 （4）体积小 （5）基于组件化的开发方式（web com...
Vue基本概述
ProChick's Blog
11-04 1464
1.钩子函数 钩子函数用来描述Vue实例从创建到销毁的整个生命周期 beforeCreate:function(){ #在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 }, created:function(){ #在实例创建完成后被立即调用，然而，挂载阶段还没开始，$el property 目前尚不可用。 }, beforeMount:function(){ #在挂载开始之前被调用：相关的 render 函数首次被调用。 }, m
VUE简介
TDtuohai的博客
09-26 2628
总结起来理解，vue是一个框架，提供了一套完整的解决方案，同时这个框架是渐进式的，你不必使用整个框架的所有内容，可以根据自身的应用场景只使用一部分。框架：字面上理解为架子，会基于自身的特点为用户提供一整套的解决方案，倾向于创造一套需要你来遵守的规则和范例，你可以基于这套架子快速实现应用，但前提是你必须按照它的规则来写，例如：ThinkPHP框架，必须要求你按照它的命名规则、代码组织结构来写。是的实例属性，除此之外之外，还有一些其他的属性和方法，它们都是以符号开头的，用来和用户自定义的属性区分开。
Vue 概况以及核心
weixin_45841394的博客
01-21 162
2013年底作为尤雨溪个人实验项目开始开发 2014年2月 公开发布 截至目前所经历的版本vue0.11、 vue1.0、vue2.0（2016年10月） vue本身并不是框架而是结合周边生态构成一个灵活的、渐进式的框架（主张最少—是轻量级视图，做了自己该做的事，没有做不该做的事情。他对项目的参与性小，在项目中还可以使用其他类库） React 2010年01月出来的，作者：Misko He...
vue的diff
yuey0809的博客
03-11 800
diff时机 当组件创建时,以及依赖的属性或数据变化时,会运行一个函数,该函数会做两件事 运行_render生成一颗心的虚拟dom树(vnode tree) 运行_update,传入虚拟dom树的根节点,对比新旧两棵树,最终完成真实dom的渲染 //核心代码 var updateComponent = ()=> { this._update(this._redner()) } new Watcher(updateComponent) _update函数 _update函数接收到一个vnode参
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值