vue中遇到的问题

本是古典何须时尚 2022-10-09 03:25 240阅读 0赞

**vue知识点疑问 **

1.  安装vue-cli3  
    执行npm uninstall vue-cli -g命令卸载之前的旧版本  
    执行npm install @vue/cli -g命令安装最新版本
2.  import和export、require/exports的区别  
    ES6 Module使用export导出，import导入  
    node.js模块化使用exporst导出，require导入  
    [https://zhuanlan.zhihu.com/p/121770261][https_zhuanlan.zhihu.com_p_121770261]
3.  vue 结合elementui使用index实现路由的方式  
    $route.path设置默认选中的导航
4.  vue 字符串、数组之间的相互转换
    
    1.  字符串转数组  
        str.split(';'); //以分号拆分字符串
    2.  数组转字符串  
        arr.join(';'); //把数组项拼接成字符串，并以分号隔开。默认情况下是以逗号隔开
5.  vue中data,props,computed,method的相同点和不同点  
    data，存放数据，双向绑定，  
    props接受父组件传过来的值  
    computed计算属性  
    watch监听一个值或对象的变化
6.  Vue中message.split().reverse().join()函数用法
    
    1.  split('') 把一个字符串分割成字符串数组  
        数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串
    2.  reverse() 颠倒数组中元素的顺序  
        只作用于数组，跟在split('')后才能起作用，在一个字符串后面不起作用，如message.reverse()
    3.  join('') 把数组中的所有元素放入一个字符串  
        所以，message.split('').reverse().join('')  意思是把字符串翻转重组成字符串  
        hello→olleh
    4.  created和mounted区别？  
        created中对象和方法，在页面加载后就执行  
        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]
7.  [component：(resolve) => require是什么意思？][component_resolve_ _ require]  
    [https://segmentfault.com/q/1010000017913060][component_resolve_ _ require]
8.  浅谈vue中resetFields()使用注意事项
9.  自定义指令 bind和inserted的区别
10. tip 尖端、尖儿、小费、使用的提示
11. vue中return中的对象是常量还是变量还是const var ？  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 1][]
12. 后端明明返回了data中有数据,但是输出打印出来就是undefined ?异步了[https://developers.weixin.qq.com/community/develop/doc/000aa8ecbd0ee0fbd989f52c056000][https_developers.weixin.qq.com_community_develop_doc_000aa8ecbd0ee0fbd989f52c056000]
13. Vue：禁用浏览器的前进后退  
    [https://blog.csdn.net/qq\_39025670/article/details/108020287?utm\_medium=distribute.pc\_relevant\_bbs\_down.none-task-blog-baidujs-1.nonecase&depth\_1-utm\_source=distribute.pc\_relevant\_bbs\_down.none-task-blog-baidujs-1.nonecase][https_blog.csdn.net_qq_39025670_article_details_108020287_utm_medium_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase_depth_1-utm_source_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase]
14. [QS：vue中qs的使用][QS_vue_qs]  
    关于Vue中，序列化字符串，处理发送请求的参数  
    使用工具qs来处理参数  
    步骤：  
    1. 首先先下载：npm i qs  
    2. 然后引入 ：import qs from 'qs'  
    qs主要有两个方法 ：  
    方法一：将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）  
    qs.stringify() 转换成查询字符串 let comments = \{content: this.inputValue\} let comValue = qs.stringify(comments)  
    方法二：将序列化的内容拆分成一个个单一的对象  
    qs.parse() 转换成json对象  
    let comValue = qs.parse(comments)
15. 理解和使用Promise.all和Promise.race
    
    1.  Pomise.all的使用
        
        Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
        
        具体代码如下：
        
        let p1 = new Promise((resolve, reject) => \{ resolve('成功了') \}) let p2 = new Promise((resolve, reject) => \{ resolve('success') \}) let p3 = Promse.reject('失败') Promise.all(\[p1, p2\]).then((result) => \{ console.log(result) //\['成功了', 'success'\] \}).catch((error) => \{ console.log(error) \}) Promise.all(\[p1,p3,p2\]).then((result) => \{ console.log(result) \}).catch((error) => \{ console.log(error) // 失败了，打出 '失败' \})
        
        Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。
        
        代码模拟：
        
        let wake = (time) => \{ return new Promise((resolve, reject) => \{ setTimeout(() => \{ resolve(\`$\{time / 1000\}秒后醒来\`) \}, time) \}) \} let p1 = wake(3000) let p2 = wake(2000) Promise.all(\[p1, p2\]).then((result) => \{ console.log(result) // \[ '3秒后醒来', '2秒后醒来' \] \}).catch((error) => \{ console.log(error) \})
        
        需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。
    2.  Promise.race的使用
        
        顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race(\[p1, p2, p3\])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
        
        let p1 = new Promise((resolve, reject) => \{ setTimeout(() => \{ resolve('success') \},1000) \}) let p2 = new Promise((resolve, reject) => \{ setTimeout(() => \{ reject('failed') \}, 500) \}) Promise.race(\[p1, p2\]).then((result) => \{ console.log(result) \}).catch((error) => \{ console.log(error) // 打开的是 'failed' \})
        
        原理是挺简单的，但是在实际运用中还没有想到什么的使用场景会使用到。
        
        链接：https://www.jianshu.com/p/7e60fc1be1b2
16. ...

**路由**

1.  [vue-router两种模式的区别][vue-router]  
    mode和history模式  
    history模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面  
    history模式坑：[https://jingyan.baidu.com/article/066074d61ef9f1c3c21cb0a6.html][https_jingyan.baidu.com_article_066074d61ef9f1c3c21cb0a6.html]  
    结合自身例子，对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。  
    vue-cli history模式 tomcat部署 报404 解决方式
    
    [https://blog.csdn.net/elisunli/article/details/798232][https_blog.csdn.net_elisunli_article_details_798232]
2.  官网路由介  
    [https://router.vuejs.org/zh/guide/advanced/meta.html][https_router.vuejs.org_zh_guide_advanced_meta.html]
3.  vue 路由带参数跳转四种方式 
    
    [https://blog.csdn.net/jiandan1127/article/details/86170336][https_blog.csdn.net_jiandan1127_article_details_86170336]
4.  ...

**axios**

1.  cdn使用axios请求数据
2.  vue-cli使用axios：[https://blog.csdn.net/qq\_41463655/article/details/104097759][https_blog.csdn.net_qq_41463655_article_details_104097759]
3.  [axios中 get 和post 请求参数和headers的配置https://www.cnblogs.com/moringyaozheng/p/13810208.html][axios_ get _post _headers_https_www.cnblogs.com_moringyaozheng_p_13810208.html]
4.  ...

**项目**

1.  VUE实现token登录验证  
    [https://blog.csdn.net/marsur/article/details/88952403][https_blog.csdn.net_marsur_article_details_88952403]
2.  [前端的token到底该存到哪里？  
    https://segmentfault.com/q/1010000024439725][token_ https_segmentfault.com_q_1010000024439725]
3.  vue-cli3 本地、开发、测试、生产环境的配置  
    [https://blog.csdn.net/zrcj0706/article/details/104770310/][https_blog.csdn.net_zrcj0706_article_details_104770310]
4.  解决本地调试导致的Ajax跨域问题  
    [https://blog.csdn.net/zhongshijun521/article/details/74331560][https_blog.csdn.net_zhongshijun521_article_details_74331560]
5.  如何使用nginx解决跨域问题
6.  ...

[https_zhuanlan.zhihu.com_p_121770261]: https://zhuanlan.zhihu.com/p/121770261
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/848bd65fed1744f8aac3b66d22818218.png
[component_resolve_ _ require]: https://segmentfault.com/q/1010000017913060
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 1]: /images/20221005/cee4507ac2be41d8bbbe24a5165411c4.png
[https_developers.weixin.qq.com_community_develop_doc_000aa8ecbd0ee0fbd989f52c056000]: https://developers.weixin.qq.com/community/develop/doc/000aa8ecbd0ee0fbd989f52c056000
[https_blog.csdn.net_qq_39025670_article_details_108020287_utm_medium_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase_depth_1-utm_source_distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase]: https://blog.csdn.net/qq_39025670/article/details/108020287?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase
[QS_vue_qs]: https://www.cnblogs.com/mica/p/10795187.html
[vue-router]: https://www.cnblogs.com/ceceliahappycoding/p/10552620.html
[https_jingyan.baidu.com_article_066074d61ef9f1c3c21cb0a6.html]: https://jingyan.baidu.com/article/066074d61ef9f1c3c21cb0a6.html
[https_blog.csdn.net_elisunli_article_details_798232]: https://blog.csdn.net/elisunli/article/details/79823245
[https_router.vuejs.org_zh_guide_advanced_meta.html]: https://router.vuejs.org/zh/guide/advanced/meta.html
[https_blog.csdn.net_jiandan1127_article_details_86170336]: https://blog.csdn.net/jiandan1127/article/details/86170336
[https_blog.csdn.net_qq_41463655_article_details_104097759]: https://blog.csdn.net/qq_41463655/article/details/104097759
[axios_ get _post _headers_https_www.cnblogs.com_moringyaozheng_p_13810208.html]: https://www.cnblogs.com/moringyaozheng/p/13810208.html
[https_blog.csdn.net_marsur_article_details_88952403]: https://blog.csdn.net/marsur/article/details/88952403
[token_ https_segmentfault.com_q_1010000024439725]: https://segmentfault.com/q/1010000024439725
[https_blog.csdn.net_zrcj0706_article_details_104770310]: https://blog.csdn.net/zrcj0706/article/details/104770310/
[https_blog.csdn.net_zhongshijun521_article_details_74331560]: https://blog.csdn.net/zhongshijun521/article/details/74331560