当前位置：首页 > article >正文

JAVA开发学习Day8

article 2025/1/9 5:15:53

vue应用创建

什么是vue？
官网的介绍为vue是一款用于构建用户界面的JavaScript框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

渐进式框架
vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但Web世界时十分多样化的，

如何创建一个vue应用？
首先，你要熟悉命令行，之后要有node.js ，官网上是可以下载的。安装完成后可以用下面的命令来查看一下版本号，以确保安装完成。
在这里插入图片描述

之后我们在一个项目目录中打开命令行，然后输入以下命令，

npm create vue@latest

执行上述代码可能会出现这样的报错：

npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息

这是因为PowerShell的执行策略限制导致的，在某些系统上PowerShell就会禁止运行脚本，我们可以在电脑的搜索栏搜索PowerShell，然后以管理员身份运行，在PowerShell的窗口中修改执行策略。

set-ExecutionPolicy RemoteSigned

在这里插入图片描述
查看一下是否设置成功：

在这里插入图片描述
这样的话，上述命令就可以使用了。
之后按照下面的图片操作即可

如果进入这个界面，但是等了很长时间发现没有往下进行的话，可能是npm不是国内镜像的原因，导致安装失败，会有很多network的问题，建议改一下国内镜像，输入以下命令查看是否为国内镜像。

npm config get registry

如果出现下面的情况说明是国内镜像，
在这里插入图片描述
如果不是，那就更改一下：

npm config set registry=https://registry.npmmirror.com

//执行以下查看配置是否成功
npm config get registry

之后接着执行上面的命令，
在这里插入图片描述

然后执行

npm run build

在这里插入图片描述

复制Local的网址，打开，我们的这个vue应用就算创建成功了。

在这里插入图片描述

vue模板语法

打开你的项目所在文件，然后用vscode打开，记住vscode要用管理员身份打开，然后将项目文件拖拽进去就可以，此时vscode会提示你下载一个插件，那个插件是vue-official，下载即可。

我们可以在vscode的终端执行“npm run dev”命令，如下图所示：
在这里插入图片描述

简要介绍一下目录文件结构：

.vscode：配置文件
node_modules：项目运行的依赖
public：浏览器显示的那个小图标
src：源文件
index.html：是一个入口的html，没有明确访问某个页面时，默认访问这个页面
package.json：是对项目的一些描述
.md：是一个注释文件，里面的东西是被注释掉的
vite.config.js：是vue的一些相关配置

可以在App.vue里编写我们的代码，该文件里面的内容可以全部去掉，之后就在这里编写代码，

模板语法

使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。

template标签是html的容器，关于html的代码可以写在template标签内，除此之外，还需要script标签，也是类似于javascript的script标签，两者顺序谁在前谁在后都是可以的。
在这里插入图片描述
我们可以在template标签里写一个p标签，可以返回前端页面查看是否有显示：

此时的页面是写死的，并不能做出更改，如果想要动态的呢？

文本插值

最基本的数据形式是文本插值，它使用双大括号，将后端数据库的数据传到前端，当然了，我们现在并没有连接后端，但我们可以创造一些数据，就像script标签里写的：

  export default {
    data() {
      return {
        msg:"Hello World!",
        code:"这里是模板语法"
      }
    }
  }

两个大括号里的msg和code会被替换成对应的值，当值改变时，两个大括号内的值也会同步改变
在这里插入图片描述

两个大括号不一定只能传送数据，还可以做一些简单的逻辑，例如做一些简单的加减乘除的运算，主要是return能够返回的数据，就可以这样写。

<template>
	<p>{{ number + 1 }}</p>
</template>

<script>
	number:20,
</script>

在这里插入图片描述

还可以用三目运算符做一个简单的逻辑判断，

<template>
<p>{{ ok ? 'yes' : 'no' }}</p>
</template>

<script>
ok:true;
</script>

在这里插入图片描述
字符串的截取，只要是return能够返回的数据，都可以这样操作。

<template>
	<!-- 截取 (0,4) -->
	<p>{{ msg.substring(0,4) }}</p>
  </template>

在这里插入图片描述
要注意：这里的值是可以被return返回的值，如果是赋值、逻辑判断之类的都是不可以的。

以上都是传文本，那么可不可以传html呢？

<template>
	<p>{{ towebsite }}</p>
  </template>
  
<script>
 towebsite:"<a href='https://www.baidu.com/'>点击跳转百度</a>"
</script>

在这里插入图片描述
我们尝试在script直接加html标签，但是数据还是以文本的形式传过来了，并没有解析html标签，那如果想要传html要怎么办呢？
我们可以增加一条指令，这条指令是：

v-html=""

写法如下：

<template>
	<p v-html="towebsite"></p>
</template>

<script>
	towebsite:"<a href='https://www.baidu.com/'>点击跳转百度</a>"
</script>

在这里插入图片描述
可以看到，点击跳转百度已经成为了一个链接，html被成功解析。

属性绑定

属性在标签里就可以设置，只不过是写死的，不够灵活，在某些场景下，属性值会发生改变，属性绑定就可以只修改属性值，更加方便和灵活。

那么设置了样式，能不能在class后面用两个大括号直接引用呢？

<template>
  <h1>属性绑定</h1>
  <p class="{{ dynamicClass }}">测试</p>
</template>

<script>
  export default {
    data() {
      return {
        dynamicClass: "a",
        dynamicId: "lsa"
      }
    }
  }
</script>

其实结果是不行的，看下图：我们看到的结果是class里面的内容是两个大括号以及里面的所有内容，并不是引用了我们想要的属性。如果去掉双引号，其实结果是一样的，不能引用我们想要的属性。
在这里插入图片描述
那我们该怎么办？参考一下上面的v-html指令，我们也可以使用一个指令来得到我们想要的属性值，

<p v-bind:class="dynamicClass">测试</p>

利用这个命令后，我们终于得到了我们想要的属性值。
在这里插入图片描述
如果加一些样式，更改样式的时候也会很方便，

<style>
  .a {
    background: red;
  }

  .b {
    background: yellow;
  }

</style>

在这里插入图片描述
如果要加id，也是相同的操作

<p v-bind:class="dynamicClass" v-bind:id="dynamicId">测试</p>

可以看到id的值也拿到了
在这里插入图片描述
如果class的值为空呢？那么在前端显示就是空，什么也没有，如下图：

<template>
	<p v-bind:class="msg">测试</p>
</template>

<script>
	msg:null
</script>

在这里插入图片描述
还有一种值叫布尔类型的值，一般用于按钮，

<button disabled>按钮</button>

disabled是按钮禁用的意思，如果你加了disabled，那么就是禁用按钮，其值为trrue，默认不加就是false，
在这里插入图片描述
当然了，布尔类型的也可以按照上述绑定规则绑定。

如果我们想要绑定多个属性，可以考虑用数组，但是数组太不方便了，所以我们就像javascript里面的那样用对象来尝试一下

<template>
  <p v-bind="dynamicArrs">测试</p>
</template>

<script>
  export default {
    data() {
      return {
        dynamicArrs: {
          className:"aa",
          idName:"bb",
          index:"xx",
        }

      }
    }
  }
</script>

可以看到，我们设置的多个属性全部传过来了
在这里插入图片描述

条件渲染

通过一些条件判断来确定我们选中的一些内容要不要做渲染，我们先来个标签：
在这里插入图片描述
这里使用的指令是v-if，我们定义一个flag让它的值为true，其标签还是能正常看到，

<template>
	<div v-if="flag">看得到我吗？</div>
</template>

<script>
	flag:true,
</script>

在这里插入图片描述
如果flag是false，那么就不能看到了。
这里的条件判断与平时编程的逻辑很类似，如下图：

<template>
	<div v-if="flag">看得到我吗？</div>
 	<div v-else="flag">看不见就看这里吧</div>
</template>

在这里插入图片描述
因为flag的值是false，所以if那一个标签就被隐藏了，而else那一个标签就显示出来了，如果flag的值是true，结果正好相反。我们可以利用这些做一些逻辑判断，

<template>
 <div v-if="msg=='a'">hello1</div>
  <div v-else-if="msg=='b'">hello2</div>
  <div v-else-if="msg=='c'">hello3</div>
  <div v-else-if="msg=='d'">hello4</div>
  <div v-else="msg">hello5</div>
</template>

<script>
	msg:"c"
</script>

在这里插入图片描述
除了以上控制逻辑以外，还有一条指令也可以做到上述的要求：

<template>
<div v-show="flag"></div>
</template>

当v-show的值为false时，div也是不显示的，但是跟上面有什么不同呢？
上面的逻辑判断是不渲染div标签，而v-show是会把div标签渲染出来，但是只是改变了样式，下图中也可以看到，所以我们就看不见div标签了
在这里插入图片描述
如果是经常需要更改显示和不显示，一般用v-show比较好。

列表渲染

上述我们操作的都是字符或者字符串，如果遇到大量的数据，例如数组，对象，那又该怎么办呢？我想把某位学生的爱好展示到页面，如何展示？

我们用v-for这个指令来实现：

 <template>
<div v-for="item in arr">{{ item }}</div>
<!-- 其中item指的是数组中的每一项，用其他字母表示也可以，in后面arr是要遍历的数组-->
</template>


<script>
	arr:["足球","篮球","乒乓球","羽毛球"]
</script>