通过window的bash创建vue架构的项目文件,如何不用下载即可引用想要的图片

win+r 通过window的bash创建vue架构的项目文件

先创建项目文件

用vscode打开并下载依赖

关于安装包版本小知识补充

例如 "^5.2.0"第一位是大版本号,第二位是小版本号,最后一位是补丁号

"^"尖括号指限定了只能下载大版本号为5的版本

"~4.17.21" 其中"~" 波浪号限制版本必须是大版本号为4,小版本号为14的版本才能符合要求

vue框架的结构介绍

vue 复制代码
<template> 里面写组件结构,也就是网页html类似</template>
<script> 里面写JavaScript语法的脚本和逻辑</script>
<style> 里面写样式,css,标签样式,class、id等</style>

综合案例理解语法使用

整体代码如下:

vue 复制代码
<template>
<div class="background-image">
<a><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F23%2F20190723103238_m2a3U.thumb.400_0.gif&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1716971998&amp;t=637710262bb27a1fbf086f77ba0db982" alt=""></a>
<h1 class="jump-effect">{{ web }}</h1>

<a v-bind:href="url">这是一个连接{{urlname}} <img src=""></a>
<div>
<button @click="tobaidu" >百度</button>
<button @click="tobing">bing</button>
<div v-for="(item, index) in ls" >元素是:{{item}},下标是:{{index}}</div>

<div v-if="cond">点击我,我会消失,再点击我,我会出现!!!</div>
<button @click="control">条件控制</button>
</div>
</div>
</template>

<script setup>

import { ref } from 'vue';
const web="Welecome to MyWeb"
const url=ref("https://www.baidu.com")


const tobaidu = () =>{
  url.value = "https://www.baidu.com";
}
const tobing = () =>{
  url.value = "https://www.bing.com";
}
const ls = ["a", "b", "c"]

const cond = ref(true);
const control = () =>{
  cond.value = !cond.value;
}

</script>

<style>
button{
  background-color: darkgrey;
  margin: 10px;
}
a{
  font-size: 30px;
}
h1{
  font-family: 华文彩云;
  color: rebeccapurple;
  font-size: 150px;
}
.background-image{
  background-image: 
   url(https://img.soogif.com/14001e1Y5aCB7qL8aPhjGEVoK1i2Tekk.gif);

  background-size: 100%;
  background-repeat: no-repeat;
}
.jump-effect {
    display: inline-block;
    animation: jump 1s infinite;
  }
 
  @keyframes jump {
    0%, 100% { opacity: 0; transform: translateY(-10px); }
    50% { opacity: 1; transform: translateY(0); }
  }
  .text-container {
  opacity: 0;
  transition: opacity 0.2s;
}
</style>

效果如下:

逐个击破

1)从vue2过度到vue3要怎么写?

2)@click是什么鬼?

3)如何定义列表并循环遍历取出值呢?

vue 复制代码
<template>
<div v-for="(item, index) in ls">元素是:{{item}},下标是:{{index}}</div>
</template>

<script>
const ls = ["a", "b", "c"] /* 和Python中很相似!
</script>

4)如何定义判断语句

vue 复制代码
<template>
<div v-if="cond">点击我,我会消失,再点击我,我会出现!!!</div> 
/* 既然是被点击,才会生效,那么肯定得有一个,接收并发出用户点击的信号 */
<button @click="control">条件控制</button>
</template>

<script>
/* 这里设置了if的条件为真,那么就会执行后面的代码,将点击我,我会消失,再点击我,我会出现!!!显示出来*/
const cond = ref(true) ;
/* 实现点击一次显示,再点击一次消失的效果,就是让条件变为false */
const control = () =>{
    cond.value =!cond.value;  
}
/* 其中cond.value, value的作用是获取cond的值 */
</script>

如何在网络上直接使用图片,而无需下载?

这里我们使用谷歌浏览器作为演示

1)打开浏览器找到你喜欢的图片

相关推荐
小希爸爸4 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.7 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
码起来呗9 分钟前
基于SpringBoot的高校学习讲座预约系统-项目分享
spring boot·后端·学习
坐吃山猪12 分钟前
Python-Agent调用多个Server-FastAPI版本
开发语言·python·fastapi
uhakadotcom13 分钟前
Fluid:云原生数据加速与管理的简单入门与实战
前端
Yurko1313 分钟前
【C语言】全局变量、静态本地变量
c语言·学习
88号技师13 分钟前
【1区SCI】Fusion entropy融合熵,多尺度,复合多尺度、时移多尺度、层次 + 故障识别、诊断-matlab代码
开发语言·机器学习·matlab·时序分析·故障诊断·信息熵·特征提取
凉豆菌23 分钟前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司24 分钟前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
北漂老男孩29 分钟前
Java对象转换的多种实现方式
java·开发语言