vue-组件定义注册使用

vue组件使用的步骤

  1. 定义组件
  2. 注册组件
  3. 使用组件

定义组件

Vue.extend(options)
其中options和new Vue(options)出入的options对象几乎一样,但是也有不同。

  • 创建 el不用写—最终所有组件需要经过一个vm的管理,由vm的el决定服务哪个容器。

  • data必须写成函数—因为组件复用,数据存在引用关系。

Vue创建组件案例 Vue.extend()创建

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>学习Vue组件</h2></div></body><script type="text/javascript">Vue.config.productionTip = false;//创建一个vue实例new Vue({el: "#root",data: {opacity: 1,},});//定义一个vue组件let school = Vue.extend({template: `<div class="demo"><h2>学校名称:{{schoolName}}</h2><h2>学校地址:{{address}}</h2><button @click="showName">点我提示学校名</button>	</div>`,data() {return {schoolName: "希望小学",address: "123456@qq.com",};},methods: {showName() {alert(this.schoolName);},},});</script></html>

注册组件

  • 局部注册:在new Vue时,传入componnets选项
  • 全局注册:在Vue.component(‘组件名’,组件)

局部注册案例

<script>//创建vmnew Vue({el: '#root',data: {msg:'你好啊!'},//第二步:注册组件(局部注册)components: {school: school,student: student// ES6简写形式// school,// student}})
</script>

全局注册案例

    //注册vue组件Vue.component('school',school)

使用组件

    <div id="root"><h2>{msg}</h2><school></school></div>

使用注意点

组件名

  • 一个单词

  • 首字母小写 school

  • 首字母大写 School

  • 多个单词

  • kebab-case命名 my-name

  • CamelCase命名 MyName(需要脚手架支持)

组件标签


(需要使用脚手架,否则导致后续标签无法渲染)

组件定义简写

const school = Vue.extend(options) 可简写为:const school = options

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

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

相关文章

Flink实现kafka到kafka、kafka到doris的精准一次消费

1 流程图 2 Flink来源表建模 --来源-城市topic CREATE TABLE NJ_QL_JC_SSJC_SOURCE ( record string ) WITH (connector = kafka,topic = QL_JC_SSJC,properties.bootstrap.servers = 172.*.*.*:9092,properties.group.id = QL_JC_SSJC_NJ_QL_JC_SSJC_SOURCE,scan.startup.mo…

基于Springboot实现疫情网课管理系统项目【项目源码+论文说明】分享

基于Springboot实现疫情网课管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于疫情网课管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了疫情…

学习开发一个RISC-V上的操作系统(汪辰老师) — unrecognized opcode `csrr t0,mhartid‘报错问题

前言 &#xff08;1&#xff09;此系列文章是跟着汪辰老师的RISC-V课程所记录的学习笔记。 &#xff08;2&#xff09;该课程相关代码gitee链接&#xff1b; &#xff08;3&#xff09;PLCT实验室实习生长期招聘&#xff1a;招聘信息链接 正文 &#xff08;1&#xff09;在跟着…

three.js点击模型实现模型边缘高亮选中效果

three.jsreact实现点击模型实现高亮选中效果 1、创建一个场景 let scene, camera, renderer, controls; let stats null; // 检测动画运行时的帧数 let clock new THREE.Clock(); // getDelta()方法获得两帧的时间间隔 let FPS 30; let renderT 1 / FPS; let timeS 0;con…

SpringBoot中使用拦截器

拦截器属于MVC中的内容 SpringBoot项目,引入web依赖即可 需要访问的控制器 拦截器第一步实现HandlerInterceptor接口 第二步实现WebMvcConfigurer接口,并重写addInterCeptors()方法,将自定义的拦截器注册 也就是说这里add进去拦截的请求,才会进入到prehandle方法,这里放行的请…

kafka与zookeeper的集群

基础配置 systemctl stop firewalld && systemctl disable firewalld setenforce 0 sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/configvi /etc/hosts ip1 node1 ip2 node2 ip3 node3zookeeper介绍 zookeeper是一个分布式的协调服务&#xff0c;主要用…

计算机竞赛 : 题目:基于深度学习的水果识别 设计 开题 技术

1 前言 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天做一个 基于深度学习的水果识别demo 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/pos…

LuatOS-SOC接口文档(air780E)-- gtfont - 高通字库芯片

示例 -- 已测试字体芯片型号 GT5SLCD1E-1A -- 如需要支持其他型号,请报issuegtfont.init(spi_device) 初始化高通字体芯片 参数 传入值类型 解释 userdata 仅支持spi device 生成的指针数据 返回值 返回值类型 解释 boolean 成功返回true,否则返回false 例子 -- …

[天翼杯 2021]esay_eval - RCE(disabled_function绕过||AS_Redis绕过)+反序列化(大小写wakeup绕过)

[天翼杯 2021]esay_eval 1 解题流程1.1 分析1.2 解题1.2.1 一阶段1.2.2 二阶段 二、思考总结 题目代码&#xff1a; <?php class A{public $code "";function __call($method,$args){eval($this->code);}function __wakeup(){$this->code "";…

虚拟机Ubuntu18.04安装对应ROS版本详细教程!(含错误提示解决)

参考链接&#xff1a; Ubuntu18.04安装Ros(最新最详细亲测)_向日葵骑士Faraday的博客-CSDN博客 1.4 ROS的安装与配置_哔哩哔哩_bilibili ROS官网&#xff1a;http://wiki.ros.org/melodic/Installation/Ubuntu 一、检查cmake 安装ROS时会自动安装旧版的Cmake3.10.2。所以在…

uniapp 在uni.scss 根据@mixin定义方法 、通过@include全局使用

在官方文档中提及到uni.scss中变量的使用&#xff0c;而我想定义方法&#xff0c;这样写css样式更方便 一、官方文档的介绍 根据官方文档我知道&#xff0c;在这面定义的变量全局都可使用。接下来我要在这里定义方法。 二、在uni.scss文件中定义方法 我在uni.scss文件中定义了…

12P4375X042-233C KJ2005X1-BA1 CE3007 EMERSON servo controller

12P4375X042-233C KJ2005X1-BA1 CE3007 EMERSON servo controller 我们提供三种不同类别的EDGEBoost I/O模块供选择&#xff0c;以实现最大程度的I/O定制: 数字和模拟输入/输出网络和连接边缘人工智能和存储 利用EDGEBoost I/O实现变革性技术 EBIO-2M2BK EBIO-2M2BK载板支持…

conda安装使用jupyterlab注意事项

文章目录 一、conda安装1.1 conda安装1.2 常见命令1.3 常见问题 二、jupyterlab2.1 jupyterlab安装和卸载2.2 常见错误2.2.1 版本冲突&#xff0c;jupyterlab无法启动2.2.2 插件版本冲突 2.3 常用插件2.3.1 debugger2.3.2 jupyterlab_code_formatter 2.4 jupyter技巧 一、conda…

LuatOS-SOC接口文档(air780E)-- gpio - GPIO操作

常量 常量 类型 解释 gpio.LOW number 低电平 gpio.HIGH number 高电平 gpio.PULLUP number 上拉 gpio.PULLDOWN number 下拉 gpio.RISING number 上升沿触发 gpio.FALLING number 下降沿触发 gpio.BOTH number 双向触发,部分设备支持 gpio.HIGH_IRQ …

文字转语音播报模块(一):阿里云nls服务使用示例

一、业务场景 最近笔者在业务中涉及到语音告警的模块&#xff0c;需要将告警内容以文件或流形式返回给前端进行语音播报&#xff0c;具体的分析与处理如下 二、业务分析 首先告警内容提示信息这里做的处理是通过专门字段去存储、编辑&#xff0c;根据拟定好的代码逻辑判断是…

ThreeJS-3D教学七-交互

在threejs中想要选中一个物体&#xff0c;点击或者鼠标悬浮&#xff0c;又或者移动端的touch事件&#xff0c;核心都是通过new THREE.Raycaster完成的。这里用到了一个概念&#xff0c;即我们点击时的 屏幕坐标 转换为 three中的3D坐标。 先看效果图&#xff1a; 代码是&#…

掌握这3点,企业就能规避收款业务中的合规风险

随着国家政策监管日趋严格&#xff0c;企业合规管理正在受到高度关注。在企业收业务款场景中&#xff0c;银行回单管理容易被忽略&#xff0c;若处理不当&#xff0c;将面临合规风险。具体表现如下&#xff1a; 审计依据不充分 银行回单是企业内部控制和合规管理的重要组成部…

vue3 集成 tailwindcss

tailwindcss 介绍 Tailwind CSS 是一个流行的前端框架&#xff0c;用于构建现代、响应式的网页和 Web 应用程序。它的设计理念是提供一组可复用的简单、低级别的 CSS 类&#xff0c;这些类可以直接应用到 HTML 元素上&#xff0c;从而加速开发过程并提高样式一致性。 主要特点…

正确使用 Unicode 和 MBCS 字符集

正确使用 Unicode 和 MBCS 字符集 在 Windows 下做开发&#xff0c;初学者经常面临字符集选择的问题。本文详细解释 MBCS 字符集和 Unicode 字符集的正确使用方法&#xff0c;以及为什么写程序要用 Unicode 字符集。同时对 UTF-8 做了简单介绍。 在程序中正确使用字符集 以 …

无图形化界面使用wireshark抓包分析数据

1. 解决Wireshark的权限不足问题 当普通用户身份运行Wireshark时&#xff0c;会遇到权限不足的问题。原因在于dumpcap需要root权限才能正常工作。以下是解决此问题的步骤&#xff1a; 创建用户组 我们将创建一个名为wireshark的用户组&#xff1a; sudo groupadd wireshark 更…