vue知识小结

最新推荐文章于 2024-07-04 00:59:27 发布

Y指尖星光Y

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量1.5k

点赞数

分类专栏：关于web前端的学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xingkongguan/article/details/123403108

版权

关于web前端的学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

面试视频知识

vue面试

vue2的生命周期？

生命周期有哪些？
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed
一旦进入页面或者组件，会执行哪些生命周期
1. 前四个
在那个阶段有 $e l (组件的根节点) 也可以理解成 D O M 节点,$ data？
1. beforeCreate 都没有
2. created 有data，没有el
3. beforeMount 有data 没有el
4. mounted 都有
如果加上kee-live就会多两个生命周期，这是在updated后面执行。
1. activated（进入）、deactivated（离开）
如果加入keep-live，第一次进入组件会执行哪些生命周期？
1. 前四个加activated（进入）、deactivated（离开）
如果加入keep-live，第二次或第n次进入组件会执行哪些生命周期？
1. 只执行activated生命周期

v-if和v-show的区别

v-if是创建和销毁DOM节点,v-show是显示和隐藏DOM节点
使用场景不同
1. 初次加载v-if比v-show好，页面不会加载盒子
2. 频繁切换的时候v-show更好，创建和删除开销比较大，显示隐藏开销比较小

v-if和v-for优先级

v-for的优先级比v-if高，源码决定的

ref是什么

来获取DOM节点的。this.refs.__获取dom

scoped

style只在当前页面起作用

vue中如何让插件中的css只在当前组件中起作用

npm i sass-loader node-sass --save安装sass

父传子，子传父，兄弟传值

父传子

computed/methods/watch区别

computed和methods区别：computed有缓存，methods没有缓存。
computed和watch区别：watch是监听，数据或者路由发生改变才可以响应。computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回，watch是当时监听到数据改变了，才会执行内部代码。
watch (重视过程)，监听一个值的改变。不用返回值,没有用，异步同步
计算属性(重视结果)=》解决模板过重问题，必须有return ，只求结果 ,有缓存，同步。
方法==》事件绑定，逻辑计算。可以不用return，没有缓存

props和data谁的优先级高

props是父组件传到子组件中的值的存储位置
props–>methods–>data–>computed–>watch

指令

指令就是对底层dom进行封装，作者给留方案例如v-hello就是一个自定义的指令
实际应用–通过指令知道什么时候DOM创建完成,从而进行依赖dom的库的初始化工作

自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
bind:相当于created阶段的。只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:相当于mounted阶段的。被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:相当于beforeupdate阶段的。被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:相当于updated阶段的。被绑定元素所
在模板完成一次更新周期后调用。
unbind:相当于销毁。只调用一次，指令与元素解绑时调用。

//! directive定义指令
        
        Vue.directive('hello', {
            //! 指令的生命周期 
            //加个形参，可以获取指令对应的节点，然后可以对节点进行操作  binging绑定的是指令的节点
            inserted(el, binding) {
                console.log('inserted', el)
                //binding只有在第一次插入节点中才会触发。
                console.log('inserted', binding)
                el.style.background = 'red'
                el.style.background = binding.value
            },
            //每次更新的时候会触发，但是触发也不会更改上面的binding
            //但是当传参的时候，可以更改binding的状态
            update(el, binding) {
                console.log('update', binding)
                el.style.background = binding.value
            },
            /* inserted和update简写
            (el,binding)=>{
                el.style.background=binding.value
            }
            
            */
        })

学的基础vue

v-html和v-text的区别

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本

事件修饰符

@click.self=“handulclick”，.self也可以阻止冒泡
.stop这样的就是事件修饰符，这个可以阻止冒泡
.once表示只能触发一次
.prevent阻止默认行为
.enter按键修饰符，表示enter按键按下后才会触发

表单修饰符

v-model.lazy=“mytext”， .lazy是去掉焦点的时候才开始同步v-model的数据
.number只能输入数字
.trim 去除首位空格

父传子

父传子通过属性进行传值，子传父通过事件传值

父组件
<header :aaa='msg'>

子组件
// props:['aaa']
props:{
  aaa:''
}

子传父

子组件：this.$emit(‘自定义事件名称’,要传的数据)
父组件：<header @自定义事件名称=‘getval’>
methods:{getval(msg){msg就是子组件传递的数据}}

兄弟之间传值

bus. $o n 监听。 b u s .$ emit触发

A兄弟传值：bus.$emit(‘footer’,数据)
B兄弟接收：bus.$on(‘footer’,(data)=>{this.str=data})

vuex状态管理模式

vuex有哪些属性

state：类似于data（）
getters：类似于computed
mutations：类似于methods
actions：提交mutations
modules：把以上四个属性再细分，让仓库更好管理

vuex是单项数据流

veux中mutaions和actions区别

mutaions：都是同步事物
action：可以包含任何异步操作和同步操作
在调试工具中可以看出来

vuex如何做到持久化存储

vuex本身不是持久化存储
1. 方法一：使用localStorage自己写
2. 方法二：使用vuex插件安装vuex-persistedstate数据持久化插件

DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

promise

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。避免回调地狱

// resolve可以把异步数据传递出来
let p = new Promise(resolve=>{
  resolve('nihao')
})

// 通过then拿异步函数
p.then()

ajax、axios、fetch

axios是基于ajax和promise进行封装的库
fetch是浏览器原生的，内置的类
fetch内置的类。进行数据请求，天生就是基于Promise进行管理的
fetch是ES6才有的，如果想让它兼容更多的浏览器就需要在webpack中安装babel-Polyfill。

封装的原因：api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

import axios from 'axios'
import qs from 'qs'
/* 根据环境变量区分接口的默认地址 */
switch(process.env.NODE_ENV){
  case:'production':axios.defaults.baseUrl='http://api.wangzhi.cn'// 部署到服务器上的环境地址
  break
  case:'test':axios.defaults.baseUrl='http://192.168.20.12:8080'// 测试服务器地址
  break
  default:axios.defaults.baseUrl='http://127.0.0.1:3000' // 开发环境

}

/* 设置超时间和跨域是否被允许携带凭证 */
axios.defaults.timeout=10000 // 设置时间
axios.defaults.withCredentials=true // 是否允许跨域资源凭证携带

/* 设置请求传递数据的格式（看服务器要求什么格式） */
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios,defaults.transformRequest=data=>qs.stringfy(data) //post请求

/* 加拦截器：请求拦截器+响应拦截器 */
/* 设置请求拦截器 (客户端-->请求拦截器-->服务端)
    token校验（jwt）：接受服务器返回的token，存储到vuex/本地存储中，每一次向服务器发请求，我们应该把token带上
*/
axios.interceptors.request.use(config=>{
  // 携带上token
  let token = localStorage.getItem('token')
  token && (config.headers.Authorization = token )
  return config
},error=>{
  return Promise.reject(error)
})

/* 响应拦截器（服务-->响应拦截器（拦截的统一处理）-->客户端获取信息）
*/
axios.defaults.validateStatus = status=>{
  //自定义响应成功的HTTP状态码
  return /^(2|3)\d{2}$/.test(status)
}
axios.interceptors.response.use(response={
  return response.data
},error=>{
  let{response}=error
  if(response){
    // 服务器最起码返回结果了
    switch(response.status){
      case 401: // 权限
        break
      case 403: // 服务器理解请求，但是拒绝执行
        break
      case 404: // 找不到页面
      break
    }
  }else{
    // 服务器连接没有返回
    if(!window.navigator.onLine){
      // 断网处理，可以跳转到断网页面
      return
    }
    // 服务器端的问题
    return Promise.reject(error)
  }
})

axios.get('/user/12345')
  .then(response => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

export default axios

跨域问题？

浏览器的同源策略：两个页面具有相同的协议、主机、端口号。有一个不同就跨域了。

解决跨域问题：配置vue.config.js解决跨域
1. 原理：
  1. 将域名发送给本地服务器（localhost：8080）
  2. 再由本地服务器去请求真正的服务器
  3. 因为请求时从服务器端发出的，所以就不存在跨域问题

注意：配置完成后重启服务器

devServer: {
    port: 8080, // 随便改端口号
    proxy: {
      '/api': {
        target: 'https://i.maoyan.com',
        // host: '*.000*.com',
        changeOrigin: true
        // 路径修改，把、api替换成空。
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

nginx

nginx免安装版本放在不要有中文的路径中
把dist文件直接粘贴在nginx里面
把项目文件dist拉入到nginx文件夹中
在nginx文件中的conf文件夹的nginx.conf复制一份,修改其中的数据

// 修改端口号
 server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
// 修改root后面的数据
        location / {
            root   dist;
            index  index.html index.htm;
        }

使用Powershell命令面板.\nginx.exe -c .\conf\guan.conf开启
如果想关闭，再重新打开一个命令面板，输入关闭指令
.\nginx.exe -s stop关闭
.\nginx.exe -s reload关闭
然后直接把nginx直接放在服务器上

dependencies和devDependencies的区别？

devDependencies：开发环境使用
dependencies：生产环境使用
生产环境使用npm install/i xxx@version -S/--save
npm install/i xxx -D/--save-dev开发环境使用

Y指尖星光Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识小结

面试视频知识vue面试vue2的生命周期？生命周期有哪些？beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed一旦进入页面或者组件，会执行哪些生命周期前四个在那个阶段有el(组件的根节点)也可以理解成DOM节点,el(组件的根节点)也可以理解成DOM节点,el(组件的根节点)也可以理解成DOM节点,data？beforeCreate 都没有created 有
复制链接

扫一扫