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

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

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

(0)


相关推荐

  • 海思hi3798mv300和310的区别_海思3516

    海思hi3798mv300和310的区别_海思3516在网上搜寻海思HI3519或者hi3516实时识别除了官方给的SDK中有Rfcn的实时识别例子之外,其它都是读图片例子。官方例子中给了如下网络参考:Rfcn、Segnet、FasterRcnn、Cnn、Ssd、Yolov1、Yolov2、Yolov3、Lstm、Pvanet在SDK中文件夹路径为/rp-hi3516dv300-busybox/smp/a7_linux/mpp/sample/svp/nnie其中有一个sample_nnie_main.c文件,官方例子如下:/************

  • 空格的正则表达式

    空格的正则表达式在正则表达式想使用空格的时候不能采用\s的方法,因为\s指的是空白,就是所有空白。如果想表示单纯的空格的话可以采用:[]方括号本身就是匹配其中的字符,那么其中放空格就是匹配空格;如果有其他正则表达式问题可以查看:https://blog.csdn.net/cao849861802/article/details/102505834…

  • wordpress博客近期变慢之解决(fonts.google.com)「建议收藏」

    wordpress博客近期变慢之解决(fonts.google.com)

  • 情感的强度分类_情感量表

    情感的强度分类_情感量表一、SO-HowNet   情感倾向强度值计算公式为:其中,Pwords代表正面情感种子词语集合,Nwords代表负面种子词语集合。word1和word2相似度就是各概念之间相似度的最大值。计算两个义原相似度公式如下:其中,p1,p2为两个需要计算比较的义原,Depth(p)是义原层次体系中的深度,Spd

  • BT渗透「建议收藏」

    BT渗透「建议收藏」PHP交流群:294088839,Python交流群:652376983 whois域名/ip查看域名的详细信息。ping域名/ip测试本机到远端主机是否联通。dig域名/ip查看域名解析的详细信息。host-l域名dns服务器传输zone。扫描nmap:-sS半开扫描TCP和SYN扫描。-sT完全TCP连接扫描。-sUUDP扫描-PSs…

  • Cover Letter常用范式和模版

    Cover Letter常用范式和模版摘自:https://zhuanlan.zhihu.com/p/26708261;http://muchong.com/html/201401/6920446.html1.什么是Coverletter?CoverLetter,即投稿信,是论文投递时与论文一起发送给编辑的信件,其目的是让编辑在阅读你的论文之前,简单了解你文章的基本情况。Coverletter是编辑对论文的第一印象,也是初步评判你论文是否可以被期刊接收的重要依据(如果编辑看完Coverletter之后一点兴趣也没有,就没有下文了

发表回复

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

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