2021/11/17

主要是每天到第二天了才发布昨天的笔记。
所以2021.11.17，没错滴！

今天觉得自己vue方面其实还是有很多欠缺的地方，于是重新去看了vue，看了一下那个所谓的vue响应式原理。

---

(关于响应式原理）
我现在才明白了响应式原理的真正作用是什么，也就是之前一直说的，vue管理的是html的值，但具体来说，管理的是有被vue绑定的值。
也就是说，html的值交给vue管了。这句话就是响应式原理的意义。

其实挂载+v-model就是来完成这些的。以前就是知道怎么用但是不知道为什么，现在知道啦，还是要结合代码一起看。

学到后面，发现什么javascript,vue，其实它们的用途都是为了html标签，比如事件，其实是html事件，所以javascript也是与html交互的一个过程，那么就像
vue的话呢，也是和html挂钩的，vue就是把html的值存在vue上了（通过挂载和v-指令）

vue之间组件的值传递也是因为这层关系，就像子组件被嵌套在父组件里，子组件的值被挂载在父组件上，也就是html的值归父组件管，所以子组件才拿不到值，
子组件才需要通过props拿到值。
同理，子组件的属性是属于子组件的，那么当事件触发的时候，子组件就通过方法传递值给父组件。

---

（关于组件复用）https://cn.vuejs.org/v2/guide/components.html

一个组件要想被复用，那么它一定是个函数，具体的样子是：
data: function () {
return {
count: 0
}
}
要有返回值。如果没有的话会影响组件复用滴。

关于组件注册。

组件想要复用就得先注册。注册分全局注册和局部注册，链接：https://cn.vuejs.org/v2/guide/components-registration.html

---

关于v-自定义指令 （这个我觉得就是跟属性差不多的意思吧！vue也是可以做属性的东西的，具体案例看链接）
https://cn.vuejs.org/v2/guide/custom-directive.html
反正就是“directive”啦。跟组件一样也有全局注册和局部注册，看看有什么叭。
注意，自定义指令是有钩子函数的，比如bind,inserted等，以及这些钩子函数有什么参数，如el，可以用来直接操作dom。
又比如binding，一个对象，包含name,value.
具体的案例（也就是代码），看这个链接：https://www.cnblogs.com/zaishiyu/p/15312269.html
（可以在这个案例ctrl+f搜索：el.style.border = binding.value，就知道这两个参数怎么用了。）
！！！！！没想到这个自定义指令在项目中就已经有应用到了。
就是v-hasPermi还有v-hasRole。
学习链接：https://blog.csdn.net/qq_42992729/article/details/118415933
v-hasPermi：意思是说存在权限字符串才能看到。比如system:user:add,就是说，是这个系统这个人这个操作才能看到这个按钮。
v-hasRole:意思就是说管理员或者其它指定角色才能看到。比如v-hasRole="[‘admin’]",那么意思就是说管理员才能看到。
需要知道，我的v-hasPermi，这个自定义指令已经去获得当前角色的权限字符了，那么我们在实际应用中就是把它用来与
可见的权限字符进行匹配就可以了。
比如说：新增
突然发现之前说的很对，其实前端业务要做的所谓的权限，不过就是控制控件是否可见罢了。
像这个就是通过v-自定义指令去完成这一点的。

在项目中，directive也是在permission里面都写完了，然后以src/directive的方式export default,最后在main.js全局。

---

关于vue，就先重新看了一下响应式原理，组件复用，还有v-自定义指令。
现在还是再去看看element-ui的组件以及组件的一些常用属性吧。

1. 链接：https://element.eleme.cn/#/zh-CN/component/input
属性：禁用状态：disabled 可清空：clearable 密码框：show-password 。除此之外还有prefix-icon,suffix-icon,
slot="suffix"等。
文本域：type=“area” :rows=“2”
制定可适应文本高度的文本域 autosize 。更高级的，:autosize = “{minRows:2,maxRows:4}”
前置元素：在文本输入框之内再写一个，设置属性 slot=“prepend” 可以设置前置元素哦。
设置尺寸size:large,small,mini

2.一种带有输入建议的输入框，，其中，想要在输入值后匹配触发，需要添加：:trigger-on-focus=“false”，
还有scoped slot。
queryString是我们文本框里输入的内容。cb是一个函数。
我感觉如果要从后端拿数据，对代码的修改也是不难的，其实就是把loadAll()当成后端的数据罢了，然后把数据交给this.restaurants就可以了。

---

下午
子路由：实现页中页的效果。

关于项目：
那个写window.vue的那个是为了兼容umd版本。

学布局了（layout): element官网布局链接：https://element.eleme.cn/#/zh-CN/component/layout
:span默认一行一共有24，
el-row有个gutter属性可以设置分栏间隔。
el-col有个offset属性可以设置分栏偏移。
el-row可以设置type=“flex”,从而通过justify属性来定义元素的排列方式。注意这里justify属性 space-between和space-around的区别。

在想路由跟组件是怎么影响布局的，百思不得其解，所以先写一下自己研究的大概吧，从router.json开始，它是一个写路由配置的东西，
然后通过api/menu.js的getRoutes方法，对这个router.json进行解析，（这里相当于是一个后端接口了）
permission.js里的getRoutes里面有一个filterAsyncRouter，参数是asyncRouterMap,和rdata相等，rdata是router.json的数据。

在学el-table，发现内容好多啊，于是一边看一边学还是有点儿累，所以先潦草看了一遍，等项目用到哪个属性的时候我再去琢磨琢磨。
链接：https://element.eleme.cn/#/zh-CN/component/table

关于ref:唉！终于懂了，以前看到ref,老是在想它的值是什么意思，现在才知道，没有关系啊，取什么都可以，就是一个名字而已。
ref就是为了获取dom元素嘛，比如ref=“table” 那么this.$ref.table就是当前的dom元素。又比如ref="refContent"那么this.$ref.refContent就是当前的dom元素。
以前老是看不懂ref，现在看懂啦，开心。
如果是this.$refs.refContent,ref是复数，那就是因为ref是循环出来的，不止一个dom元素。
因为ref就是dom元素。
链接：https://www.cnblogs.com/goloving/p/9404099.html

ref需要在dom渲染完成后才有哦，所以一般是在生命周期mounted(){}中调用，又或者是在
this.$nextTick(()=>{})调用
哦，refs还可以指注册过ref的子组件。注意，子组件哟。

这个table有很多自带的方法，比如toggleRowSelection(row)
就是this.$refs.table.toggleRowSelection(row),这样子使用它的。它的意思是切换使用状态。
链接：https://element.eleme.cn/#/zh-CN/component/table

十分开心的是我终于知道了标签属性值这个就是取什么都可以的意思，知道它有多么无足轻重了。
毕竟以前老是很看重它。

在account.vue项目中，el-table这个标签，有@row-click，单次触发事件，有ref，可以获得当前的dom状态，还有各种方法，
比如toggleRowSelection(row),切换它的

布局：src/layout/index.vue
right-panel 设置了showSettings,这个showSettings的值是false,意思是说并不进行全局配置。
关于mapState，我觉得这个就讲得很不错啦：https://www.jianshu.com/p/6abdf50bd4f9
computed属性，currentCity代替了$store.state.city,当然这个是叫做映射。
mapState其实就是跟computed属性一块的。

其实以前老是不知道怎么去学习前端，但是像现在至少知道了一些吧，就是除了懂框架的基本知识，还有就是每接触一次项目，就去看每个vue文件是怎么写的，用了什么标签，什么组件，一点点看着学，一定会越来越强的！