通过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)打开浏览器找到你喜欢的图片

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端