我的vue的学习之旅

最新推荐文章于 2024-06-17 23:12:06 发布

weifeng_bushileng

最新推荐文章于 2024-06-17 23:12:06 发布

阅读量188

点赞数

分类专栏： vue.js 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_43733682/article/details/126795426

版权

vue.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue.js 是什么
vue是一套用于构建用户界面的渐进式框架，（对他的理解）Vue被设计为可以自底向上逐层应用。Vue的核心库只关心图层，易上手，也方便与第三方库或既有的项目整合
● mvvm模型：m:model–数据模型 (data) v:view—视图（dom） vm:viewModel—视图模型(Vue实例）
● node.js：本质上是一个JavaScript的运行环境，方便搭建响应速度快、易于扩展的网络应用，他也有很多的缺点：不适合做CPU密集型应用。只支持单核CPU，不能充分利用。可靠性比较低，一旦代码的某个环节彭亏了，整个系统其实都会崩溃的。
vue.js的两个核心：数据驱动和组件化思想
v-show指令是通过修改元素的display的css属性让其现实和隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

Vue的实例
Vue 的生命周期：就是从开始创建，初始化数据、编译模板挂载DOM->渲染、更新->渲染、销毁等一系列的过程，就是Vue 的生命周期
● 计算属性的getter和setter参数是不固定的
自定义组件内的数据data必须是一个函数
data:function(){
return {count:0}
}
prop的使用方法
当父组件给子组件的prop传递一个值的时候，这个值就变成了子组件实例的一个实例属性
Vue CLI（脚手架）
vue CLI 是一个基于Vue.js进行快速开发的一个完整的系统
● 通过实现的交互式的项目脚手架
Vue CLI致力于将Vue生态中的工具基础标准化，确保了各种构建工具能够基于智能的默认配置平稳衔接。
Vue 是一个全局安装的npm包，提供了终端里的Vue命令，他可以通过Vue create快速搭建一个新项目。或者乐意直接通过Vue serve构建新想法的原型，你也可以通过Vue ui通过一套图形化界面管理你的所有的项目。
Vue 的双向绑定
Vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值（get）设置属性值（set）的操作来实现的
jQuery的知识
jQuery库可以通过一行简单的标记被添加到网页中
为什么要使用这个呢，目前网络上有大量的开源的JS代码库，但是jQuery是目前最流行的JS代码库，而且提供了大量的扩展。他可以考虑到不同的浏览器的兼容问题，所以他可以兼容于所有的主流浏览器。
jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作
组件的设计原则
（1）页面上的每个独立的可视/可交互的区域视为一个组件（页面的头部，尾部，可复用的区域）
（2）每个组件对应一个工程目录，组件所需要的各种资源就在这个目录下就近维护（就近维护体现了前端的工程化思想，为前端开发提供了很好的分治策略）在这个目录下其实是可以找到功能单元所有的内部逻辑
（3）页面是组件的容器，组件可以嵌套自由组合成完整的页面
Vue事件是如何使用event对象的

其实各种库、框架多少都有针对event对象进行处理的
如jQuery，对内部进行封装的时候，我们开发无需关注event对象的部分兼容性问题，这样在写阻止冒泡的时候，只需统一写成event.preventDefault()
vue中的event对象
相比于jqery，Vue的事件绑定可以显得更加的直观和便捷。
fetch、axios、ajax的比较
ajax可以在不更新全局的情况下更新局部页面，通过在与服务器进行数据交换，可以使页面实现异步更新。
ajax的原理是：通过XHR对象来向服务器发起异步请求，从服务器上获得数据，然后用JS来操作DOM更新页面。
通过XMLHttpRequest.open()方法与服务器建立连接。XMLHttpRequest.send()方法中如果Ajax请求是异步的，那么这个方法发送请求后就会返回，如果是同步的，那么请求必须响应后才能返回。
缺点：
● 本是针对MVC架构，不符合前端MVVM的浪潮（补充：MVVM是Model-View-ViewModel的简写。是M-V-VM三部分组成，他是MVC的改进版，是将其中的View的状态和行为抽象化。采用的是双向数据绑定，MVVM的核心就是关注model的变化，让MVVM 框架利用自己的机制自动更新DOM ，所谓的数据-视图分离，数据是不影响视图的。）
● 基于原生的XHR开发
● 配置和调用的方式混乱。
axios
axios的原理是：使用 promise 封装的 ajax，他内部有两个拦截器，分别是 request 拦截器和 response 拦截器。
● 请求拦截器的作用是：在请求发送之前进行一些操作，例如在每个请求上加入taken
● 响应拦截器的作用是：接受到响应后做一些操作，例如登录失效后，重新登录跳转到登录页。
特点：
● 由浏览器发端发起的请求，在浏览器中创建XHR
● 支持promise API
● 监听请求和返回
● 更好的格式化，自动将数据转换为json数据
● 安全性更高，可以抵御CSRF的攻击
常用的方法：
axios常用的方法有：get,post,put,patch,delete等，其中get和post返回的都是promise对象，可以使用promise方法。
相关的配置：
● URL：用于请求服务器的URL
● method：请求方法，默认为get
● baseURL：会自动加到URL的前面
● proxy：用于配置代理
● transformRequest：允许在服务器发送请求之前修改请求的数据
发送请求拿到数据的一个过程：请求拦截器、发送请求、响应拦截器、响应回调的联系
fetch
fetch是http请求数据的方式，它使用promise，但是不使用回调函数，fetch采用模块化设计，通过数据流处理数据，对于请求大文件或者网速慢的情况是很有用的，默认的情况下，fetch是不会接收和发送cookies的
优点：
● 采用模块化思想，将输入、输出。状态跟踪分离
● 基于promise，返回一个promise
缺点：
● 过于底层，有很多的状态码没有进行封装
● 无法阻断请求
● 兼容性比较差
● 无法检测请求进度
4.fetch、ajax、axios的区别
● 传统的ajax利用的是HMLHttpRequest这个对象，和后端进行交互。而JQury ajax是对原生的XHR的封装，多请求间有嵌套的话，就会出现回调地域的问题
● axios使用promise封装XHR，解决了回调地域的问题。
● fetch没有使用XHR,使用的是promise

最后的总结：
● Ajax是一种web数据交互的方式，他可以使页面在不重新加载的情况下请求数据并进行局部更新，它的内部使用了XHR来进行异步请求。
Ajax在使用XHR发起异步请求时得到的是XML格式的数据，如果想要json格式，需要额外的转换；Ajax本身是针对MVC格式的，不符合现在的MVVM框架，ajax有回调地域的问题。Ajax的配置复杂。
● fetch是HXR的代替品，它基于promise实现的，并且不使用回调函数，他是采用的模块化结构设计，使用数据流进行传输，对于大文件和网速慢的情况是非常友好的，但是fetch不会对请求和响应进行监听；不能阻断请求。对于底层，对一些代码是没有封装的；他的兼容型也是很差的。
● axios是基于promise对XHR进行封装，他的内部有两个拦截器。axios可以对请求和响应进行监听，返回promise对象，可以使用promise的API；返回JSON 格式的数据，由浏览器发起的请求，安全性更高，可以抵御CSRF的攻击。
XHR：全称为XMLHttpRequest，用于与服务器交互数据。是ajax功能所依赖的对象、jQuery中的ajax就是对XHR的封装。

同步请求和异步请求
浏览器发送请求给服务器，有同步和异步两种方式。

同步请求
在发送一个请求之后，需要等待服务器响应返回，这样才能发送下一个请求。
异步请求
在发送一个请求之后，不需要等待接收方发回响应，接着可以发送走一个请求。
同步：如果使用这服务运行的过程中阻塞时崩溃了，当他重新启动的时候，将无法重新连接到正在进行的调用，所以响应丢失。
异步：如果使用者在as请求之后等待响应时崩溃了，当他重新启动时，可以继续等待响应，所以响应市场不会丢失的。
数据的输入、处