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

相关推荐
草莓熊Lotso7 分钟前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
JS.Huang13 分钟前
【JavaScript】原生函数
开发语言·javascript·ecmascript
Olrookie20 分钟前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
请你喝好果汁64129 分钟前
Conda_bashrc 初始化机制学习笔记
笔记·学习·conda
533_1 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
CoderCodingNo1 小时前
【GESP】C++五级考试大纲知识点梳理, (5) 算法复杂度估算(多项式、对数)
开发语言·c++·算法
maxruan1 小时前
PyTorch学习
人工智能·pytorch·python·学习
故事与他6451 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
MYX_3092 小时前
第三章 线型神经网络
深度学习·神经网络·学习·算法
_李小白2 小时前
【Android Gradle学习笔记】第八天:NDK的使用
android·笔记·学习