coder184的博客

vue扩展了标准HTML的模板语法，用JavaScript的状态描述HTML应该是什么样子的，当状态发生改变，HTML会自动更新。而这种设计带来的另一个词，是响应式。你在你的vue文件中声明的东西必须是响应式的，否则无法触发HTML更新。总结为一句话：vue用JavaScript扩展了HTML，JavaScript的改变，触发HTML更新。用reactive声明的东西，不能重新赋值，只能修改其内部的值。2.reactive能实现的，ref基本都能实现；vue中很重要的两个词，"声明式渲染"和"响应式"。

因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。解决的办法：赋予响应性即可，使用ref()或者reactive()。渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。

4.其实还有一个配置，server.cors，为服务器配置跨域资源共享，默认情况下，此功能处于启用状态，并允许任何源，故无须配置；1.'/product/category/treeList'，理解为代理的key即可，每一个key代表一条代理选项，项目的配置文件是：vue.config.ts，须在配置文件中配置服务器代理，稍后便可以调用后端接口。3.changeOrigin：是否改变源，需要改变的，设置为true即可；2.target：后端项目启动的地址，尽量不要加path，如图即可；

1.这里使用了ant-design-vue，所以有a-menu之类的标签，不用过多关注，此处可用简单button代替即可；2.video，people，load为待切换的页面，自己定义即可，无须雷同；3.@click为调用函数，总结：即curView会随着你点击的位置，来改变；1.路由代码如上，简单不赘述，没使用过的同学，建议先熟悉，后续再深入；5.页面由component渲染，即页面会随着你点击的位置，来切换；2.键值，自己设定即可，无须雷同，个人习惯带斜杠；页面切换，也可以称为页签切换。

6.div标签内的style：padding：0%，这样设置是为了重写div默认的 padding：0 2rem；5.如果设置min-height为100%，内部的子元素设置很大，滑动时会发现上下内容不全；7.上述6中的重写是为了消除div中元素与div的间隔，不重写的话，屏幕左右会出现间隙；8.不可将padding：0%放在独立的style中，这样放置，不会产生重写效果；9.上述8说明，标签内的style权限或者是优先级，高于独立的style；3.div的weight和height，均设置为100%；