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)


相关推荐

  • 查询数据库用户所有表名_sql语句收回用户权限

    查询数据库用户所有表名_sql语句收回用户权限在企业系统中经常会使用到给用户分配权限的情况,往往在用户信息表和权限表之间还维护了一张角色表,即通过给用户添加角色,角色添加权限的这样一种方式来给用户间接的添加权限。如图示例那么,查询用户权限的多表查询sql语句长什么样呢?select*frompe_role_userruinnerjoinpe_role_modulermonru.role_id=rm.`role_id…

  • spider(二) 爬虫的工作流程

    spider(二) 爬虫的工作流程

  • sql中的declare_如何声明变量

    sql中的declare_如何声明变量在sql语句中添加变量。declare @local_variabledata_type声明时需要指定变量的类型,可以使用set和select对变量进行赋值,在sql语句中就可以使用@local_variable来调用变量 声明中可以提供值,否则声明之后所有变量将初始化为NULL。 例如:declare@idint

  • 微信定位精灵服务器或网络异常,为什么微信定位精灵定位不了怎么办?

    微信定位精灵服务器或网络异常,为什么微信定位精灵定位不了怎么办?方法如下:1、下载“微信定位精灵”软件,安装;2、按图示设置如下,然后缩小地图,把光标定位在大马或任意地方,点击左上角的圆形定位按键完成定位,点右上角的菜单栏,选择“启动微信”,接下来的正常操作就行了。3、打开手机网络,关掉手机的网络定位,GPS等等。打开精灵,看见地图中间有个十字架,那就是你将要定位的地方,比如你的朋友身边。5.点击左上角的定位按钮。一秒你就穿越了。6、打开右边的启动微信。找身边…

  • 任意角和弧度制[通俗易懂]

    任意角和弧度制[通俗易懂]1importmath23PI=math.pi45defshow():6print(7'小主,(* ̄︶ ̄),请选择你需要的功能:\n'8'\t\0

  • kl1083_显示器dpi是什么意思

    kl1083_显示器dpi是什么意思Windy 定义了一种 Windy 数:不含前导零且相邻两个数字之差至少为 2 的正整数被称为 Windy 数。Windy 想知道,在 A 和 B 之间,包括 A 和 B,总共有多少个 Windy 数?输入格式共一行,包含两个整数 A 和 B。输出格式输出一个整数,表示答案。数据范围1≤A≤B≤2×109输入样例1:1 10输出样例1:9输入样例2:25 50输出样例2:20#include<bits/stdc++.h>using namespace std;

发表回复

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

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