Vue组件-非单文本组件

news2024/12/25 22:12:06

非单文本组件(用的少)

在vue中,组件是有两种编写格式的,第一种格式叫非单文本组件,第二种格式叫单文本组件

非单文本组件:一个文件中含有多个组件,也叫多文本组件,比如demo.html里面包含js,css…

单文本组件(使用较多):一个文件中只有1个组件,一个文件只有一个组件,是一一对应的,比如demo.vue

注意: 非单文本组件在开发中用的比较少,一般用单文本组件比较多,但是它可以让我们学到很多东西,还是值得学习的

1 编写例子

编写代码,实现一个小例子

看下效果,虽然没有报错,但是总觉得不太好,如果能够给上面的信息单独写一个叫school的组件,给下面的写一个叫student组件,感觉会好很多

下面就通过vue去创建组件

2 创建组件(extend)

在vue中,创建组件的api叫extend(扩展) 注意:没有s,不是extends!

它是一个函数,需要调用,并且调用的时候要传入一个配置对象,在配置对象里面可以配置很多东西。这些东西都是用来控制组件相关内容的,和vm写法几乎一样的

 // 创建组件
const school=Vue.extend({})

这里我直接把vm中的对象属性复制使用,但是报错了

报错提示,这些属性只能在new vue的时候使用

组件定义时不需要指定el配置项,因为最终所以的组件都要被一个vm管理,由vm决定服务于哪个容器

注释掉el,再次查看页面,发现少了一个错误信息,但是还有一个错误,说的是不要把data直接写成一个对象,而是要写成一个函数,函数里面写data想返回的对象

使用组件时,data必须写成函数式!并且要写成普通函数!

这时候查看页面,没有任何报错信息了

对应的,把管理学生的组件也创建出来

这样组件就创建完成了

3 使用组件

创建组件只需要使用extend即可,但是想使用组件需要分为三步

1 创建组件(extend)

第一步已经完成,接下来进行第二步

2 注册组件(components)

因为不同的组件数据在对应的组件里面,那么vm中的data就不需要了

这时候需要用到一个全新的配置项:components

注册组件,里面是一组一组的key,value组合 key就是组件名,在这里面key才是决定性的组件名称,创建组件的时候的名称只是一个中转,如果key和创建时候名称一样,那么可以只写key

组件中需要有自己的元素,所以要配置template模板。最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下)这样可以随意换行,一般需要一个根容器(div)把元素进行包裹

到了这里,才是一个有意义的组件了,有自己的模板和数据项,然后就可以被vm使用了

3 使用组件

使用组件,编写组件标签

查看页面,正常显示,说明组件正常使用了

到这样组件的定义,以及注册,使用就完成了,注意:上面用的是局部注册

4 新增其他属性

如果想在组件模板中新增其他属性,直接在对应的组建中添加即可

比如我想在学校组件中新增一个按钮,点击的时候提示学校名称,像vm一样直接编写即可

5 全局组件

全局组件用的并不多,想对来说局部组件用的更多,但是还是有必要学下

上面注册的组件都是局部的,如果我再创建一个vm里面没有任何组件,使用组件标签

直接报错,没有注册的组件

这时候就要用到全局组件了:component,注意不是components!

  // 注册全局组件
 Vue.component('student',student)

页面正常了

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 第三 步:使用组件,编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>

    <div id="root2">
        <student></student>
    </div>
</body> 

<script type="text/javascript">
    // 第一步:创建school组件
    const school=Vue.extend({
         // 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下)这样可以随意换行
        // 一般需要一个根容器(div)把元素进行包裹
         template:`
            <div>
                <h2>学校名称:{{schoolName}}</h2>
                <h2>学校地址:{{address}}</h2>   
                <button @click='showInfo'>点我告诉你学校名称</button> 
            </div>
        `,
        // 组件定义时不需要指定el配置项,因为最终所以的组件都要被一个vm管理,由vm决定服务于哪个容器
       // el:'#root',
       // 使用组件时,data必须写成函数式!并且要写成普通函数!
        data(){
            return{
                schoolName:'清华大学',
                address:'北京'
            }
        },
        methods: {
            showInfo(){
                alert(this.schoolName)
            }
        },
    })
    // 第一步:创建student组件
    const student=Vue.extend({
         // 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下)这样可以随意换行
         // 一般需要一个根容器(div)把元素进行包裹
         template:`
            <div>
                <h2>学生姓名:{{studentName}}</h2>
                <h2>学生年龄:{{age}}</h2>
            </div>
        `,
        // 组件定义时不需要指定el配置项,因为最终所以的组件都要被一个vm管理,由vm决定服务于哪个容器
       // el:'#root',
       // 使用组件时,data必须写成函数式!并且要写成普通函数!
        data(){
            return{
                studentName:'张三',
                 age:'18'
            }
        },
    })

    // 注册全局组件
    Vue.component('student',student)
    // 创建vm
     const vm=  new Vue({
        el:'#root',
       
        //第二步:注册组件(局部注册),里面是一组一组的key,value组合 key就是组件名,在这里面key才是决定性的组件名称
        // 创建组件的时候的名称只是一个中转,如果key和创建时候名称一样,那么可以只写key
        components:{
            school,
            student
        }
        
    })

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

</html>

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

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

相关文章

PCL学习一:点云与PCL基础

参考引用 黑马机器人 | PCL-3D点云PCL(Point Cloud Library)学习记录 1. 点云概述 点云&#xff08;Point Cloud&#xff09;是三维空间中&#xff0c;表达目标空间分布和目标表面特性的点的集合点云通常可以从深度相机或激光雷达中直接获取&#xff0c;也可以从 CAD 等软件中…

JavaEE4(4/27)

目录 1.加锁 2.锁死和重入 3.线程安全的类 4.volatile 1.加锁 当两个线程同时对一个对象进行加锁的时候,会产生竞争 2.锁死和重入 如果一个线程对一个对象加了一次锁,在加一次出现死锁,就是不可重入,否则就是可重入 锁死:对同一个锁再加锁出现的死循环 实际上开发JVM的工程师…

守正创新,核心业务系统助推财务公司数字化转型

为落实国资委加快建设世界一流财务管理体系&#xff0c;推进财务公司数字化转型工作要求&#xff0c;交流总结财务公司同业工作经验&#xff0c;由中国电子主办、中电金信承办的“新核心 新动能——财务公司数字化转型专题研讨会”在京召开。会上中电金信发布了财务公司核心业务…

马斯克们叫停 GPT-5,更像是场行为艺术

目录 01 联名信说了什么&#xff1f; 02 发起方是谁&#xff1f; 03 谁签署了联名信&#xff1f; 04 联名信有哪些问题&#xff1f;三巨头的另外两位 Sam Altman 的表态 其他值得关注的署名者 比如马斯克。 另一个位于前列的署名者是 Stability AI 的创始人 Emad Most…

(剪花布条、客似云来)笔试强训

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE初阶 两道编程题~~~ 目录 文章目录 一、[编程题]客似云来 二、[编程题]剪花布条 一、[编程题]客似云来 链接&#xff1a;客似云来__牛客网 来源&#xff1a;牛客网 NowCoder开了一家早餐店&am…

线性回归原理与使用

1 回归 预测年薪 0.5 * 工作年限 0.7 * 学历数值 回归的目的就是预测 数值型的目标值。 求解回归方程式 系数 &#xff08;0.5 &#xff0c;0.7&#xff09;的过程就是 回归。 2 简单线性回归 样本特征只有一个的线性回归 &#xff0c;称为简单线性回归。 举例…

想搞懂 API ,先了解这些技术

在学习 API 相关技术之前&#xff0c;我们需要理解什么是 API。API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是为了帮助不同的应用程序之间实现数据和功能交换而设计的一组软件接口。使用 API&#xff0c;开发者可以访问底层数据…

c# 数据保存为PDF(一) (spire pdf篇)

文章目录 前言了解 Spire使用Spire.PDF1 创建简单的PDF文档2 创建带有格式的PDF文档&#xff08;使用Draw&#xff09;头部信息页眉页脚测试数据完整的代码 3 创建带有格式的PDF文档&#xff08;使用Gird&#xff09;小结 先上一个效果图 前言 项目中需要将一些数据转存为PDF …

unity GI Shader 实现

之前分享了一篇对unity全局光照的解析&#xff0c;里面提到了一些东西&#xff0c;需要在Shader内实现&#xff0c;在这一篇补上。 要实现对全局GI的shader实现&#xff0c;我们可以通过对unity内置的Lit进行解析查看。 烘焙的方式有很多种&#xff0c;选择合适的方式烘焙和使…

python-使用Qchart总结4-绘制多层柱状图

1、上代码 import sysfrom PyQt5.QtChart import QChart, QChartView, QBarCategoryAxis, QValueAxis, QBarSeries, QBarSet from PyQt5.QtGui import QPainter, QColor from PyQt5.QtWidgets import QMainWindow, QApplicationfrom untitled import Ui_MainWindow #从生成好的…

财报解读:连续三年逆势增长的背后,欧派家居到底靠的是什么?

能在过去3年逆势增长的家居企业并不多&#xff0c;而欧派家居就是其中一个。4月25日&#xff0c;欧派家居发布2022年年度报告。据年报数据显示&#xff0c;2022年&#xff0c;欧派家居共实现营业收入224.80亿元&#xff0c;净利润约26.88亿元。 从2020年到2022年&#xff0c;欧…

设计模式——单例设计模式

目录 一、设计模式概述和分类 1.1 设计模式介绍 1.2 23种设计模式 二、创建型设计模式-单例模式 2.1 介绍 2.2 八种单例模式的创建方式 2.2.1 饿汉式&#xff08;静态常量&#xff09; 2.2.2 饿汉式&#xff08;静态代码块&#xff09; 2.2.3 懒汉式&#xff08;线程不…

SSH客户端工具输入目标地址端口远程失败故障原因和解决方案

问题表现&#xff1a;SSH客户端工具输入目标地址端口远程失败时&#xff0c;出现ssh client 报 algorithm negotiation failed的异常信息。 使用SSH Secure Shell Client连接Linux服务器的SSH的时候有时会出现错误提示信息&#xff1a;ssh algorithm negotiation failed。这是…

基于DSP+FPGA+ADS1282支持32Bit高精度数据采集方案(三)系统性能测试

系统性能分析与测试 本章将首先对系统电路的噪声和温漂进行分析&#xff0c;而后对采集系统的性能进行 测试&#xff0c;并对测试数据进行分析。 5.1 高精度 AD 转换电路噪声和温漂分析 5.1.1 电阻噪声与温漂 1 、电阻的噪声 电阻是一种噪声源&#xff0c;其严重程度取…

与贵州公安面对面|欧科云链天眼中国行,他们都说“行”

4月28日&#xff0c;为期两天“链上天眼科技助警中国行贵州站”&#xff08;以下简称&#xff1a;贵州站&#xff09;迎来了尾声。 继首日亮相中共中央政法委员会机关报-法制日报社主办的“政法智能化建设技术装备及成果展巡展贵州站”&#xff0c;引发贵州省政法机关单位的广…

基于.Net开发的、支持多平台、多语言餐厅点餐系统

今天给大家推荐一套支持多平台、多语言版本的订单系统&#xff0c;适合餐厅、酒店等场景。 项目简介 这是基于.Net Framework开发的&#xff0c;支持手机、平板、PC等平台、多语言版本开源的点餐系统&#xff0c;非常适合餐厅、便利店、超市、酒店等&#xff0c;该系统基础功…

vue3+ts+vite自适应项目——搭建项目

系列文章目录 第一章&#xff1a;搭建项目 目录 系列文章目录 前言 一、搭建项目 二、安装sass 1.安装依赖 2.测试 三、引入element-plus 1.引入库 1.1 安装 2.2引入插件 2.3测试 2.自定义主题 四、实现自适应 1.安装 2.引入 总结 前言 本项目主要目的是熟练…

Web前端学习路线 Web前端面试题 Web前端简历及常用工具

文章目录&#xff1a; 一&#xff1a;web前端学习路线 二&#xff1a;web前端常用工具 手册 文档 教程 插件 组件 三&#xff1a;IT计算机web前端面试题和面试需知 一&#xff1a;web前端学习路线 web前端学习路线 二&#xff1a;web前端常用工具 手册 文档 教程 插件 组件 …

浙大数据结构第三周初识二叉树

03-树1 树的同构 (25分) 给定两棵树T1和T2。如果T1可以通过若干次左右孩子互换就变成T2&#xff0c;则我们称两棵树是“同构”的。例如图1给出的两棵树就是同构的&#xff0c;因为我们把其中一棵树的结点A、B、G的左右孩子互换后&#xff0c;就得到另外一棵树。而图2就不是同构…

[2023.4.28]知识体系脑图

整理下工作5年来的知识体系脑图&#xff1a;