Vue3入门--[vue/compiler-sfc] Unexpected token, expected “,“ (18:0)

新手小白学习Vue–入门就踩坑系列

问题描述

创建了一个Person.vue,保存后直接报错:
[plugin:vite:vue] [vue/compiler-sfc] Unexpected token, expected "," (18:0)
在网上搜了半天也没找到原因,最后还得靠自己,现将解决办法分享一下,希望大家不要再踩坑了!!

源代码如下:

<template>
  <div class="person">
    <h2>姓名: {{name}}</h2>
    <h2>年龄: {{age}}</h2>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">

export default {
  name: 'Person',
  data(){
    return {
      name : 'John San',
      age: 18,
      tel: '1234567890'
    }
 },
 methods: {
   showTel() {
     alert(this.tel);
   }
   // --坑位  此处有个大括号忘记写了 ,此处需要添加 }
}
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 2px 2px 5px #888888;
    border-radius: 5px;
    padding: 10px;
  }
</style>

结果保存后浏览器报错:

在这里插入图片描述
控制台报错:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

原因解析

错误远近竟然是少写了一个}
在源代码中已经标注报错位置
我吐了!

小结

丢三落四的,代码语法严谨,不要粗心大意!切记,切记!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【制造业&盒子】箱子检测系统源码&数据集全套:改进yolo11-swintransformer

改进yolo11-MLCA等200全套创新点大全&#xff1a;箱子检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.01 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者视频可能为…

Spring Security 框架篇-深入了解 Spring Security 的认证功能流程和自定义实现登录接口(实现自定义认证过滤器、登出功能)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Spring Security 框架概述 2.0 Spring Security 核心功能-认证功能 2.1 过滤器链 2.2 登录认证流程 2.3 思路分析 3.0 登录认证具体操作 3.1 环境搭建 3.2 实现 U…

HBuilderx修改主题色-改变编辑器背景颜色等

效果图&#xff1a; 第一步我们打开HBuilderX 选择工具 – 主题 – 选择&#xff08;雅蓝&#xff09; 然后再设置&#xff0c;源码视图里面打开Setting.json文件 3.将一下代码赋值到右侧用户设置即可 {"workbench.colorCustomizations": {// "[Defau…

食堂采购系统源码:实现供应链管理平台功能模块的技术实践

在当前数字化转型浪潮中&#xff0c;餐饮和食堂管理的需求越来越高&#xff0c;食堂采购系统逐渐成为企业和组织优化管理、降低成本的关键工具。 一、食堂采购系统的核心功能概述 一个完善的食堂采购系统不仅需要具备传统的订单管理、库存管理、供应商管理功能&#xff0c;还…

Python 工具库每日推荐 【Sphinx】

文章目录 引言文档工具的重要性今日推荐:Sphinx 文档生成工具主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:为 Python 项目生成 API 文档案例分析高级特性自定义主题国际化支持扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScript …

stm32不小心把SWD和JTAG都给关了,程序下载不进去,怎么办?

因为想用STM32F103的PA15引脚&#xff0c;调试程序的时候不小心把SWD和JTAD接口都给关了&#xff0c;先看下罪魁祸首 GPIO_PinRemapConfig(GPIO_Remap_SWJ_JTAGDisable,ENABLE);//关掉JTAG&#xff0c;不关SWGPIO_PinRemapConfig(GPIO_Remap_SWJ_Disable, ENABLE);//关掉SW&am…

Transformer+KAN系列时间序列预测代码

前段时间&#xff0c;来自 MIT 等机构的研究者提出了一种非常有潜力的替代方法 ——KAN。该方法在准确性和可解释性方面表现优于 MLP。而且&#xff0c;它能以非常少的参数量胜过以更大参数量运行的 MLP。 KAN的发布&#xff0c;引起了AI社区大量的关注与讨论&#xff0c;同时…

【OD-支持在线评测】文本统计分析(200分)

📎 在线评测链接 https://app5938.acapp.acwing.com.cn/contest/11/problem/OD1076 🍓 OJ题目截图 🍿 最新机试E卷,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 94 分 🌍 评测功能需要 ⇒ 订阅专栏 ⇐ 后私信联系解锁~ 文章目录 📎…

C++(友元、异常机制、静态成员、单例模式)

友元 友元可以访问与其好友关系的类中的私有成员&#xff0c;使用friend关键字进行修饰。&#xff08;友元破坏了类的封装性&#xff09;。 特点 &#xff08;1&#xff09;友元是单向的 &#xff08;2&#xff09;友元不能传递 &#xff08;3&#xff09;友元…

HTML 基础标签——表格标签<table>

文章目录 1. `<table>` 标签:定义表格2. `<tr>` 标签:定义表格行3. `<th>` 标签:定义表头单元格4. `<td>` 标签:定义表格单元格5. `<caption>` 标签:为表格添加标题6. `<thead>` 标签:定义表格头部7. `<tbody>` 标签:定义表格…

ElementUI中el-table双击单元格显示输入框

效果图 实现 <el-table:data"formData.products"row-key"id":show-header"true"style"width: 100%; margin-top: 16px"class"zq-table-theme-info"bordercell-dblclick"handleDbClick"> <el-table-col…

强化学习之父Richard Sutton给出一个简单思路,大幅增强所有RL算法

在当今的大模型时代&#xff0c;以 RLHF 为代表的强化学习方法具有无可替代的重要性&#xff0c;甚至成为了 OpenAI ο1 等模型实现强大推理能力的关键。 但这些强化学习方法仍有改进空间。近日&#xff0c;强化学习之父、阿尔伯塔大学教授 Richard Sutton 的团队低调更新了一…

一台手机可以登录运营多少个TikTok账号?

很多TikTok内容创作者和商家通过运营多个账号来实现品牌曝光和产品销售&#xff0c;这种矩阵运营方式需要一定的技巧和设备成本&#xff0c;那么对于很多新手来说&#xff0c;一台手机可以登录和运营多少个TikTok账号呢&#xff1f; 一、运营TikTok账号的数量限制 TikTok的官…

Rembg模型构建教程

一、介绍 Rembg&#xff0c;全称为“Remove Background”&#xff0c;是一款基于深度学习的图像背景去除工具。它的主要功能是通过智能识别图像中的前景物体&#xff0c;并将其从背景中分离出来&#xff0c;从而创建具有透明背景的图像。 二、基础环境 系统&#xff1a;Ubun…

AI直播带货场景切换模块的搭建!

AI直播带货&#xff0c;作为电商领域的新宠&#xff0c;正以其独特的魅力和高效的营销手段&#xff0c;引领着销售模式的新变革。 在AI直播带货中&#xff0c;场景切换模块是不可或缺的一部分&#xff0c;它不仅能够提升观众的观看体验&#xff0c;还能更好地展示商品&#xf…

力扣每日一题2024/11/2 3226. 使两个整数相等的位更改次数

class Solution:def minChanges(self, n: int, k: int) -> int:binary_n format(n, b)binary_k format(k, b)res0# 将两个二进制字符串长度对齐&#xff0c;前面补零max_len max(len(binary_n), len(binary_k))binary_n binary_n.zfill(max_len)binary_k binary_k.zfil…

.NET Core WebApi第6讲:WebApi的前端怎么派人去拿数据?(区别MVC)

一、前端界面小基础 head&#xff1a;引入CSS, 引入JS是写在head里面。 body&#xff1a;眼睛肉眼能看到的用户展示的界面是写在body里面。 二、前端怎么派人去拿数据&#xff1f; 1、MVC&#xff1a;前后端不分离&#xff0c;MVC相比WebApi只是多了一个views的文件夹 &am…

虚拟现实与增强现实:重塑娱乐和教育的边界!

内容概要 在这个瞬息万变的时代&#xff0c;虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;正如两位魔法师&#xff0c;腾云驾雾间掀起了一场教育与娱乐的革命。虚拟现实带我们飞跃平凡&#xff0c;进入一个充满奇迹的数字宇宙&#xff0c;仿佛我们…

Win10搭建SFTP服务器

1、下载安装 Release v9.5.0.0p1-Beta PowerShell/Win32-OpenSSH GitHub 下载OpenSSH-Win64.zip 解压之后放入到&#xff1a;C:\Program Files (x86)\OpenSSH-Win64以管理员身份打开CMD进入到 C:\Program Files (x86)\OpenSSH-Win64 文件夹执行命令 powershell.exe -Exec…

NNLM——预测下一个单词

一、原理篇 NNLM&#xff08;Neural Network Language Model&#xff0c;神经网络语言模型&#xff09;是一种通过神经网络进行语言建模的技术&#xff0c;通常用于预测序列中的下一个词。 NNLM的核心思想是使用词嵌入&#xff08;word embedding&#xff09;将词转换为低维向…