java学习 day8

首先在main.js里面new 一个vue对象，然后router 指定路由，redner 是把import 过来的的app.vue页面做一个视图渲染让他变成dom(从静态的vue变成活的dom树).然底下mount是挂载的意思，就是把挂在id=app的html页面也就是index.html页面。打包只需点击build就可以了。这张图解决了之前困扰我已久的一个疑惑，就是异步交互，之前刷油管，我想要

2301_79267486

518人浏览 · 2026-01-09 14:53:14

2301_79267486 · 2026-01-09 14:53:14 发布

这次是对vue前端知识的完结，包括前面的补充，我全程跟着黑马敲了一遍。写下了如下笔记
感觉还是得学一些前端知识，不用会敲，但至少要能看懂。
通过这次学习我们要简单了解一下 vue ajax 和 element 组件的一些知识

其实这里说是说到了视图模型，但其实真正在开发的时候，我们在vue只看到了数据模型和视图层之间的双向绑定交互而已。

首先vue 本质上是一个javascript库，所以要用script标签括起来，具有双向绑定的特点。
上面这个文件是一个html文件，
简单来说：这也是 Vue，但这是 Vue 最原始、最基础的“传统”用法。

之所以这里还有 <script> 标签，是因为这段代码写在一个标准的 .html 文件里，而不是 .vue 文件里。script里面vue 里面叫数据模型
下面列出一些常见指令

v-Bind是绑定标签属性 {{}}}插值表达式是写在标签内容中的

<div title="这是提示信息"> 这是一个盒子 </div>

title="这是提示信息" 是什么？
这是一个盒子 是什么？

(心里有答案了吗？答案是：1是属性，2是内容。)
然后通过v-bind或者v-model绑定的变量一定要在数据模型中声明。（简洁来说变量必须得在script里面声明）然后v-bind是单项绑定，v-model是双向绑定，其他没啥区别

还有渲染就是在前端开发中，“渲染”（Rendering）指的是：浏览器将代码（HTML/CSS/JS）解析并转换为屏幕上可见像素的过程。其实通俗来说就是浏览器在画画，把这些东西画出来。

这你就把他当作for循环就好了，一般用整个来遍历数组，然后这个一般是写在视图里面，然后真正的数组其实在script标签里面的

<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>

这里拿到真正的数组，emps，this.emps = result.data.data;是给数组赋值，给他赋从axios响应拿到的值，然后还得data里面声明数组整个变量。
然后视图里面就用v-for 调用这个数组为了最后在前端渲染展示。


            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>

对java程序员来说我们只需要关注mounted这个生命周期，这个生命周期通常是放axios的

在vue的mounted钩子函数，编写Ajax请求，请求数据，代码如下：

mounted () {
    //发送异步请求,加载数据
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        
    })
}

他的作用就是我们一访问这个页面，vue的生命周期就会开始，执行这个mounted函数，axios就会自动进行这个异步请求的操作，然后我们在处理这些数据，把这些数据写到视图层，最后我们看到的效果，就是一个带有这些数据的一个前端页面

接下来我们来到ajax的讲解

这张图解决了之前困扰我已久的一个疑惑，就是异步交互，之前刷油管，我想要一个不刷新整个页面的局部刷新按钮，其实用的就是异步交互，但是油管并没有这个功能，其实用ajax 就可以实现。

同步就是访问一个服务器，必须要等待服务器的响应，才能做接下来的操作

异步就是访问一个服务器，在得到响应之前，可以进行接下来的操作
但是ajax太麻烦
所以只需要用axios

使用axios之前，我们需要引用一个官方提供好的js文件导入到vscode 里面，这里黑马的服务器挂了，所以我自己去mock一个服务器。所以我们要利用yapi给我们提供的mock服务，生成接口的模拟测试数据，用于模拟前端功能测试。然后发现yapi很卡，于是换了同样作为接口平台的apifox。

在这里甚至能设置ip条件，和参数条件

然后我还发现在apifox中
这些填写的必须只是给我们看的，实际上并不是必须的，真必须还得要从期望那里改

然后之前我在那设置响应的和请求的数据都是虚的，只是看看而已，只有在这里改才真的是改了。

然后这里有一个问题，就是我们可以在里面添加多个期望，如果重复了怎么办?

在 Apifox 中，当多个 Mock 期望（Expectation）可能同时匹配一个请求时，选择的规则非常简单：“从上到下，匹配即停止”（Priority by Order）。

然后介绍一款前后端接口管理平台

mock 是指即使后端人员还没有完成对接口开发，前端利用这个yapi进行模拟测试。
然后正常写vue并不是向前面引入一个vue.js 文件，然后再从html里面应用这个vue.js 这也太原始了。

我们一般是需要进行前端工程化

需要一些工具 vue-cli 和node.js

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli，然后js 一般是只能在浏览器运行的，安装了这个nodejs 就可以在本地运行了。
一般是通过一句话概括： 你需要依赖 Node.js 环境来运行 Vue-cli 工具，然后用这个工具快速生成一套标准的 项目脚手架，以此开始你的开发工作。
我还了解到一个很有意思的东西，vue 的包管理工具叫npm，而java 包管理工具是maven 两个逻辑是差不多的，可以类比学习。

然后想要调用图形化界面直接输入 vue ui 即可

如下图所示，这个这就是所谓的cli的图形化界面，我们直接在这里创建项目即可

选择手动然后选择我们之后要用到的路由功能

然后这里可以选择版本，我们学习先选vue2.0版本
下面语法检测选第一个就好了

当我们点击创建一个项目时候，你会发现命令行正在联网下载

这些部分有个印象就行

我在这里简单说一下vue的工作原理

首先在main.js里面new 一个vue对象，然后router 指定路由，redner 是把import 过来的的app.vue页面做一个视图渲染让他变成dom(从静态的vue变成活的dom树).然底下mount是挂载的意思，就是把挂在id=app的html页面也就是index.html页面

可以看到我们在index.html确实引用了Id=app 所以之后可以在index.html页面显示

还有就是我们在app.vue不是被main.js 给import了吗，其实这里有一个细节，只有我们在script里面写这个export导出，别的地方才能导入app.vue

接下来来到element组件库的补充

注意:比如views视图组件(页面)都必须在根组件里面引用才有用

下图展示了如何快速入门element组件库

注意这里有一个前端快捷键小技巧 CTRL +alt+L 进行格式化(但是我的vscode 是 shift +alt + f)，就是你复制过来在你的编译器里面可能会非常乱，可以用这个快捷键进行格式化。
接下来补充一个前端困惑我已久的概念

外层容器，内层容器，以及内容之间的关系

我们在浏览器里看到的画面，其实是一层一层叠起来的纸，你是从正上方往下看的。

我来帮你拆解这“三层纸”：

第一层：外层容器（底板纸）

想象一下： 这是一张很大的灰色卡纸，铺在最底下。
它的作用： 它是背景，也是地基。
你能看到它吗？

- 如果你上面什么都不放，你看到的就是一大片灰。
- 如果你往上面放了东西，你就能在东西的边缘看到露出来的灰色。

第二层：内层容器（白纸）

想象一下： 这是一张稍微小一点的白纸，被你用胶水贴在了那张灰色卡纸（外层）的中间。
它的作用： 它是用来写字的区域。为了好看，我们不想直接在灰色底板上写字，所以贴了一张白纸。
你能看到它吗？

- 能。你看到的是灰色底板上贴着一张白纸。
- 因为白纸比底板小（或者留了边距），所以白纸周围有一圈灰色的边框（那就是外层容器露出来的部分）。

第三层：内容（字和图片）

想象一下： 这是你用笔写在白纸上的字，或者贴在白纸上的贴纸（按钮、图片）。
它的作用： 这就是用户要看的信息。
你能看到它吗？

- 能。字是写在白纸上的，白纸是贴在灰底板上的。

所以，我们看到的究竟是什么？

结论：你看到的是一个“俯视图”。

你同时看到了这三样东西，只是它们有前后遮挡关系：

最上面是字（内容）。
字底下衬着白纸（内层容器）。
白纸底下衬着灰卡纸（外层容器）。

然后外边距，内边距在这个例子里面分别又指代什么

1. 内边距 (Padding)：白纸内部的“留白”

场景： 现在你手里拿着那张白纸，准备往上面写字。

如果没有内边距 (padding: 0)：你会从白纸的最左上角开始写，字会紧紧贴着白纸的边缘。看起来非常拥挤，甚至字的一半可能会被裁掉。

视觉效果： 字顶着白纸的边。

如果有内边距 (padding: 20px)：你决定不从边缘写，而是往里缩 20px 再开始写。

视觉效果： 字的周围多了一圈白色的空白区域。 关键点： 这圈空白是属于白纸（内层容器）的一部分，所以它显示的是白色。

总结：Padding 撑大了你的肚子（白纸变大了），让里面的内容（字）舒服一点。

2. 外边距 (Margin)：白纸和桌子的“距离”（这里把刚刚的灰色纸换成了灰色桌子）

场景： 现在字写好了，你要把这张白纸放到灰桌子上。

如果没有外边距 (margin: 0)：你把白纸直接怼到了桌子的左上角。白纸的左边和上边，紧紧贴着桌子的左边和上边。

视觉效果： 白纸贴着墙角。

如果有外边距 (margin: 20px)：你说：“这张纸离桌子边缘太近了，难看。” 于是你把白纸往右下角推了 20px。

视觉效果： 白纸和桌子边缘之间产生了一条缝隙。 关键点： 这条缝隙里没有白纸，所以露出了底下的灰色桌子（外层容器）。

总结：Margin 是你的“私人空间”，用来推开外界（外层容器或其他元素），露出了底色。

然后再element 里面这里所谓的顶栏容器，侧边栏容器，主要区域容器，底栏容器都是内层容器

需要说明的是这种.vue文件是在vue中称他们为组件，然后app.vue是根组件，我们以后基本不会在根组件引用写

页面，以后我们写的组件基本都是在views里面，所以我们需要在app.vue根组件里面引用views文件夹里面的element.vue
我们只需要在template里面输入

选第一个之后就会自动帮我们引用element.vue这个文件

然后有一个很有意思细节，在vue起名必须得是这种ElemntView 这种驼峰结构，Element这种只有一个大写字母反而会报错引用之后你还得添加一个component。

然后我们学习到对事件的处理方法，要理解事件处理函数，和回调参数
事件就是你每次点击，或者悬停等这就是一个事件
处理函数 (你在 methods 里写的函数

回调的意思是回头再调用的参数，就是和我们直接写的函数不一样，打开就开始运行，他这个是等待事件触发后，回头再调用这个处理函数，这个回头再调用函数里面的参数就叫回调参数。注意并不是字面意思把参数掉回去，之前一直理解错了

然后对话框是点击之后弹出来的，这里我们可以在对话框里面再引用表单。
因为我们想实现点击之后弹出来一个form 表单（form 表单是可以提交（submit）数据的那种表单）
所以我们需要先写一个对话框，然后在对话框里面嵌套这个表单最后就可以实现，点击之后弹出一个表单的效果。
然这里要注意