Vue组件化第一天

于 2020-07-14 20:02:25 发布
阅读量167 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44616545/article/details/107342543
版权

Vue组件化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<my-cpn> </my-cpn>

</div>
</body>

<script src="../js/vue.js"></script>

<!--注册组件-->
<script>
  <!--创建组件构造器-->
  const cpnC = Vue.extend({
    template:`
    <div>
    <h2>我是标题</h2>
    <p>我是内容 哈哈哈哈</p>
    <p>我是内容 呵呵呵呵</p>
    </div>
    `
  })

  // 2 注册组件
  Vue.component('my-cpn', cpnC);

  const app = new Vue({
    el:'#app'
  })
</script>



</html>

在这里插入图片描述

全局组件以及局部组件

此时为全局组件，我们在别的实例中也可以使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn> </my-cpn>

</div>
<div id = 'app2'>
  <my-cpn></my-cpn>
</div>
</body>

<script src="../js/vue.js"></script>

<!--注册组件-->
<script>
  <!--创建组件构造器-->
  const cpnC = Vue.extend({
    template:`
    <div>
    <h2>我是标题</h2>
    <p>我是内容 哈哈哈哈</p>
    <p>我是内容 呵呵呵呵</p>
    </div>
    `
  })

  // 2 注册组件 此时的组件时全局的。
  Vue.component('my-cpn', cpnC);

  const app = new Vue({
    el:'#app'
  })

  const app2 = new Vue({
    el:'#app2'
  })
</script>



</html>

此时的效果图
在这里插入图片描述

因为有两个实例 'app ’ 与 'app2‘ 我们的组件是全局的，那么就都可以使用

局部组件，我们只要把组件写入到实例中即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>

</div>
<div id = 'app2'>
  <cpn></cpn>
</div>
</body>

<script src="../js/vue.js"></script>

<!--注册组件-->
<script>
  <!--创建组件构造器-->
  const cpnC = Vue.extend({
    template:`
    <div>
    <h2>我是标题</h2>
    <p>我是内容 哈哈哈哈</p>
    <p>我是内容 呵呵呵呵</p>
    </div>
    `
  });

  // 2 注册组件 此时的组件时全局的。
  // Vue.component('cpn', cpnC);

  const app = new Vue({
    el:'#app',
    components:{
      cpn : cpnC
    }
  })

  const app2 = new Vue({
    el:'#app2'
  })
</script>



</html>

只在第一个实例中有，第二个实例中没有，所以第二个不显示
在这里插入图片描述

是楷不是凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
十四天学会Vue-Vue 组件化编程（理论+实战）（第四天）
06-01
在“十四天学会Vue-Vue组件化编程”的学习过程中，第四天的主题可能是深入理解和实践单文件组件（Single File Component，简称SFC）。今天我们将详细探讨这一重要知识点。 1. **Vue组件基础** Vue组件是可重用的...
Vue.js第四天学习笔记（组件）
10-20
在深入探讨Vue.js组件的高级应用之前，有...组件化开发不仅可以提高代码的复用性，还能使项目结构更加清晰，有助于团队协作开发。通过掌握这些基本的组件知识，开发者可以更好地构建出复杂且可维护的Vue.js应用程序。
27课 Vue项目第一天.rar
09-13
在"27课 Vue项目第一天"的学习中，我们将逐步了解并掌握Vue的基础知识和实践技巧，开启Vue项目开发之旅。 首先，Vue的核心概念是虚拟DOM（Virtual DOM），它允许我们高效地更新UI而无需频繁操作真实的DOM，提高了...
Vue第7天-todos.zip
07-29
首先，Vue的核心概念包括组件化、指令、计算属性和侦听器等。组件是Vue中可复用的代码块，可以看作是独立的UI部分，如按钮、表单或整个页面布局。在Todos应用中，我们可能会创建一个“TodoItem”组件，用于显示和...
Vue基础学习第四天（基础结束）
06-20
3. Vue组件化开发：掌握如何创建和复用组件，理解组件的props、事件和生命周期。 4. 本地存储API的使用：熟悉IndexedDB的数据库操作，以及localStorage和sessionStorage的基本用法。 5. 使用Vue插件：了解如何安装...
基于微信小程序的付费自习室管理系统.zip
08-19
基于微信小程序的付费自习室管理系统.zip
weixin045基于微信小程序的网上商城+ssm--pf.zip
08-19
网上商城从功能、数据流程、可行性、运行环境进行需求分析。对网上商城的数据库、功能进行了详细设计，分析了主要界面设计和相关组件设计，网上商城的具体实现进行了介绍。从数据库中获取数据、向数据库中写入数据，实现系统直接对数据库进行各种数据库查询、插入、删除、更新等操作，在网页中加入动态内容，从而实现网上商城所需要的各种基本功能。
BMC_RD450X_MLK_Baidu_V3.24.1145_SVT
08-19
BMC_RD450X_MLK_Baidu_V3.24.1145_SVT
maya小脚本参考.zip
08-19
maya脚本
AIOTEC是视频分析与物联网的融合系统！系统支持对监控视频的实时分析（图像识别功能，自动检测视频中的危险源及动作），系统支持物
最新发布
08-19
AIOTEC是视频分析与物联网的融合系统！系统支持对监控视频的实时分析（图像识别功能，自动检测视频中的危险源及动作），系统支持物联网产品的接入如消防产品、安防产品、能源产品等。 软件架构 x86-x64, ARM(正在研发中) 安装教程 请先检查是否为Linux系统，Python版本，Docker版本 将代码克隆至本地并转移至Linux服务器或虚拟机； 新建/mnt/work/python文件夹，并将所有代码转移至此； 安装所需Python第三方库【pip3 install -r requirements.txt】 进入gatewaybox/video_analysis/wisdiot_ai_1.0.1，执行【docker build -t wisdiot_ai_1.0.1 .】 （创建镜像请耐心等待，一般耗时10~20分钟）； 执行【./shell.sh start】，启动程序； 本地访问192.168.xxx.xxx(服务器IP),输入账号密码进入系统； 首次运行程序请先系统设置，将许可信息复制，进入极智科技官网，申请下载许可证书，并上传至边缘计算系统； 使用视频分析模块时，
二分模拟赛赛后补题报告
08-19
二分模拟赛赛后补题报告
使命召唤游戏助手的设计与实现_pzbe0--.zip
08-19
近年来，随着互联网的蓬勃发展，游戏公司对信息的管理提出了更高的要求。传统的管理方式已无法满足现代人们的需求。为了迎合时代需求，优化管理效率，各种各样的管理系统应运而生，随着各行业的不断发展，使命召唤游戏助手建设也逐渐进入了信息化的进程。 这个系统的设计主要包括系统页面的设计和方便用户互动的后端数据库，而前端软件的开发则需要良好的数据处理能力、友好的界面和易用的功能。 数据要被工作人员通过界面操作传输至数据库中。通过研究，以MySQL为后端数据库，以JAVA为前端技术，以IDEA为开发平台，采用SPRING BOOT架构，建立一个提供系统首页，个人中心，玩家管理，游戏分类管理，道具种类管理，游戏道具管理，战绩信息管理，水平评估管理，系统管理等必要功能的、稳定的使命召唤游戏助手系统。
weixin208基于微信小程序的二手物品交易平台ssm--pf.zip
08-19
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对社区二手物品交易信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用基于web的二手物品交易平台可以有效管理，使信息管理能够更加科学和规范。 基于web的二手物品交易平台使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务。 总之，基于web的二手物品交易平台集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
“人力资源+大数据+薪酬报告+涨薪调薪”
08-19
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
传统壁画在中国画教学中的实践与研究——以江西师范大学美术学院国画系2017级本科教学为例.docx
08-19
传统壁画在中国画教学中的实践与研究——以江西师范大学美术学院国画系2017级本科教学为例.docx
全开源iApp后台带PHP文件源码
08-19
全开源iApp后台带PHP文件源码，这东西怎么用我也不清楚，有懂的拿去研究吧。
计算机毕业设计企业it资产管理系统hsgB论文
08-19
计算机毕业设计企业it资产管理系统hsgB论文
毕业设计，基于SpringBoot+Vue+MySQL开发的兼职网，源码+论文答辩+毕业论文+视频演示
08-19
毕业设计，基于SpringBoot+Vue+MySQL开发的兼职网，源码+论文答辩+毕业论文+视频演示 随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，蜗牛兼职网当然也不能排除在外。蜗牛兼职网是以实际运用为开发背景，运用软件工程原理和开发方法，采用springboot框架构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等；详细设计主要包括系统数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对系统进行功能测试，并对测试结果进行分析总结，得出系统中存在的不足及需要改进的地方，为以后的系统维护提供了方便，同时也为今后开发类似系统提供了借鉴和帮助。这种个性化的网上蜗牛兼职网特别注重交互协调与管理的相互配合，激发了管理人员的创造性与主动性，对蜗牛兼职网而言非常有利。 本蜗牛兼职网采用的数据库是MySQL，使用springboot框架开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 功能要求：可以管理首页、个人中心、用户管理、企业管理、兼职信息管理、职位申请管理、留言板管理、系统管理等功能模块。 关键词：蜗牛兼职网，springboot框架 MySQL数据库 Java技术
2024bupt大创遥感语义分割.rar
08-19
2024bupt大创遥感语义分割.rar
三十天精通vue 3 第一天
08-12
第一天开始学习Vue 3，首先要了解Vue的基本概念和核心功能。Vue是一个用于构建用户界面的渐进式JavaScript框架，它采用组件化的方式来开发应用程序。 在Vue 3中，有一些重要的变化和改进。首先，Vue 3引入了Composition API，这是一个全新的API，可以让我们更好地组织和共享组件逻辑。通过Composition API，我们可以使用函数来编写组件的逻辑，而不仅仅是通过选项对象。 另一个重要的改进是性能的提升。Vue 3在内部进行了许多优化，例如使用Proxy替换了原来的Object.defineProperty来实现响应式系统。这使得Vue 3在处理大型数据集和性能敏感应用程序时更高效。 还有一项重大的变化是对TypeScript的更好支持。Vue 3引入了许多类型声明文件，使得在使用TypeScript时更容易推断和检测组件的类型。 在第一天，我们可以开始学习Vue 3的安装和使用。我们可以通过npm或yarn来安装Vue，然后使用Vue的命令行工具创建一个新的Vue项目。 接下来，我们可以学习Vue的基本语法和核心概念，例如如何定义一个组件、使用指令和插值表达式、处理事件等。 最后，我们可以尝试编写一个简单的Vue应用程序，并将其运行起来。通过实践，我们可以更加深入地理解Vue的使用和原理。 第一天是学习Vue 3的基础，为接下来的学习打下坚实的基础。希望通过努力学习，在接下来的30天内可以精通Vue 3的使用和开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值