学习Vue

拾光2025-07-302025-08-03

文件上传

1.创建一个表单并添加一个文件输入控件，例如使用input type=”file”元素。
2.监听文件选择事件，获取用户选择的文件，并将其存储在Vue组件的data属性中。
3.通过FormData（表单数据对象）来构造包含上传文件的表单数据。
4.发送POST请求到服务器，携带表单数据，以此来完成文件上传操作。
后端，我们使用了Spring Boot框架和Spring MVC来处理文件上传。通过@RequestParam注解来获取上传的文件，MultipartFile对象包含了文件的各种信息和操作方法。我们使用getBytes()方法获取文件的字节数组，然后使用Files.write()方法将文件写入目标路径。

vue封装数据发送后台

// 可以使用将数据转换为JSON格式或者使用FormData对象封装数据(键值对)键对应后台的实体类,值前端要传入后台的值
  JSON: const data = { name: 'John', age: 25 };
  JSON.stringify(data) 
 
  FormData: const formData = new FormData(); 
  formData.append('name', 'John'); 
  formData.append('age', 25);

vue生命周期

1.beforeCreate：实例刚被创建，数据观测和事件配置之前，此时无法访问到data和methods等实例属性。
2.created：实例已经被创建，数据观测和事件配置完成，此时可以访问到data和methods等实例属性，但未挂载到DOM上。
3.beforeMount：在挂载开始之前被调用，此时模板编译已完成，但DOM还未生成。
4.mounted：实例已经挂载到DOM上，此时可以对DOM进行操作，访问到挂载的元素。
5.beforeUpdate：数据更新时，重新渲染之前被调用，此时数据已经更新，但DOM尚未重新渲染。
6.updated：数据更新并且DOM重新渲染完成后被调用。
7.beforeDestroy：实例销毁之前被调用，此时实例仍然完全可用。
8.destroyed：实例销毁后被调用，此时实例及其所有的事件监听器和观察者都被移除。
9.beforeCreate和created钩子函数会在组件实例化之前执行；
10.beforeDestroy和destroyed钩子函数会在组件销毁之前执行。

More info: Server