vue组件化的理解_vue的组件化是如何实现的

vue组件化的理解_vue的组件化是如何实现的前言有时候有一组html结构的代码,并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了,如果都是拷贝来拷贝去,很多代码都是重复的,包括事件部分的代码都是重复的。那么这时候我们就可以

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

有时候有一组html结构的代码,并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了,如果都是拷贝来拷贝去,很多代码都是重复的,包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件,以后在使用的时候就跟使用普通的html元素一样,拿过来用就可以了。
 

基本使用

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
<script>
  // 定义一个名为 button-counter 的新组件
  Vue.component('ButtonCounter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button @click="count++">点击了{{ count }}次</button>'
  })
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

以上我们创建了一个叫做button-counter的组件,这个组件实现了能够记录点击了多少次按钮的功能。后期如果我们想要使用,就直接通过button-counter使用就可以了。然后因为组件是可复用的Vue实例,所以它们与new Vue接收相同的选项,例如datacomputedwatchmethods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。另外需要注意的是:组件中的data必须为一个函数!

我们来看下实现的效果
vue组件化的理解_vue的组件化是如何实现的
我们上面使用了3次button-counter组件,所以页面会显示3个,并且每个组件都会各自独立维护它的 count,因为你每用一次组件,就会有一个它的新实例被创建。每个实例可以维护一份被返回对象的独立的拷贝,这就是我们data中使用函数的原因

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166101.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python初级:基础知识学习-循环、列表、元组、集合、字典

    python初级:基础知识学习-循环、列表、元组、集合、字典

  • 对三点估算法的理解

    对三点估算法的理解三点估算也称PERT法,在计算每项活动的工期时都要考虑三种可能性,计算最悲观的工期、最可能的工期、最乐观的工期,然后再计算出该活动的期望工期,PERT法计算的是期望工期.用PERT法计算工期,我们必须记住下面三个公式(P代表最悲观工期;M代表最可能工期;O代表最乐观工期)PERT公式标准差公式:(a+4m+b)/6方差公式:(b-a)/6用PERT公

    2022年10月26日
  • eclipse怎么导入java文件_Eclipse如何导入JAVA工程?如何将项目导入Eclipse中?

    eclipse怎么导入java文件_Eclipse如何导入JAVA工程?如何将项目导入Eclipse中?Eclipse如何导入JAVA工程?很多用户在学习Eclipse的过程中都会不小心把项目给删除了,到这里,笔者要先说一下“没关系,先不要慌张”,如果你把项目删除了,是可以通过导入的方法找回来的。具体方法见下文。Eclipse如何导入JAVA工程?1、在电脑桌面找到Eclipse快捷方式。2、双击打开Eclipse,在弹出的“WorkspsceLauncher”对话框中,点击后面的“Browse”…

  • 3极管npn和pnp_npn开关电路工作原理

    3极管npn和pnp_npn开关电路工作原理===================================================================三极管,全称应为半导体三极管,也称双极型晶体管、晶体三极管,是一种电流控制电流的半导体器件·其作用是把微弱信号放大成幅度值较大的电信号,也用作无触点开关。晶体三极管,是半导体基本元器件之一,具有电流放大作用,是电子电路的核心元件。三极管是在一块半导体基片上制作…

  • zabbix监控jmx

    zabbix监控jmx背景:目前公司用的主要语言就是java,然后在运维过程中会遇到频繁的内存溢出的情况,之前使用过elk日志分析系统可以实时的判断出内存溢出的情况,但是无法查看内存的使用情况,只能通过dump文件查看内存溢出的时候dump下来的文件去分析。这样也无法准确的判断出问题。zabbix可以监控java,并且将内存的使用情况实时的展现出来,这是一个不错的选择。JMX的全称是JavaManagement…

  • webstorm好用的插件_谷歌浏览器插件推荐

    webstorm好用的插件_谷歌浏览器插件推荐安装插件codeglance可以实现VSCode的右侧小地图

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号