Vue的版本是^2.6.10
vue-router的版本是^3.0.3
vue-/cli-service的版本是^3.8.0
1.
cli创建的默认工程,route对应的component option里面,使用了字符串template, 访问时会报如下错误:
[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
要修复这个问题,要在vue.config.js里面,添加 runtimeCompiler: true选项。而不是网上说的在webpack.config.js里面配置alias。这个webpack的配置对我生成的项目不起作用。
2.
axios请求本地的mock json,需要把mock文件放在public目录下。比如:
public
---- mock
---- list.json
src
---- components
---- MyComponent.vue
MyComponent的axios的请求要如下写
axios.get('../../mock/list.json')
因为public目录里面存放了不需要修改的静态文件,可以被直接访问。
网上写的放在根目录下的static目录中的方法不起作用。
3.
Debug vue的代码,如果是默认设置,并且浏览器开启了map选项,那么可以在代码里写上
debugger
浏览器就会在这个命令处停止,然后就可以看到源文件进行debug了。
4
用Store模式使用数据时,数组要注意
Store:
export default { isDebug: true, /* Define the type of {} object to avoid below TS compile error. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'. */ state: { dataList: [], } as { [key: string]: any }, setDataList(newDataList: any[]) { if (this.isDebug) { console.info('setDataList was called'); console.info('new dataList is ' + JSON.stringify(newDataList)); } this.state.dataList = newDataList; }, ... };
Component
<template> <div> <div v-for="data in dataList">{{data.desc}}</div> </div> </template> @Component export default class DataComponent { _dataList = null; sharedStore = Store; public get dataList () { return this.sharedStore.state.dataList; } methodToSetNewDataList(){ this.sharedStore.setDataList([...]); } }
使用computed property的方式,让dataList属性实际上是直接使用Store中的数组。这样,当store的数组被设置成新的数组时,component就可以监听到变化。
如果是使用下面这种赋值的方式,Store中的数组被设置成新的数组后,component是无法监听到变化的。
我觉得这个是由于Store中的dataList和component的dataList指向了同一个数组。Store的dataList被设置成新数组了, 只会触发Store的dataList属性的变化。而component的dataList属性引用的仍旧是旧数组,实际没有变化/触发变化。
@Component export default class DataComponent { dataList = null; sharedStore = Store; created(){ this.dataList = this.sharedStore.state.dataList; } }
5.
Component的$root对象指向的是根Vue应用。
Component的$parent对象指向的是component所属的父Component。
相关推荐
Vue 核心技术总结,适合初步想了解Vue语法的童鞋,其实语法是相通的。加油吧
Vue的项目总结及流程
包含路由,组件传值,路由对象,路由守卫等
尚硅谷VUE核心技术课件资料-笔记总结
Vue 中,可以通过方法创建一些全局的组件,或者局部的组件。但是,在实际 的 Vue 项目中,使用得更多的是单文件组件。 单文件组件 每一个以 .vue 为后缀的文件,都是一个组件,称为“单文件组件”。 单文件组件...
Vue.js 技术揭秘
基于 微信小程序 + springboot + vue 技术构建 ,支持单店铺,多店铺入驻的商城平台。项目包含 微信小程序,管理后台。基于java后台语言,已功能闭环,且达到商用标准的一套项目体系。 基于 微信小程序 + ...
vue知识点总结.md
2023vue面试题总结.docx 2023vue面试题总结.docx 2023vue面试题总结.docx 2023vue面试题总结.docx 2023vue面试题总结.docx 2023vue面试题总结.docx 2023vue面试题总结.docx 2023vue面试题总结.docx 2023vue面试题...
vue-dev总结.rar
vue思维导图,主要涉及1、MVVM思想 2、vue常见指令 3、Vue生命周期的介绍 4、组件间通信 5、路由的使用 vue-router 6、vue发送 ajax请求 7、计算属性,方法与侦听器 8、组件间绑定原生事件 9、vue常见插件 ...
突破Vue面试的必备知识点:完整Vue技术总结.zip
vue总结.pdf
本项目适用于课程设计,利用Vue实现的一个模仿antd官网的购物网站。项目功能如下所示。 1)前端功能 商品分类展示; 商品详情 商品搜索 订单详情(购物车) 登录与注册 注意:注册用户可以购买商品,非注册用户仅可以...
vue前端面试总结.txt
VUE核心技术Vue技术全家桶视频
vue知识点汇集 总结 回顾
1、利用Vue技术,实现前端音乐播放器 2、功能: a、能够根据人名和歌曲进行搜索。 b、能够根据搜索到的歌曲进行播放。 c、能够显示该歌曲的许多热搜评论。 d、能够将有mv视屏的歌曲进行区分,并且可以点击播放...
2023必知必问的Vue3面试题总结!!2023必知必问的Vue3面试题总结!!2023必知必问的Vue3面试题总结!!2023必知必问的Vue3面试题总结!!2023必知必问的Vue3面试题总结!!2023必知必问的Vue3面试题总结!!2023必知...
Vue中文社区 独家公众号,面向前端爱好者, 每日更新最有料的文章,最前沿的资讯,内容包含但不限于Vue,React,Angular,前端工程化...等各种"大保健"知识点,右上角...