Vue+Springboot学习记录

目录

Vue基础

关键词概览：

前端工程化：

环境准备与项目创建：

浏览器使用：

Vue代码学习：

component模板

---

Vue基础

Vue的学习需要诸多基础：以html、css、javascript为三大主要基础。

关键词概览：

个人认为重点在js，html和css简单了解能看懂就行。js中需要学习JOSN、BOM、DOM、事件。

Vue是一个js的框架，简化了js的DOM操作。导入后可以使用Vue的语法实现js。

Ajax实现数据交换和异步请求，一般使用封装好的的Axios，简化操作。

Element基于Vue的桌面组件库，让后端人员可以实现简单的前端界面。

前端路由：URL中的hash（#号）与组件之间的对应关系。（VueRouter动态渲染组件）

1. 学习javaweb前端开发时了解基础的前端概念：
   1. HTML、CSS、Javascript
      • JSON:   JS对象标注，文本，多用于做数据载体
      • BOM（浏览器对象模型）、DOM（文档对象模型），通过这两种对象js可以和浏览器还有标记语言的各组成成分对话
   2. Vue 前端框架，免除js中DOM操作，化繁为简
      • Vue-cli一个脚手架工具，用于快速生成（项目地址：Vue项目D:\新生活\vue_springboot\vue-cli，课程：黑马程序员2023新版JavaWeb开发教程，实现javaweb企业开发全流程）
      • Element: Vue的组件库。基于Vue2.0的桌面组件库
   3. Ajax  异步js和XML 作用：数据交换，异步交互
      • Axios  对Ajax进行封装，化繁为简

前端工程化：

Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板.

环境准备与项目创建：

1. 安装node.js -- nodejs中文官网（环境变量自动配置，只需要cmd验证node -v）       
   1. npm config set prefix "nodejs的安装路径"(配置全局安装路径)
   2. npm config set registry https://registry.npm.taobao.org(切换npm淘宝镜像，加速下载)
2. 安装vue-cli     cmd命令：npm install -g @vue/cli   (vue --version验证安装)
3. 创建Vue项目:   cmd命令：vue ui 图形化界面创建项目
   1. 在要创建项目的文件夹打开CMD，执行上述命令打开vue图形化界面
   2. 点击创建，命名，包管理器选择npm，可以先不用初始化git仓库，手动预设模板，添加Router功能，Vue版本选择2，语法规范选则ESLint...（第一项）
   3. 使用vc打开文件夹内部文件如下

   4. 项目运行：项目根文件cmd命令： npm run serve

浏览器使用：

F12或右键点击查看打开控制台

主要板块：

• 元素Element：查看当前显示的基础代码
  • Css调试
    • 检查元素：
      • Ctrl+F搜索，文本查询、css选择器
      • console运行inspect（element），例如：inspect(document.getElementById("id名称"))
  • 编辑样式
    • 右侧Style栏，直接在第一个element.style内添加样式即可，看到喜欢的样式可以直接右键元素copy sytle复制到这里。
    • Style栏之后的是各个位置设置的样式，每个样式可以通过前面的复选框关闭
    • 勾掉栏头搜索栏右侧  .cls后修改的样式就只作用于选中元素，而不做用于所有属于该类的
    • computed面板可以以其它方式展现所有样式
• 控制台Console：辅助调试输出（Ctrl+shift+j）
  • 可以输入符合js语法的语句，和js文件里的执行结果是相同的
  • $_返回上一条语句执行的结果
  • $0返回上一个选择的元素（$1,$2...）
• 源代码Source：所有前端代码文件
  • Js调试
    • 源文件里写：debugger  运行到这里会暂停，可以从这里一步一步调试
    • 还可以直接在Tool 编辑栏直接打断点，在右侧也有各种类型的断点
    • 还可以在element版面节点上右键Break on选择断点类型
    • element版面直接打断点可以在右侧DOM break point 里看到
    • 右侧栏监视（Watch）可以添加变量，监视变量的值
    • 实用技巧
      • 使用Vue框架时，断点可能跑到Vue.js文件里面，我们不希望出现这种情况。在打开Vue.js时，右侧Call Stack栏右键，选择 Add script to ignore list。断点就会打在自己的文件里。
• 网络Network：查看响应和请求
  • 左上角按钮可以暂停监听，清空记录，记录所有历史记录（Prserve log）
  • 标头主要看请求标头和响应标头
    • 请求标头
      • 请求行（请求方式，资源路径，协议）
      • 请求头   键值对格式记录一些信息
      • 请求体   Post请求存放参数，大小无限制（get请求的参数在请求头的路径资源里）
    • 响应格式
      • 响应行（协议，状态码，描述）
        • 状态码
          • 1xx响应中
          • 2xx成功
          • 3xx重定向（自动访问别的服务器）
          • 4xx错误（客户端）
          • 5xx错误（服务端）
  • 载荷：记录参数
  • 响应：响应内容结果

Vue代码学习：

component模板

        创建一种组件，在html里可以直接当标签使用

       

let vm = new vue({
     components:{"c1",{template：“<div>i am c1<\dic>”}}
});

Vue里的使用

在.vue文件里：

        <script>引入其它Vue文件后在component里加入引入的名称，就可以在<template>里把这个元素当标签使用。

        注意命名规则:文件名和引入都使用驼峰命名，标签名小写，用 “-” 隔开。

<template>
    <new-component>
        
    <\new-component>
<\template>

<script>
    import NewComponent form "./NewComponent.vue";

    export default{
    data():{...},
    methods:{...},
    components:{
        NewComponent,
    }
};
<\script>

Src中component和view 的区别：

View 文件夹中存放应用程序中的页面，通常通过Router实现路由功能。作用是控制路由、获取数据和协调组件之间的交互。

Component文件夹中存放可重用的组件。主要负责UI渲染和逻辑，通常不会控制路由和获取数据，而是接受来自View和其它组件的数据进行渲染。作用是封装可重用组件。