net mvc中使用vue自定义组件遇到的坑

自定义一个ButtonCounter.js组件

export default {data() {return {count: 0}},template: `<van-button type="primary" @click="count++">You clicked me {{ count }} times.</van-button>`
}

按照官网文档的意思,组件命名需要大写驼峰命名。或者使用kebaba-case方式。但是MVC只支持kebaba-case
在这里插入图片描述
如果我们使用PascalCase方式命名来导入自定义组件

<script type="module">import reclick from '../../js/reclick.js';import ButtonCounter from "../../js/components/ButtonCounter.js";const app = Vue.createApp({// components: {//     buttoncounter// },data() {return {count: 0}},methods: {increment() {this.count++}},template: '#app-template'})app.use(ElementPlus)app.use(vant)app.use(vant.Lazyload)//自定义组件app.component('ButtonCounter', ButtonCounter)// 调用工具函数,弹出一个 Toast// vant.showToast('提示');// app.directive('focus', {//     mounted: (el, binding, vnode, prevNode) => {//         el.addEventListener('click', e => {//             if (!el.disabled) {//                 el.disabled = true;//                 el.style.cursor = 'not-allowed';//                 el.classList.add('is-disabled');//                 setTimeout(() => {//                     el.disabled = false;//                     el.style.cursor = 'pointer';//                     el.classList.remove('is-disabled');//                 }, binding.value || 1000);//             }//         });//     }// }); //自定义指令app.directive('reclick', reclick); //自定义指令app.mount('#app')
</script>
<template id="app-template"><el-button v-reclick="20000" type="primary" @@click="increment">按钮</el-button><h1>Count:{{count}}</h1><ButtonCounter />
</template>

这样的方式引入组件并在页面中使用,什么都不会显示,并且F12会有警告
在这里插入图片描述
提示组件失败,并且组件名称默认是小写。既然默认是小写那我们使用kebaba-case命名方式试试。

export default {name: 'vant-my-button',data() {return {count: 0}},template: `<van-button type="primary" @click="count++">You clicked me {{ count }} times.</van-button>`
}

组件里面给组件name赋值。

然后使用组件

    import ButtonCounter from "../../js/components/ButtonCounter.js";//自定义组件app.component('vant-my-button', ButtonCounter )
<template id="app-template"><el-button v-reclick="20000" type="primary" @@click="increment">按钮</el-button><h1>Count:{{count}}</h1><vant-my-button></vant-my-button><vant-my-button></vant-my-button><vant-my-button></vant-my-button>
</template>

运行后,组件完美加载出来。

注意,vue如果挂载了template ,那么组件请写在template 中,如果写在外面也出不来。

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

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

相关文章

Python第六次作业

01.求第n项的斐波那契数列值 #求第n项的斐波那契数列值 #1、1、2、3、5、8、13、21、34…… #F(0)0&#xff0c;F(1)1, F(n)F(n - 1)F(n - 2)&#xff08;n ≥ 2&#xff0c;n ∈ N*&#xff09;def shulie ():print("求第n项的斐波那契数列值:",end"")xev…

Vue3 学习笔记(十三)Vue组件详解

1、组件&#xff08;Component&#xff09; 介绍 组件&#xff08;Component&#xff09;是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素&#xff0c;封装可重用的代码&#xff0c;可以帮助你将用户界面拆分成独立和可复用的部分。 每个 Vue 组件都是一个独立的 Vue 实…

MySQL基础(二)

目录 一. 数据库命令行基本操作指令 1. 查看当前有哪些数据库——show databases; 2. 创建数据库——create database 数据库名 charset utf8 3. 选中数据库——use 数据库名; 4. 删除数据库——drop database 数据库名; 二. 常用数据类型 2.1 数值类型 2.2. 字符串类型 …

详细解读 CVPR2024:VideoBooth: Diffusion-based Video Generation with Image Prompts

Diffusion Models专栏文章汇总:入门与实战 前言:今天是程序员节,先祝大家节日快乐!文本驱动的视频生成正在迅速取得进展。然而,仅仅使用文本提示并不足以准确反映用户意图,特别是对于定制内容的创建。个性化图片领域已经非常成功了,但是在视频个性化领域才刚刚起步,这篇…

深度学习案例:带有一个隐藏层的平面数据分类

该案例来自吴恩达深度学习系列课程一《神经网络和深度学习》第三周编程作业&#xff0c;作业内容是设计带有一个隐藏层的平面数据分类。作业提供的资料包括测试实例&#xff08;testCases.py&#xff09;和任务功能包&#xff08;planar_utils.py&#xff09;&#xff0c;下载请…

SD教程 重绘 ControlNet-Inpain

SD教程 重绘 ControlNet-Inpain ———————————————— 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。原文链接&#xff1a;https://blog.csdn.net/A1353192296/article/details/13…

【界面改版】JimuReport 积木报表 v1.9.0 版本发布,填报能力和大屏能力

项目介绍 积木报表JimuReport&#xff0c;是一款免费的数据可视化报表&#xff0c;含报表、仪表盘和大屏设计&#xff0c;像搭建积木一样完全在线设计&#xff01;功能涵盖&#xff1a;数据报表、打印设计、图表报表、门户设计、大屏设计等&#xff01; Web版报表设计器&#x…

【网络】1.UDP通信

UDP通信 1 server1.1 server建立的步骤1.2 运行server 2 client2.1 client的建立步骤2.2 运行client 3 总结3.1 server3.2 client 1 server server的启动方式是&#xff1a;./udpserver 8080 --> 格式就是./proc port端口 port端口自己指定 1.1 server建立的步骤 获取文件描…

告别冰冷机器声:GLM-4-Voice开启情感语音交互新时代!

目录 引言一、GLM-4-Voice概述二、GLM-4-Voice的架构三、GLM-4-Voice的主要功能四、GLM-4-Voice的技术原理五、GLM-4-Voice的应用场景六、GLM-4-Voice体验快速开始结语 引言 在人工智能的不断进步中&#xff0c;语音交互技术正逐渐成为人机沟通的重要桥梁。它不仅极大地提升了…

MySQL定时异机备份

场景&#xff1a;将A机器MySQL数据库部分表每日定时备份到B机器上 &#xff08;只适用于Linux&#xff09; 实现方式算是比简单了&#xff0c;就是用mysqldump生成文件&#xff0c;使用scp命令传输到另一台机器上。 1. 编写备份shell脚本 在A机器新建脚本 (当然没有vim的话vi…

使用VS2019将C#代码生成DLL文件在Unity3D里面使用(一)

系列文章目录 untiy知识点 文章目录 系列文章目录&#x1f449;前言&#x1f449;一、首先你要先有VS&#x1f449;二、引用UnityAPI使用步骤&#x1f449;2-1.引用unitydll文件到项目里面&#x1f449;2-2.导入Dll文件 &#x1f449;三、编辑dll代码&#x1f449;四、导出dll…

平台化运营公司如何在创业市场招商

在当今商业环境中&#xff0c;平台化运营的公司正成为推动经济发展的重要力量。对于这类公司而言&#xff0c;在创业市场招商意义重大。 平台化运营公司具有独特特点&#xff1a;通过搭建开放共享平台连接供需双方&#xff0c;实现资源优化配置与价值创造。比如电子商务平台、社…

聚类分析算法——K-means聚类 详解

K-means 聚类是一种常用的基于距离的聚类算法&#xff0c;旨在将数据集划分为 个簇。算法的目标是最小化簇内的点到簇中心的距离总和。下面&#xff0c;我们将从 K-means 的底层原理、算法步骤、数学基础、距离度量方法、参数选择、优缺点 和 源代码实现 等角度进行详细解析。…

SpringMVC执行流程(视图阶段JSP、前后端分离阶段)、面试题

目录 1.SpringMVC执行流程分为以下两种 2.非前后端分离的SpringMVC的执行流程 3.前后端分离的项目SpringMVC执行流程 4. 面试题 1.SpringMVC执行流程分为以下两种 2.非前后端分离的SpringMVC的执行流程 流程图&#xff1a; 更加生动的描述&#xff1a; DisPatcherServlet…

十分钟Linux中的epoll机制

epoll机制 epoll是Linux内核提供的一种高效I/O事件通知机制&#xff0c;用于处理大量文件描述符的I/O操作。它适合高并发场景&#xff0c;如网络服务器、实时数据处理等&#xff0c;是select和poll的高效替代方案。 1. epoll的工作原理 epoll通过内核中的事件通知接口和文件…

GRE Over IPsec(华三)

GRE Over IPsec 顾名思义&#xff0c;GRE在内&#xff0c;IPsec在外 那么当数据进入tunnel隧道后&#xff0c;会先被GRE封装后再进行IPsec感兴趣流acl匹配&#xff0c;匹配上了则封装IPsec&#xff0c;没匹配上则丢包 实验&#xff1a; 需求&#xff1a;总部pc能够通过gre o…

echarts属性之xAxis

xAxis 直角坐标系 grid 中的 x 轴&#xff0c;一般情况下单个 grid 组件最多只能放上下两个 x 轴&#xff0c;多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。 所有属性 xAxis. id string 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引…

盘点:2024年最新热门项目管理平台TOP11

一、项目管理平台的重要性 在当今竞争激烈的商业环境中&#xff0c;项目管理平台已成为企业提高效率和团队协作的关键工具。这主要是因为现代商业项目日益复杂&#xff0c;涉及多个部门、众多资源以及不断变化的需求。 首先&#xff0c;项目管理平台能够提高工作效率。例如&a…

PHP数据类型

几种常用的数据类型&#xff1a; String&#xff08;字符串&#xff09; Integer&#xff08;整型&#xff09; Float&#xff08;浮点型&#xff09; Boolean&#xff08;布尔型&#xff09; NULL&#xff08;空值&#xff09; Array&#xff08;数组&#xff09; Obje…

【大数据】Flink + Kafka 实现通用流式数据处理详解

目录 一、前言 二、流式数据处理场景介绍 2.1 流式数据处理概述 2.1.1 流式数据处理场景介绍 2.2 流式数据处理技术栈 2.2.1 数据采集 2.2.2 数据处理 2.2.3 数据存储 2.2.4 数据展示 2.3 流式数据处理场景面临的问题和挑战 三、通用的流式数据处理场景解决方案 3.1…