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

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

先创建项目文件

在这里插入图片描述

用vscode打开并下载依赖

在这里插入图片描述

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

例如 “^5.2.0”第一位是大版本号，第二位是小版本号，最后一位是补丁号

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

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

vue框架的结构介绍

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

综合案例理解语法使用

整体代码如下：

<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）如何定义列表并循环遍历取出值呢？

<template>
<div v-for="(item, index) in ls">元素是：{{item}}，下标是：{{index}}</div>
</template>

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

4）如何定义判断语句

<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>