Vue入门教学——编写第一个页面

  • 以Vue2.0为例子。

1、创建一个Vue项目

  • 创建过程:Vue-cli(脚手架)的创建_vue脚手架创建项目命令-CSDN博客
  • 【注】项目名不能有大写字母。
  • 创建完毕后,使用VSCode打开项目文件夹(其他编辑器也行)。

2、运行项目

  • 进入项目文件夹,执行运行命令。
  • cd demo
    npm run serve
  • 按住Ctrl,鼠标左键点击即可打开。

3、编写第一个页面

  • 从App.vue和路由中可以看出,原始的系统中一共有两个页面。
  • 为了简便,直接把Home当作要编写的第一个页面。
  • 首先删除About页面相关的信息。
    •  
  • 再修改App.vue中的信息。
  • 接下来,修改Home页面。
    • 从下面代码可以看出,Home页面调用了一个HelloWord组件。该组件存放在components中。
    •  
    • 可以通过向Home页面中添加组件来调整页面布局。
  • 接下来进行简单演示,创建一个新的组件插入HomeView.vue中。
    • 先删除HelloWord组件的相关信息。
    • 在components下创建一个新的组件文件。
      • HomeTitle.vue
      • <template>
            <div id="hometitle">
                <p>编写第一个主页</p>
            </div>
        </template>
        <script>
            export default {
                name:'HomeTitle',
            };
        </script>
        
        <style scoped>
            #hometitle p{
                font-size:50px;
                font-weight:bold;
            }
        </style>
    • 将HomeTitle组件引入到Home主页中。
    • 保存即可。
  • 修改头部信息。
    • 项目的头部信息都存放在public文件夹的index.html中,按需修改即可。

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

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

相关文章

浅析高校用电问题及智慧电力监管平台的构建

安科瑞 崔丽洁 摘 要&#xff1a;介绍了当前高校用电存在的问题&#xff0c;进行了原因分析&#xff0c;由此提出建立高校用电智慧监管平台。对高校用电智慧监管平台的构架进行设计&#xff0c;运用物联网技术&#xff0c;实现各回路实时自主控制&#xff0c;并细化管理权限&a…

50代码审计-PHP无框架项目SQL注入挖掘

代码设计分为有框架和无框架 挖掘技巧&#xff1a;随机挖掘&#xff0c;定点挖掘&#xff0c;批量挖掘&#xff08;用工具帮助扫描探针&#xff0c;推荐工具&#xff1a;fortify&#xff0c;seay系统&#xff09;。 1.教学计划&#xff1a; ---审计项目漏洞 Demo->审计思…

打印流详解

概述 作用&#xff1a;打印流可以实现方便、高效的打印数据到文件中去。 高效体现在用到了缓冲流&#xff1a; public PrintStream(OutputStream out, boolean autoFlush, Charset charset) {super(out);this.autoFlush autoFlush;this.charOut new OutputStreamWriter(thi…

ObjectMapper - 实现复杂类型对象反序列化(天坑!)

目录 一、复杂类型反序列化 1.1、背景 1.2、问题解决 一、复杂类型反序列化 1.1、背景 a&#xff09;例如有 AppResult 对象&#xff0c;如下&#xff1a; Data public class AppResult {private Integer code;private String msg;private Object data;} b&#xff09;App…

建设银行余额生成器,工商农业邮政招商中国模版,易语言画板+编辑框实现截图

今天闲着没事干用易语言画板快照命令开发了一个虚拟余额生成器&#xff0c;当然我加了水印&#xff0c;模版上面都加了水印的&#xff0c;仅仅提供娱乐的效果&#xff0c;做不了啥事&#xff0c;然后软件主要就是画板上面加入了固定的模版图&#xff0c;图片的话你可以自己网上…

【React入门实战】实现Todo代办

文章目录 效果功能-状态管理相关接口定义相关方法定义 UIinput输入框&#xff1a;回车添加todo标题列表列表项Main 总体代码 非常简单入门的react-todo练习&#xff0c;代码写的很小白。 效果 技术栈&#xff1a;react-typeScript 数据分为代办Todo和已办完Done&#xff0c;可…

西门子S7-1200PLC混合通信编程(ModbusTcp和UDP通信)

S7-1200PLC的MODBUS-TCP通信 西门子PLC ModbusTcp通信访问网关后从站(SCL语言轮询状态机)-CSDN博客文章浏览阅读305次。西门子PLC的ModbusTcp通信在专栏已有很多文章介绍,所不同的是每个项目的通信需求都略有不同,今天我们以访问网关后的三个从站数据来举例,给出轮询的推荐…

WPS的JS宏基础(一)

基础知识 1、简单的第一个宏 //注意function只能全部用小写 function demo(){alert("你好!") }2、录制宏生成工资条 function 使用录制宏自动生成代码以JS宏为例()//使用相对引用 {Selection.Copy(undefined);ActiveCell.Offset(5, 0).Range("A1:M4").I…

Java进击框架:Spring-数据存取(七)

Java进击框架&#xff1a;Spring-数据存取&#xff08;七&#xff09; 前言事务管理声明式事务管理 DAO支持JDBC的数据访问使用JdbcTemplate控制数据库连接JDBC批处理操作封装 SQL 语句中的参数 使用R2DBC进行数据访问对象关系映射(ORM)数据访问HibernateJPA XML模式 前言 参考…

【免费送书】写博客模板

【点我-这里送书】 本人详解 作者&#xff1a;王文峰&#xff0c;参加过 CSDN 2020年度博客之星&#xff0c;《Java王大师王天师》 公众号&#xff1a;JAVA开发王大师&#xff0c;专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生&#xff0c;期待你的…

如何优化负载均衡?一文讲懂

当web应用程序增长到单服务器无法承受的地步&#xff0c;企业就面临着优化负载均衡的需求。简而言之&#xff0c;企业需要实现流量重定向&#xff0c;就需要从业务可靠性的需求出发&#xff0c;寻找一套可行的负载均衡方案&#xff0c;那么常用的负载均衡方案有哪些&#xff1f…

UnoCSS框架常用语法

文章目录 🍉vscode 开发插件🍉设置边框颜色🍉设置宽、高、背景色、外边距🍉设置flex🍉设置元素在滚动时固定在指定区域内🍉vscode 开发插件 vscode 开发建议安装 UnoCSS插件 🍉设置边框颜色 border-[color]: 设置边框的颜色,[color]可以是预设的颜色名称(如…

什么是 eCPM?它与 CPM 有何不同?

目录 eCPM 什么是 eCPM&#xff1f;它与 CPM 有何不同&#xff1f; 如何计算 eCPM&#xff1f; 该指标的主要优势有哪些&#xff1f; eCPM 底价 eCPM 达到多少比较合适&#xff1f; eCPM 每千人有效成本 (eCPM) 是指发行商&#xff08;App 开发者&#xff09;在 App 中每…

境电商为什么要做独立站?API一键对接秒上架瞬间拥有全平台几十亿商品和用户!

境电商为什么要做独立站&#xff1f;它的优势又有哪一些&#xff1f; 如果说我们的企业是做b two b的跨境电商&#xff0c;那今天这个内容一定要仔细&#xff0c;API一键对接秒上架瞬间拥有全平台几十亿商品和用户&#xff01; 第一呢&#xff0c;独立站它就是我们自己做的一个…

Linux入门(二)

Linux入门&#xff08;二&#xff09; 1&#xff1a;创建文件 1.1 touch命令 使用touch命令在文件不存在时&#xff0c;会创建文件。同时不支持在创建文件时&#xff0c;写入一些内容&#xff0c;该文件的大小是0kb. touch test.txt 注意&#xff0c;无法创建多级目录文件 …

redisson中的分布式锁

文章目录 redisson中的分布式锁可重入锁&#xff08;Reentrant Lock&#xff09; redisson中的分布式锁 ​ Redisson是一个在Redis的基础上实现的Java驻内存数据网格&#xff08;In-Memory Data Grid&#xff09;。它不仅提供了一系列的分布式的Java常用对象&#xff0c;还提供…

力扣每日一题 ---- 2906. 构造乘积矩阵

这题很简单(一下就能想到是前缀和的提米)&#xff0c;但是在处理12345上面需要仔细一点&#xff0c;本来我最开始想到的时候全部累乘在除掉当前数&#xff0c;但是这样就没有把12345考虑进去&#xff0c;如果他本身是12345的话&#xff0c;那么除他以外的乘积并不一定是0&#…

ubuntu22.04桌面版系统无法识别USB摄像头

虚拟机连接电脑摄像头连接失败&#xff08;驱动程序错误&#xff09; 本文为转载&#xff1a;版权归远作者所有&#xff0c;之所以转载是为了避免被原作者删除 巴黎铁塔下的女孩 你尽管努力&#xff0c;剩下的交给时间 虚拟机调用电脑的摄像头&#xff0c;正常情况下只需点击…

鲁大师10月新机性能/流畅/久用榜:骁龙8 Gen3一鸣惊人,双十一“6系”处理器成井喷状态

刚刚过去的10月份手机圈可谓是热闹纷呈,要数量有数量,要新品有新品,要旗舰有旗舰,要走量也有走量。10月份的大部分光芒,毫无疑问都将被骁龙8 Gen3以及重夺骁龙旗舰首发的小米 14系列身上。 骁龙8 Gen3毫无疑问,代表着骁龙旗舰处理器的又一个巅峰,从目前鲁大师后台抓取到的数据…

递归下降语法分析程序设计与实现

制作一个简单的C语言词法分析程序_用c语言编写词法分析程序-CSDN博客文章浏览阅读276次。C语言的程序中&#xff0c;有很单词多符号和保留字。一些单词符号还有对应的左线性文法。所以我们需要先做出一个单词字符表&#xff0c;给出对应的识别码&#xff0c;然后跟据对应的表格…