bestvike study 4 --自学vue2.0_vue实现beyond compare-CSDN博客

本文介绍了Vue的基本使用，包括组件的创建、文本插值与属性绑定的双向数据绑定，条件渲染的应用，以及如何使用axios进行网络请求（包括跨域配置和示例）。此外，还讲解了Vue-Router路由管理和Vuex状态管理库的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

vue基本使用方式

vue 组件

在这里插入图片描述

文本插值

在这里插入图片描述

属性绑定

在这里插入图片描述

事件绑定

在这里插入图片描述

双向绑定

假如说输入框里的值改变，那么说name的值就发生改变，如果此时文件（不限于此代码存在的vue文件）中有{{name}}，那么在页面上展示的内容也将会改变，这就实现了双向数据绑定
在这里插入图片描述

条件渲染

在这里插入图片描述
就是假设或一个员工的信息有姓名年龄性别等，是一个json数据格式，然后根据这个信息可以动态展示到界面上。
这个员工的员工信息就是在data函数里面

axios

Axios 是一个基于 promise 的 == 网络请求库 ==，作用于浏览器和 node.js 中

import axios from 'axios'

方括号是可选参数
在这里插入图片描述
为了解决跨域问题，可以在 vue.config.js 文件中配置代理：
意思就是前端的地址要跨域访问另一个地址后端，如果不配置代理后端是收不到请求的，需要配置代理，

axios 的post 方法示例：
这个就是在HelloWorld.vue文件中的script中methods中的某个函数中写，
这个函数是在该文件的template中的某个按钮中的@click的值
在这里插入图片描述
F12可以在网页看调试，如果运行失败
首先是Network网络交互方面，可以看到红的的报错，然后是Console可以看到具体的报错信息请添加图片描述
如果运行成功
Console可以看到具体的值（因为上面蓝色部分）信息传过来了

Network网络交互方面，可以看到发送请求的url是前端的端口以及有“/api”

最终可以看到tomcat服务器（Preview）也返回了数据

axios 的get 方法示例：（401，tomcat服务器发出的问题，校验码问题）
在这里插入图片描述
config对象就是一个json对象