[广州|内门弟子]JS-谢俊凯|2020年07月02日的日报-技能树.IT修真院

发表于： 2020-07-02 23:33:58

1 2430

今天：

因为尝试vue的样式重置，不清楚在哪里进行HTTP的padding设定为0，看了下是在静态资源写个css，使用import进行引入到app.vue.

然后是父子组件的一个分配，因为都是单文件，所以有点懵逼父子组件的设定是如何进行设定的。

纠结了一下父子组件关系，this组件调用了that组件的话，this组件就是that组件的父级，而调用关系并非我之前所想的那个跳转的路由关系，在我angular的写法中，使用router-outlet进行的一个路由跳转，其实是路由层级关系，并非组件的父子级关系。

而父子级的关系则是使用组件标签进行调用，然后是一个父子组件的数据交互问题，在angular里面，曾把富文本写成组件，然后引入该组件的component调用该组件的函数方法，进行数据的获取，而Vue使用的是一个：props进行的数据交互。

从队友获取了他的任务6到10的vue代码，写法继续进行对比，首先是网络请求：

ajax：

1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发，XHR本身的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。

PS:

MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。
MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。
MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。

axios:

1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。总结：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。

——————————————————————————————————————————————————————————————

看起来，似乎ajax比axios差了点东西，就是ajax使用的MVC（数据影响视图）结构，axios是MVVM视图与数据相互影响（双向绑定）结构。

还没使用到并发请求接口什么的，暂时没感觉出来区别。

然后是一些常用的模板语法：

v-html：相当于JS的innerHtml,插值的时候或者动态判断逻辑可用。

｛｛插值｝｝：和angular没区别

export default：和angular的 export没区别，暴露一些data，或者暴露一个方法，可以在其他组件调用。

vue的数据传递：

props，单向传递数据，父组件向子组件传递数据。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

子组件不能变更父组件传递的props。相应的，子组件变更该数据的话，只要写一个变量赋值指代该数据便可。

v-on: dom事件，可简写为@，可配置仅触发一次.once，终止连续冒泡.stop等等。

点击事件若是两个的话，点击子级，父级也被调用相当于点击了父级和子级两个事件，使用.stop进行阻止该点击事件传递。