Vue超级知识点

最新推荐文章于 2022-10-22 21:32:19 发布

鱼尼？

最新推荐文章于 2022-10-22 21:32:19 发布

阅读量182

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_63922807/article/details/122461780

版权

Vue

生命周期

beforeCreate 创建前     找不到dom元素 data中的数据没有初始化

created 创建完成找不到dom元素可以找到data中的数据

beforeMount 渲染到页面（挂载）前找不到dom元素

mounted 挂载完成可以找到dom元素

beforeUpdate 更新前在更新前可以做一些逻辑处理

updated 更新完成更新后可以做一些逻辑处理

beforeDestroy卸载前可以解绑window上的事件或着清空sessionStorage数据

destroyed 卸完完成

vue获得事件对象 $event

@click="add" add(event){ } 此时默认第一个参数就是 event

@click ="add(index,$event)" add(index,e){ } 当有参数列表时最后一个参数是事件对象

事件修饰符

prevent 取消默认事件

stop 取消冒泡

self 只触发自身事件

按键修饰符

.enter => enter键 .13

.tab => tab键

.delete (捕获“删除”和“退格”按键) => 删除键

.esc => 取消键

.space => 空格键

.up => 上

.down => 下

.left => 左

.right => 右

表单修饰符

v-model.trim 去掉前后空格

v-model.number 将input输入的数字值转化为number类型

v-model.lazy 失去焦点的时候在获取绑定的值

watch

什么是watch?

watch是用来响应data中的数据的变化，一般用于异步或者开销较大的操作

- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

computed

- 什么是计算属性？

计算属性是基于它们的响应式依赖进行缓存的

意思就是 (计算属性依赖的值发生变化时，会重新计算，如果依赖的值不发生变化，计算属性会使用之前缓存的值)

- computed 使用场景多用于

对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生了变化，则我们监控的这个值也就会发生变化

computed 和watch的区别

- 两者都能达到根据data中数据变化，就触发函数的结果。

- 计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数

- computed 多用于处理多个变量返回一个值，watch多用于异步处理或者逻辑比较复杂的处理。比如实时搜索效果

vue自定义指令

什么是自定义指令？

可以自己定义指令，在自定义指令中可以实现使用原生js方法操作dom，比如自定义拖拽功能

怎么写？

分两种全局和局部

1.全局自定义指令在Vue.directive上声明

2.局部自定义指令在组件内部 directives对象声明

3.函数 inserted 代表指令所在的dom渲染后调用

4.函数 bind 指令绑定后，dom渲染前调用

5.这两个函数都有两个参数参数1代表指令所在的dom节点参数2是一个对象.value

可以找到指令接收到的参数

全局

Vue.derictive('指令名称',{
•    bind: 元素被插入文档调用，只调用一次
   inserted: 元素被渲染到页面
•           (el,binding,vnode)
•            el:      dom元素  
             binding: 自定义指令的相关信息 binding.value就是接收自定义指令传递的值
•            vnode :  虚拟dom
             update: （VNODE） 虚拟dom 更新时，或者 自定义指令 接收的值 发生变化 都会调用update
})

局部

derictives:{
• fn(){     // 函数名 时指令名
•           bind(){}
•           inserted(){}
•           update(){}
•   }
}

vue 过滤器

可以将模版语法中的数据的值进行二次处理，比如数字取两位小数

全局

Vue.filter('过滤器名称',function(val){
  • val 参数就是 要处理的数据    {{n|filter}}
  • return  最终返回值
})

局部

        filters: {
•        capitalize: function (value) {
•            if (!value) return ''
•            value = value.toString()
•            return value.charAt(0).toUpperCase() + value.slice(1)
•        },
•        moneyFormData(val){
•            return val.toFixed(2);
•        }
•    }

vue数组的变异方法

说说什么vue中数组的变异操作方法

当我们直接操作数组比如 this.arr[0]=1 视图是不会更新的

只有我们使用数组的变异方法视图才能更新，vue中已经把数组的大部分常用方法都进行了扩展。

$set 、$delete

不使用数组的变异方法去操作数组时，视图默认不会更新，

或者给一个对象添加新的属或删除属性时，视图也不会更新，

这是使用$set $delete 可以强制更新视图。

比如：this.$set(this.arr,0,3) 或者删除使用 this.$delete(this.arr,0); 这样就更新视图了

在比如 this.$set(this.obj,'age',20); 或者删除属性 this.$delete(this.obj,'name');

$nextTick

因为vue数据变化更新视图是异步的，所有有的时候，更新数据后获取的不是最新的dom

在修改数据之后立即使用$nextTick，可以获取更新后的 DOM。

组件通信

父子通信-父传子

在父组件中使用子组件时，在自组件的标签上使用v-bind:传递的字段名=要传递的值

在自组件中使用 props:['传递的字段名']

父子通信-子传父

在子组件中使用$emit(‘事件名’,'要传递的参数')

在父组件中使用子组件标签时使用 v-on:事件名 = 处理函数fn 在methods中声明 fn 形参就是传递的参数

兄弟组件通信(事件中心 bus Vue实例)

创建bus.js文件在里面导出vue实例
在组件中引入bus.js
传数据的组件使用bus.$emit(事件名,值)
接收数据的组件使用 bus.$on(事件名，回调函数) 回调函数的形参就是接收到的值

Vue 路由

路由跳转两种方式

1.<router-link tag='li' to='路径' / >

编程式跳转 this.$router.push({path:路径) 注意跳转自路由 /shop/goods

this.$router.push('/b');

this.$router.push({name:'路由name名称'})

路由传参 query和params的区别

区别1.

params 必须使用name跳转, 接受参数使用this.$route.params.属性名

query 跳转可以使用 path 或 name 接受参数使用this.$route.query.属性名

区别2.

query 地址栏会显示传递的参数

params 地址栏不会显示传递过来的参数

区别3.

query 刷新页面参数不会丢失

params 刷新页面参数丢失

子路由（嵌套路由）

{
•   path:'/a',
•    component:{A},
•    children:[
•       {path:xx,component:xxx}
•   ]
}

在A 组件中配置 router-view
子路由的默认路由

路由重定向

redirect:'/b1',

路由懒加载（动态路由）

写法：

const A = ()=> import('@/routerdemo/A')

const A = resolve => require(['@/routerdemo/A'],resolve) ;

原理：

就是在webpack打包时（npm run build），会按照路模块进行打包。

优点：

路由懒加载，是在进入某个路由的时候，再去加载这个路由对应页面所需要的点静态资源。

这样的好处是项目在启动的时候，加载更快，首页显示的时间更短。

路由导航守卫（路由钩子函数）

一、全局

1.全局前置守卫

router.beforeEach((to,from,next)=>{
•    to: 路由去的地址
•    from: 路由从哪里来的
•    next()  :默认true 是允许跳转
•    next(true);
})

2.全局后置守卫

router.afterEach((to, from)=>{}) 注意：只有两个参数没有next

二、组件内路由守卫

beforeRouteEnter : 路由进入之前

beforeRouteUpdate : 子路由变化，或者路由参数更新

beforeRouteLeave ：路由离开之前

三、独享守卫

beforeEnter: (to, from, next) => {

next();

}

四、路由守卫结合 vuex相关问题

因为在某些路由守卫中无法访问 this 所以也就无法访问 this.$store

解决：可以在使用vuex时引入store/index.js 之后就可以使用了

路由模式

mode:'history' 地址栏没有# 需要后端配置访问路径之后才可以使用

HTML5新特性history pushState

mode:'hash' 默认模式地址栏有#

路由元信息

meta:{key:val} 在访问这个路由时，那就可以访问 $route.meta 数据

vue过渡（动画）

< transition name="前缀名称">

v-enter：在元素被插入之前的开始状态
v-enter-active：定义进入时的过渡状态。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。
v-leave：定义即将离开时的状态。
v-leave-active：定义离开时的过渡状态。
v-leave-to：2.1.8 版及以上定义已经离开的状态。

动态组件

component is='组件名称'

keep-alive

缓存（不会销毁，会复用）组件。
缓存路由视图组件

keep-alive 缓存指定路由

1.在路由配置中设置路由元信息

{

path:'/a'

component:A,

meta:{key:true}

}

2.在路由视图上设置

<keep-alive>

<router-view v-if="$route.meta.keepAlive">

</router-view>

</keep-alive>

<router-view v-if="!$route.meta.keepAlive">

**</router-view>**

vuex

state 声明vuex的数据

mutations 修改state中的数据的方法

actions 不能直接修改state中的数据，需要

                         1. 在组件中 this.$store.dispatch('actions中的方法名'，参数)        
                         2. 在actions中的方法 里面进行异步处理后，使用commit() 再提交给 mutations中的方法去修改数据

getters 相当于state的计算属性

modules 可以引入其他 vu e x 模块

plugins 使用插件，比如说 vuex长久储存 vuex-persist

mutations 中的方法需要 commit 触发

actions 中的方法需要 dispatch 触发

项目环境判断

process.env.NODE_ENV 是webpack中的一个变量

process.env.NODE_ENV 有两个值

development 开发环境 npm run dev

production 生产环境 nom run build

有时我们需要在代码中判断目前项目是处于开发环境、还是生产环境，然后根据不同环境执行不同的逻辑代码。比如切换接口地址

if (process.env.NODE_ENV === "development") {

// 开发环境配置

}else {

//生产环境配置

}

axios

axios({
  method: 请求方式,      
  url: 接口地址,
  data: {} post请求的参数
  params:{} get请求的参数
  baseURL: 设置接口地址前缀
  headers: {}, 修改请求头设置 content-type:
  timeout: 1000, 允许请求超时时间
  withCredentials: 默认false, 表示跨域请求时是否需要使用凭证（cookie）
  responseType: 'json', // default
  onUploadProgress: 上传进度
  onDownloadProgress:下载进度
  proxy:设置代理
  
});



{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 服务器响应的头
  headers: {},
   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

请求方式有：
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])


拦截器 
请求拦截   1.设置headers比如token验证 携带cookie  2.接口请求的loading动画

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么   比如token验证 携带cookie  
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
  
响应拦截  1.比如对某种返回结果进行统一处理，比如错网络误提示 2.接口请求的loading动画

// 添加响应拦截器  
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么   比如对某种返回结果进行统一处理
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

axios.all( [ axios.get('/user/12345'), axios.get('/user/12345'), axios请求] ).then(res=>{

// res=> [结果1，结果2]

})

HTTP协议

什么是http协议

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

HTTP 请求/响应的步骤：

客户端连接到Web服务器->发送Http请求->服务器接受请求并返回HTTP响应->释放连接TCP连接->客户端浏览器解析HTML内容

HTTPS的默认端口为80

请求方式

1、OPTIONS

返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性

2、HEAD

向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。

3、GET

向特定的资源发出请求。注意：GET方法不应当被用于产生“副作用”的操作中，例如在Web Application中，其中一个原因是GET可能会被网络蜘蛛等随意访问。Loadrunner中对应get请求函数：web_link和web_url

4、POST

向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 Loadrunner中对应POST请求函数：web_submit_data,web_submit_form

5、PUT

向指定资源位置上传其最新内容

6、DELETE

请求服务器删除Request-URL所标识的资源

7、TRACE

回显服务器收到的请求，主要用于测试或诊断

8、CONNECT

HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

request

第一部分：请求行，用来说明请求类型,要访问的资源以及所使用的HTTP版本.

第二部分：请求头部，紧接着请求行（即第一行）之后的部分，用来说明服务器要使用的附加信息如请求的目的地（域名）浏览器信息

第三部分：空行，请求头部后面的空行是必须的

第四部分：请求数据也叫主体，可以添加任意的其他数据。

http状态码

200 OK 当您的操作将在响应正文中返回数据时，出现此结果。

204 No Content 当您的操作成功，但不在响应正文中返回数据时，出现此结果。

304 Not Modified（重定向）上次访问服务器之后没有变化（缓存），出现此结果。

413 Payload Too Large（客户端错误）当请求长度过长时，出现此结果。

400 BadRequest（客户端错误）当参数无效时，出现此结果。

404 Not Found（客户端错误）当资源不存在时，出现此结果。

500 服务端错误

HTTPS协议

HTTPS的默认端口为443

HTTPS可以将数据加密传输，也就是传输的是密文，即便黑客在传输过程中拦截到数据也无法破译，这就保证了网络通信的安全。

promise 见全栈面试宝典

接口封装

写一个url.js文件来确定开发环境和上线环境使用的接口地址
基于axios进行二次封装，处理get post等请求方式，

在axios的请求拦截中处理token验证，loading加载动画，headers的配置处理接口地址的baseURL

携带cookie；在axios的响应拦截中对接口返回的数据进行统一处理，比如网络错误提示，loading处理等
使用promise 在进行封装，目的就是将异步代码同步化（ promise+ await +async）
在封装一个 api.js 里面是针对业务逻辑的接口进行处理。

跨域

当浏览器和服务器存在

不同的域名，不同的协议，不同的ip地址，不同的端口号时，进行【ajax访问】会产生【跨域】

vue在webpack中设置反响代理

可以解决跨域，原来就是浏览器访问服务器的时候会有跨域问题，可以使用反向代理搭建本地虚拟服务器

，因为服务器和服务器之间的通信没有跨域问题，所以反向代理可以解决跨域。

    `proxyTable: {`
      `'/api': {`
        `target: "https://elm.cangdu.org", // API服务所在IP及端口号`
        `changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）`
        `pathRewrite: {`
          `'^/api': '' // 重写路径`
        `}`
      `}`
  `},

cookie

什么是cookie

Cookie就是浏览器端的一种存储方式，主要用于浏览器和服务器之间的数据传输。

用途 1.本地存数据，比如7天免登录。2.向服务器提交数据 requset headers => <= response headers

语法：

vue开发遇到的问题

qu er y 传参数，传对象刷新会丢失

鱼尼？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue超级知识点

Vue生命周期beforeCreate 创建前找不到dom元素 data中的数据没有初始化created 创建完成找不到dom元素可以找到data中的数据beforeMount 渲染到页面（挂载）前找不到dom元素mounted 挂载完成可以找到dom元素beforeUpdate 更新前在更新前可以做一些逻辑处理updated 更新完成更新后可以做一些逻辑处理beforeDestroy卸载前可以解绑window上的事件或着清空sessionStor..
复制链接

扫一扫