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/165740.html原文链接:https://javaforall.cn

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

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

(0)
blank

相关推荐

  • ios开发真机调试_ios真机调试

    ios开发真机调试_ios真机调试本教程是写给对iOS已经有基本了解且熟悉Xcode的程序猿/媛们-首先Xcode要求7以上,并且运行Xcode,点击左上角菜单Xcode->Preferences。设置好版本点击Accounts,然后点下面的+号,在弹出菜单中点击AddAppleID。如果账号密码正确的话,会显示如下图。Free表示未付费但可免费调试,双击打开笔者的AppID是用iclound邮箱注册

  • C语言统计一个字符串中单词的个数「建议收藏」

    C语言统计一个字符串中单词的个数

  • 金士顿DataTraveler 100G3 16G的U盘量产过程

    金士顿DataTraveler 100G3 16G的U盘量产过程几年前买的金士顿16GU盘由于这几天安装系统做成了启动盘,刚开始还可以正常,谁知道睡了一觉就废了。第一次尝试修复具体表现:1、插上电脑可以识别盘符,但是打不开,提示请插入U盘。2、磁盘管理中

  • 寄存器,移位寄存器的电路原理以及verilog代码实现「建议收藏」

    寄存器,移位寄存器的电路原理以及verilog代码实现「建议收藏」寄存器:用以存放二进制代码的电路,下图为由维特阻塞D触发器组成的4位数码寄存器:逻辑功能分析:1.异步端CR置0时,输出置0;2.同步并行置数:D0~D3为4个输入代码,当CP上升沿到达时,D0

  • 玩转电源设计,8个优选逆变电源参考方案大合辑

    玩转电源设计,8个优选逆变电源参考方案大合辑利用晶闸管电路把直流电转变成交流电,这种对应于整流的逆向过程,定义为逆变。例如:应用晶闸管的电力机车,当下坡时使直流电动机作为发电机制动运行,机车的位能转变成电能,反送到交流电网中去。又如运转着的直流电动机,要使它迅速制动,也可让电动机作发电机运行,把电动机的动能转变为电能,反送到电网中去。1、基于STM32单片机SPWM逆变电源设计功能描述:单片机采用:STM32单片机(型号:STM32F030F4P6)输出:正弦波频率:可调;幅值:可调;SPWM逆变原理:单片机SPWM驱动H桥+后级滤

  • 工业相机与镜头选型方法(含实例)

    工业相机与镜头选型方法(含实例)详细介绍了工业相机的分类、参数、相机选型方法以及镜头的参数、镜头选型方法,并应用在实际案例上。

发表回复

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

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