2021/11/16

2021/11/16

今天看到了一段很重要的话：前端只有清楚了业务流程，才能合理判定页面之间如何进行跳转，用户交互何时响应。
和后端对接接口的时候，需要哪些字段，字段类型是什么，有可能前端比后端更了解业务。

（也就是说，这些是我现在最需要去学的东西）

先学习页面跳转：.htm
（这个涉及路由配置。不难）.html#:~:text=Vue%E8%B7%AF%E7%94%B1%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F%EF%BC%88router-link%E5%92%8CJS%EF%BC%89%201%E3%80%81%E9%80%9A%E8%BF%87%20%3Crouter-link%3E%20%E5%AE%9E%E7%8E%B0,%3Crouter-link%3E%20%E7%BB%84%E4%BB%B6%E7%94%A8%E4%BA%8E%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E5%AF%BC%E8%88%AA%E9%93%BE%E6%8E%A5%EF%BC%8C%E5%88%87%E6%8D%A2%E4%B8%8D%E5%90%8C%20HTML%20%E5%86%85%E5%AE%B9
****知道vue页面跳转有两种方式，一种是，一种是this. r o u t e r . p u s h 带 参 数 ： p a r a m s , q u e r y 还 有 一 种 特 殊 的 ， t h i s . router.push 带参数：params,query 还有一种特殊的，this. router.push带参数：params,query还有一种特殊的&#(1) 前进一页 this. r o u t e r . g o ( − 1 ) 后 退 一 页 ∗ ∗ ∗ ∗ 总 结 一 下 ： 现 在 学 了 v u e 的 传 参 和 接 收 参 数 ， 首 先 是 传 参 ， 传 参 是 r o u t e r , 有 < r o u t e r − l i n k > 还 有 t h i s . (-1) 后退一页**** 总结一下：现在学了vue的传参和接收参数，首先是传参，传参是router,有<router-link>还有this. (−1)后退一页∗∗∗∗总结一下：现在学了vue的传参和接收参数，首先是传参，传参是router,有<router−link>还有uter.push,关于query和params的区别，
path和query匹配，name和params匹配，query传参的话地址栏是看不到参数的，params传参的话地址栏是可以看到参数的。
接着是接收参数，接收参数用的是route,而不是router,就是通过this. r o u t e . p a r a m s . 参 数 名 还 有 t h i s . route.params.参数名还有this. route.params.参数名还有ute.query.参数名。

额外的，this. x x ， 现 在 明 白 了 ， 获 取 的 是 v u e 实 例 关 联 的 d o m 元 素 。 （ 当 然 也 有 一 些 是 系 统 定 义 的 属 性 ， 比 如 t h i s . xx，现在明白了，获取的是vue实例关联的dom元素。（当然也有一些是系统定义的属性，比如this. xx，现在明白了，获取的是vue实例关联的dom元素。（当然也有一些是系统定义的属性，比如ssage)
this. e l 关 联 的 是 真 实 d o m 。 获 取 页 面 中 所 有 含 有 r e f 属 性 的 D O M 元 素 （ 如 v m . el关联的是真实dom。 获取页面中所有含有ref属性的DOM元素（如vm. el关联的是真实dom。获取页面中所有含有ref属性的DOM元素（如vm.refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）
例子：.html
这个案例讲了this. o p t i o n s ( 获 取 自 定 义 属 性 ） , t h i s . options(获取自定义属性）,this. options(获取自定义属性）,fs,this. d a t a 等 。 关 于 一 些 常 用 的 系 统 data等。 关于一些常用的系统 data等。关于一些常用的系统，这个有写：

关于项目（axios) :之前一直不知道这个项目是怎么样的，现在才知道是通过request.js,然后被封装在api接口，也就是说，获取后端的接口的
那些方法已经写出来了，以后要获取后端数据就是通过api去获取，api就是封装好的axios，不用想太复杂。
request.js已经是封装了axios请求了，也是给请求头设置token等配置，请求拦截的地方，后面又被封装在api接口，可以说无需我们考虑了。
总结一下，request是ate出来的，request()括号内可以放置路径，可以放置参数，在后端api接口被getData封装（在api的那个路径是后端的路径），后续在vue页面中，
就可以直接通过getData方法，传递参数，获取then(data=>)了。
也就是三层，从util/request.js被封装到api的getData中，然后再被拿到vue文件中使用。
每个文件各司其职，request.js是用来封装axios的，api的getData是主要处理后端接口的（也就是说写了后端端口是什么样的路径），vue文件主要是通过参数获取后端数据的。vue文件是最外层，也就是最大的那一层，包含着下面两层。

（包含其实就是封装，但是我觉得包含更好理解一点）

主要做的还是那些，知道后端有哪些字段，可以获得什么数据。

vue表单方面的知识还是不大会。先攒着。

关于export default:export default xx ,import无需{}，且可以通过任意变量接收。（这个是看了那个request.js文件得来的）
{
现在是表单方面，先看了一下表单校验。
链接：.html
首先是v-model,都是字段。（赋值的地方用v-model)
关于@submit,当值为true时就可以完成提交，当e.preventDefault()时，就不可以完成提交。即@submit，就是所谓的表单校验。
设置自定义邮箱校验的时候，要在表单添加 novalidate=“true”

单个复选框，绑定到布尔值，多个复选框，绑定到数组。
v-model写在中。
v-model的值 就是 v-bind:value。
用computed属性的好处是，当你直接用变量属性的时候就是使用它的时候，（某种意义上也算是一种调用吧）

注意：在element-ui框架中，字段用的是prop属性，而不是v-model属性。
rules属性传入验证的规则，原先的表单，验证规则是写在submit里面的，但是现在是写在rules里的。rules里面写的是对每个字段的规则。

也就是说rules与prop相对应。

关于element-ui表单验证规则在这个链接可以看的：

看表单的代码还是得从官网看，尤其是自定义这块，地址：

就发现了自定义验证有两种吧，一种是全局，一种是个别，像个别的，在rules里就有写一个validator:xx
然后通过var xx = (rule,value,callback)=>{if(value) 来完成检验。个别每一个都需要有callback。这是重点。
像是全局的，那就是submitForm(formName){this.$refs[formName].validate((valid)=>{ —
if(valid) alert(‘submit’)–这个就是成功提交后的。
全局的代码好像是固定的吧，没什么，理解清楚就行。
}

下午：
$t是i18n提供的全局方法。可以实现中英文切换。其实本质就是个文本而已啦。只是这个文本可以是中文也可以是英文。
然后位置在src/i18n/langs/en.js还有src/i18n/lang/zh.js
以变量的形式存储文本。
总之是很容易的一个知识点。

关于 render:h=>h(App) h的意思就是说生成html结构的script代码。

看一下account.vue里面的element组件，慢慢看慢慢学叭。
关于element组件：
el-breadcrumb:面包屑组件。 separator是设置分隔符，默认分隔符是"/"。
链接：

el-form：表单属性。
在el-form中有属性：
1.inline:当设置:inline="true"时候，可以让表单域变成行内的表单域。
2.ref:设置的值就是整个表单的信息，一般用于校验，this.$ref[xx].validate(valid=>xxxxxxx);
3.:model:它的值就是挂载在vue的，它就是一个表单。
4.v-show:值可以是true也可以是false。设置el-form一整个表单是否显示出来。
可见是true，根据具体案例我知道怎么去用，还有切换true和false了，不难。

el-form-item。