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&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716971998&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)打开浏览器找到你喜欢的图片