Vue项目学习(项目的开发流程)(2)

news2024/11/15 11:25:50

1、vue项目的默认首页和入口文件

2、两种书写的方式是表达一样的意思——>el:指定当前Vue实例挂载到哪个区域里

3、如果属性值和属性名一致,冒号和后面可以省略不写

(所以有两种写法)

4、以".vue"文件结尾的文件在项目当中称为组件文件。

其中Vue的组件文件:以.vue结尾,每个组件由三个部分组成: <template> , <script>、<style> 。

  • (模板部分)在<template>中,可以定义原生的html代码。相当于vue的视图部分
  • 在<script>中,这里面定义的js的代码。这里面当中主要定义vue当中的数据模型和方法
  • 在<style>中,定义css样式——>编写css样式代码

5、b站评论区学到的一个插件(用来书写.vue文件中提示)

插件名:Vuter

6、export——>导出模块,在其它的地方用import关键字导入

(1)<script>

export default {

}

</script>

(2)

<script>

export default {

  data(){

    return{

      //定义一个数据模型

      message:"Hello Vue"

    }

  }

}

</script>

7、定义vue当中的数据模型

  • data()是vue的默认写法
  • js当中的对象是一个"大括号"
  • data:function()这个可以简写成——>data()

  • 若需要定义vue的函数——>写一个methods:{ ... },在这之中定义一个一个方法

8、"<h1>{{message}}</h1>"

(1)使用双大括号 {{ }} 作为插值表达式的分隔符。例如,{{ message }} 会被替换为组件中定义的 message 属性的值。

(2)Vue.js:同样使用双大括号 {{ }},但在Vue 2.x中更推荐使用 v-bind:title="message"(简写为 :title="message")来绑定属性

(3)在HTML模板中,<h1>{{message}}</h1> 这行代码表示的是一个动态内容的标题。这里,{{message}} 是一个占位符,它会被某个框架(如Angular, Vue.js, React等)或模板引擎在运行时替换为实际的数据值。

具体来说,当这个HTML模板被渲染到浏览器上时,{{message}} 会被替换为在相应框架或模板引擎中定义的message变量的值。例如,如果message的值是"Hello, World!",那么渲染后的HTML将会是:<h1>Hello, World!</h1>

9、vscode——>ctrl+shift+y——>呼出控制台——>打开终端

10、package.json 文件是 Node.js 项目的核心文件,它包含了项目的配置信息以及项目所依赖的npm包列表。

11、在进行vue开发,main.js文件很少去修改。首页index.html也同样如此。主要操作的是一些组件文件——>.vue结尾的文件

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

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

相关文章

3个步骤上⼿Midjourney表情包教程,并上传到微信实现变现!

羡慕别⼈设计的表情包,有趣⼜好玩~也想拥有⾃⼰的个性表情包,可是⾯对复杂的设计流程,却不知从何开始?现在⽤Midjourney,你就可以轻松制作,各种⻛格的表情包,变钱赚钱,这些⽅法分享给 你~ 通⽤公式: 我们⽤表情包魔法公式,加⼊你想要的风格,⽐如漫画、卡通、插画、…

rpc框架怎么使用

这是我们提供RPC的服务类&#xff1a; class MprpcApplication { public:static void Init(int argc, char **argv);static MprpcApplication& GetInstance();static MprpcConfig& GetConfig(); private:static MprpcConfig m_config;MprpcApplication(){}MprpcApplica…

cuda逐步优化实现reduce sum 操作

归约是一种常见的数据并行原语&#xff0c;它将数组中的元素通过某种二元操作&#xff08;如加法&#xff09;合并成一个单一的值。通过逐步展示不同的CUDA实现版本&#xff0c;来演示重要的优化策略。 由于规约的算术操作很简单&#xff0c;对算力要求不高&#xff0c;因此我们…

文件上传和下载

要想实现文件上传和下载&#xff0c;其实只需要下述代码即可&#xff1a; 文件上传和下载 import cn.hutool.core.io.FileUtil; import cn.hutool.core.util.StrUtil; import com.example.common.Result; import org.springframework.web.bind.annotation.*; import org.sprin…

SQL注入sqli-labs-master关卡二

第二关如下&#xff1a; 查看页面与第一关差不多的样子&#xff0c;再查看PHP源码&#xff0c;与第一关差不多只是其中的查询处有不同。&#xff08;查看源码是为了更好的判断出该页面有什么漏洞&#xff09;其中没有单引号所以不用添加单引号去闭合去逃离单引号&#xff0c;说…

【生成式AI-一-生成式AI到底在说什么】

成式AI到底在说什么 什么是生成式人工智能生成式人工智能、机器学习、深度学习的关系chat-gpt 到底是如何实现对话的&#xff1f; 今天主要来看到底生成式AI是什么&#xff0c;语言模型是如何实现生成这个功能的&#xff1f; 什么是生成式人工智能 现在人工智能能做的事情很多…

pxe环境下的无人值守自动安装

0. 环境部署前的准备 1.rhel7的主机 2.开启主机图形 3.配置网络可用 4.关闭vmware dhcp功能 5.关闭防火墙以及selinux getenforce要为disable状态 grubby --update-kernel ALL --args selinux0 systemctl disable --now firewalld 1.kickstart自动安装脚本制作 我们想要…

SQL注入之webshell上传

首先webshell上传就是利用MySQL的文件读写注入而实现,要想上传webshell就得了解文件读写注入的原理。文件读写注入就是利用文件的读写权限进行注入&#xff0c;它可以写一句话木马&#xff0c;也可以读取文件系统的敏感信息。 文件读写注入的条件&#xff1a; 1.高版本的MYSQ…

Axure导入ElementUI元件库——提升原型设计效率与质量

在快速迭代的互联网产品开发过程中&#xff0c;高质量的原型设计是确保项目顺利进行的关键一步。Axure RP&#xff0c;作为一款强大的原型设计工具&#xff0c;以其丰富的交互功能和易用的界面设计&#xff0c;深受设计师和开发者的喜爱。而ElementUI&#xff0c;作为一套为开发…

Ubuntu配置carla docker环境

前言: 本文只在以下设备成功运行, 其他设备不保证能成功, 可以参考在自己设备进行配置 环境 ubuntu 20.04carla 0.9.15gpu 3060(notebook) 安装显卡驱动&nvidia-container-toolkit 显卡驱动 安装完成系统后直接在’软件和更新->附加驱动’直接选择470(proprietary…

工程化实践:工程配置化设计

文内项目 Github&#xff1a;XIAOJUSURVEY 配置化是很灵活且很常见的使用&#xff0c;那XIAOJUSURVEY里有哪些地方应用到了呢&#xff1f; 基础模板​ 问卷模板​ 在创建问卷时&#xff0c;我们提供了多种问卷类型选择&#xff0c;例如普通问卷、投票、报名、NPS等。 为了实…

安卓碎片Fragment

文章目录 Fragment的简单用法动态添加Fragment在Fragment中实现返回栈碎片与活动之间的通信 Fragment是一种可以嵌入在Activity当中的UI片段&#xff0c;它能让程序更加合理和充分地利用大屏幕的空间。 Fragment的简单用法 先建一个空的项目&#xff0c;然后创建两个fragment文…

单片机振荡电路晶振不起振原因分析与解决方法

晶发电子专注17年晶振生产,晶振产品包括石英晶体谐振器、振荡器、贴片晶振、32.768Khz时钟晶振、有源晶振、无源晶振等&#xff0c;产品性能稳定,品质过硬,价格好,交期快.国产晶振品牌您值得信赖的晶振供应商。 晶振在单片机系统中扮演着至关重要的角色&#xff0c;它为单片机提…

大模型分不清 9.9 与 9.11 谁大,那 Embedding 模型呢?

这是我今天在维也纳举行的 ICML 会议上被问到的问题。 在茶歇期间&#xff0c;一位 Jina 用户向我提出了一个源自 LLM 社区最近讨论的问题。他问我们 Jina Embeddings 能不能判断 9.11 比 9.9 更小&#xff0c;很多大模型在这个小问题上翻了车。 我说&#xff1a;“老实说&am…

Flink 实时数仓(七)【DWS 层搭建(一)流量域汇总表创建】

前言 今天开始 DWS 层的搭建&#xff0c;不知不觉又是周一&#xff0c;都忘了昨天是周末&#xff0c;近两年对我来说&#xff0c;周六日晚上八九点能打一小会篮球就算一周的休息了。不得不说自己真的是天生打工体质&#xff0c;每天不管多累&#xff0c;晚上十二点睡&#xff0…

SpringBoot自动配置和执行过程

Spring的执行流程 1. 加载容器&#xff08;加载配置文件&#xff09; 2. 根据配置完成Bean的初始化&#xff08;扫描配置范围内的五大类注解&#xff09; 3. 将被五大类注解修饰的类注册到Spring容器中 (将对象交给Spring IoC容器管理) 4.注入Bean对象&#xff08;Autowired、R…

Linux - - - Linux 添加环境变量

1.添加环境变量 编辑环境变量配置文件。 vim /etc/profile在最后面新增一行&#xff0c;导出 PATH 变量并在之前的 PATH 变量后面添加冒号&#xff0c;然后添加上你的可执行文件的目录。 export PATH$PATH:/usr/local/aspnetcore/aspnetcore-runtime-8.0.7-linux-x64/2.加载…

GD32 SPI 通信协议

1.0 SPI 简介 SPI是一种串行通信接口&#xff0c;相对于IIC而言SPI需要的信号线的个数多一点&#xff0c;时钟的信号是主机产生的。 MOSI&#xff1a;主机发送&#xff0c;从机接收 MISO&#xff1a;主机接收&#xff0c;从机发送 CS&#xff1a;表示的是片选信号 都是单向…

在线Banner设计工具大比拼:谁更胜一筹

在数字营销的时代&#xff0c;一个吸引眼球的 Banner 广告是吸引潜在客户、提高品牌知名度的关键。为了帮助营销人员和设计师快速创建专业的 Banner 广告&#xff0c;市面上出现了多种易于使用的 Banner 设计工具。本文将介绍几个受欢迎的 Banner 设计工具&#xff0c;包括即时…

路径规划——A*算法

路径规划——A*算法 算法原理 为了解决Dijkstra算法效率低的问题&#xff0c;A Star 算法作为一种启发式算法被提出。该算法在广度优先的基础上加入了一个估价函数。如BFS和常规方法如Dijsktra算法结合在一起的算法&#xff0c;有点不同的是&#xff0c;类似BFS的启发式经常给…