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)


相关推荐

  • 学习 SQL计算机语言(基础)

    学习 SQL计算机语言(基础)简介:SQL是用于访问和处理数据库的标准的计算机语言。结构化查询语言(StructuredQueryLanguage)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询、更新和管理关系数据库系统;同时也是数据库脚本文件的扩展名。什么是SQL:1)指结构化查询语言2)使我们有能力访问数据库3)是一种ANSI的标准计算机语言作用:1)面向数…

  • iBATIS_ibatis

    iBATIS_ibatis1、ibatis中isNotEmpty的作用   &lt;selectid="getCityListByProvinceId"parameterClass="simpleMap"resultClass="dictModel"&gt;  &lt;![CDATA[   selectxiddictCode,xnamedictNamefromcity  ]]&gt;    &l…

  • pycharm最新2021年激活码_通用破解码

    pycharm最新2021年激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 二代身份证读卡插件安装包(完整亲测可用).zip

    二代身份证读卡插件安装包(完整亲测可用).zip最新二代身份证读卡插件安装包

  • Canavs arcTo方法的理解

    Canavs arcTo方法的理解

    2021年11月13日
  • 怎么给idea配置jdk_ideaj配置tomcat

    怎么给idea配置jdk_ideaj配置tomcat这里写自定义目录标题如何给Idea配置Tomcat安装Tomcat过程中出现的问题:怎么给idea配置idea如何给Idea配置Tomcat思路:首先下载好Tomcat安装包,然后安装好Tomcat,Tomcat安装成功后,再打开idea进行tomcat的配置。一、怎么安装Tomcat1.首先去官网(镜像网站)下载idea对应版本的tomcat2.下载完成tomcat后,放到你自己选择的文件位置。比如说我这里就是放在了D:\ProgramFiles\Java文件夹下面3.然后给Tomcat配

发表回复

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

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