Vue2 第十二节 Vue组件化编程 (二)

news2024/12/28 20:38:14

1. VueComponent

2. 单文件组件

一. VueComponent

  • 组件本质上是一个名为VueComponent的构造函数,不是程序员定义的,是Vue.extend生成的
  • 只需要写<school/>或者<school><school/>,Vue解析时,会帮我们创建school组件的实例对象,Vue会帮我们执行new VueComponent(options)
  • 注意:每次调用Vue.extend,返回的都是一个全新的VueComponent
  • this指向

    (1)组件配置中,data函数,methods的函数,watch中的函数,computed的函数,它们的this均是 VueComponent实例对象

   (2)new Vue(options) 配置中,data函数,methods的函数,watch中的函数,computed的函数,它们的this均是Vue实例对象

二. 单文件组件

(1)以.vue为后缀

(2)安装插件

(3).vue文件中的标签 

(4)写完之后需要把组件暴露出去

  • 分别暴露 

  • 统一暴露

  • 默认暴露

 默认暴露简写:

 (5)<V 快捷生成Vue结构

 (6)各个文件代码详情

   School.vue

<template>
  <!-- 组件的结构 -->
  <div class="demo">
    <h2>学校名称:{{ schoolName }}</h2>
    <h2>学校地址: {{ address }}</h2>
    <button @click="showX">点我输出x</button>
  </div>
</template>
<script>
// 组件交互相关的代码
// 4.最好的写法
export default {
  name: 'School',  // 最好和文件名保持一致
  data () {
    return {
      schoolName: '尚硅谷',
      address: '北京昌平'
    }
  },
  methods: {
    showX () {
      console.log(this.x)
    }
  }
}
</script>
/* 组件的样式 */
<style>
.demo {
  background-color: orange;
}
</style>

Student.vue

<template>
<!-- 组件的结构 -->
    <div>
        <h2>学生姓名:{{name}}</h2>
        <h2>学生年龄: {{age}}</h2>
    </div>
</template>
<script>
// 组件交互相关的代码
    export default {
        name:'Student',  // 最好和文件名保持一致
        data() {
            return {
                name:'张三',
                age:18
            }
        }
    }
</script>

App.vue:管理School和Student组件

 main.js 管理App组件

 index.html:引入main.js, 并且准备一个容器

 (7)实现过程总结

   ① 引入组件

   ② 映射成标签

   ③ 使用组件标签

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/820644.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ThinkPHP 6 添加跳转提示扩展 liliuwei/thinkphp-jump

liliuwei/thinkphp-jump 是 TP5 中经典跳转提示&#xff0c;在 TP6 中已经取消&#xff0c;通过 composer 下载该扩展可以在 TP6 中使用 TP5 的跳转提示操作。 安装扩展 在应用根目录执行: composer require liliuwei/thinkphp-jump引入扩展 在全局配置目录生成 jump.php 文件…

Activity的生存期

以下内容摘自郭霖《第一行代码》第三版 Activity的生存期 Activity类中定义了7个回调方法&#xff0c;覆盖了Activity生命周期的每一个环节&#xff1a; onCreate()。这个方法你已经看到过很多次了&#xff0c;我们在每个Activity中都重写了这个方法&#xff0c;它会在Activit…

安科瑞电动机保护器产品在污水处理厂的应用-安科瑞黄安南

应用场景 功能 1&#xff09;排污泵经常会出现过载、缺相等问题&#xff0c;导致电机烧坏&#xff1b; 2&#xff09;为电动机提供完善的保护&#xff0c;并具备多种事件记录追忆功能&#xff1b; 3&#xff09;全电参量测量&#xff0c;包括但不限于三相电流、三相电压、有…

11-矩阵(matrix)_方阵_对称阵_单位阵_对角阵

矩阵及其运算 [ a 11 ⋯ a 1 n ⋯ ⋯ ⋯ a m 1 ⋯ a m n ] \begin{bmatrix} a_{11} & \cdots & a_{1n} \\ \cdots & \cdots & \cdots \\ a_{m1} & \cdots & a_{mn} \\ \end{bmatrix} ​a11​⋯am1​​⋯⋯⋯​a1n​⋯amn​​ ​ 矩阵就是二维数组&…

模板(下)

文章目录 非类型模板参数 模板的特化 模板分离编译 一、非类型模板参数 模板参数分为类型形参与非类型形参。 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。 非类型形参&#xff1a;就是用一个常量作为类(函数)模板的…

【笔试强训选择题】Day33.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

记一次 HTTPS 抓包分析和 SNI 的思考

日常听说 HTTPS 是加密协议&#xff0c;那现实中的 HTTPS 流量&#xff0c;是真的完全加密吗&#xff1f; ——答案是&#xff0c;不一定。原因嘛&#xff0c;抓个包就知道了。 我们用 curl 命令触发一下&#xff1a; curl -v https://s-api.37.com.cn/api/xxx * Trying 1…

【雕爷学编程】MicroPython动手做(27)——物联网之掌控板小程序2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

退退退!台风“卡努”或转向!打开华为天气查看台风实时路径

近期台风频繁&#xff0c;刚送走了“杜苏芮”&#xff0c;又或将迎来第六号超强台风“卡努”。面对来势汹汹的台风&#xff0c;通勤和外出变得困难重重。为了有效抵御台风肆虐&#xff0c;大家需要做好应对措施&#xff0c;保障人身安全。 如果处于台风登陆的影响范围内&#…

莱佛士学生作品精彩亮相小马宝莉40周年艺术展

由全球领先玩乐公司孩之宝举办的“小马宝莉40周年艺术展”在上海市黄浦区淮海中路862-864号进行展出。 ▲莱佛士学生作品亮相小马宝莉40周年展 本次展览特别邀请多位国内新生代艺术家以小马宝莉为灵感缪斯开展全新创作实践&#xff0c;通过雕塑、绘画、新媒体艺术等作品讲述…

编程语言:基础知识与思维方式的演进

编程语言的基础知识差异并不大&#xff0c;因为计算机发展源于冯诺伊曼模型&#xff0c;而编程语言只是其工具之一。区别在于使用工具的思维方式。以前&#xff0c;人们让计算机做某件事&#xff0c;C语言需要清楚地描述过程&#xff0c;即面向过程。随着计算能力的提升&#x…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(20)-Fiddler精选插件扩展安装让你的Fiddler开挂到你怀疑人生

1.简介 Fiddler本身的功能其实也已经很强大了&#xff0c;但是Fiddler官方还有很多其他扩展插件功能&#xff0c;可以更好地辅助Fiddler去帮助用户去开发、测试和管理项目上的任务。Fiddler已有的功能已经够我们日常工作中使用了&#xff0c;为了更好的扩展Fiddler&#xff0c…

二阶段web基础与http协议

dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层-----传输层-----网络层-----数据链路层-----物理层 ip地址&#xff0c;每一台主机都有一个唯一的地址标识&#xff08;固定的ip地址&#xff09; 1.区分用户和计算机 2.通信 ip地址的问题在于32位二进制数组成的&…

Linux安装部署并使用Redis(包含Redis Desktop Manager界面化工具)

文章目录 前言一、Redis的简介二、redis的安装与配置&#xff08;Linux环境&#xff09;三、redis的使用&#xff08;Redis Desktop Manager界面化&#xff09;四、基本命令**String基本命令&#xff1a;****hash基本命令&#xff1a;****List基本命令&#xff1a;****set基本命…

探究SAM和眼球追踪技术在自动医学图像分割的应用(2023+GazeSAM: What You See is What You Segment)

摘要&#xff1a; 本研究探讨眼动追踪技术与SAM的潜力&#xff0c;以设计一个协同的人机交互系统&#xff0c;自动化医学图像分割。提出了GazeSAM系统&#xff0c;使放射科医生能够在图像诊断过程中通过简单地查看感兴趣的区域来收集分割掩模。该系统跟踪放射科医生的眼球运动…

Vue3 的ref和reactive的用法和区别

一、是什么&#xff1f; ref和reactive是Vue3中用来实现数据响应式的API&#xff0c;一般情况下&#xff0c;ref定义基本数据类型&#xff0c;reactive定义引用数据类型。 二、基础用法 1. ref ref的参数一般是基本数据类型&#xff0c;也可以是对象类型&#xff1b;如果参…

BugKu CTF(杂项篇MISC)—想要种子吗

BugKu CTF(杂项篇MISC)—想要种子吗 提 示: 描 述:flag{} 题目下载后是一张图片&#xff0c;打开如下。 一、工具 十六进制编辑器010 editor kali系统文件分离工具binwalk或者foremost 维吉尼亚密码 STEGHIDE图片隐写工具 文章所需的软件下载地址 ARCHPR压缩包密码破解…

5分钟快速掌握低代码和无代码工具

一、低代码和无代码平台&#xff0c;堪比编程界的美图秀秀&#xff01; 与传统编程平台相比&#xff0c;低代码和无代码开发平台让开发人员及非技术用户可以更快速地开发应用程序&#xff0c;而成本变得更低。本文将带你一起了解什么是低代码与无代码平台。 低代码和无代码开发…

Spark性能调优之数据序列化

前言 在使用Spark进行数据开发的时候,避不开的一个问题就是性能调优。网上一搜一大堆所谓的调优策略很多作者自己都不知所云,导致读者看了后只会更加困惑。我们在研究一个技术的时候第一手资料永远都请参考官网,官网对性能优化不一定是最全甚至最优,但是可以解决大部分问题…

微信新增的“上锁”功能,上班族狂喜!

近期 微博话题 #微信新增锁定功能# 冲上热搜 引发关注 微信锁&#x1f512; 这个功能对于经常使用微信办公的上班族来说很实用&#xff0c;信息安全得到极大提升&#xff0c;当你搬砖时&#xff0c;在电脑登陆了自己的微信&#xff0c;如果这个时候去拿个外卖&#xff0c;又…