1.export default的作用是
export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。
import就是在一个模块中加载另一个含有export接口的模块， import就是导入。
2.什么样的内容需要放在export default里面，什么样子的内容不需要放在里面
Cannot set property ‘tableData’ of undefined
-
箭头函数的作用：帮助获取当前vue实例
-
如何存储用户信息
localStorge
cookie都可以存取 -
vuex的作用
数据共享
注意每次刷新页面共享的数据会被刷掉 -
上传文件
使用element-ui里面的 <el-update>组件
提供了两种方式
1）action，接第三方存储空间
2）自定义上传绑定一个函数处理，使用http-request方法进行绑定，比如绑定handleRequets函数，可以利用handleRequest像后端发送请求，让后端存储 -
关于nodejs和npm版本不匹配的解决方法
问题描述，重装了低版本的npm，然后和node版本不匹配了，不管允许任何npm命令都疯狂报错
npm WARN npm npm does not support Node.js v18.15.0
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:
npm ERR! D:\nodejs\node_cache\_logs\2023-04-07T02_51_34_588Z-debug.log
PS E:\gitProject\demo\vue> npm install npm@9.5.0 -g
npm WARN npm npm does not support Node.js v18.15.0
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function
我的解决办法类似楼主，但我没有找到npm-cache文件夹，我找到了全局的npm文件夹，然后删除了，后来又重新安装了对应版本的npm
- 视频播放器版本不匹配
npm -v 9.5.0
node -v 18.15.0
vue -V @vue/cli 5.0.8
尝试了以下几条命令安装 vue-video-player
npm install vue-video-player --save
npm i vue-video-player
npm install video.js @videojs-player/vue --save
均以失败告终
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: demo@0.1.0
npm ERR! Found: video.js@8.0.4
npm ERR! node_modules/video.js
npm ERR! dev video.js@"^8.0.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer video.js@"7.x" from vue-video-player@6.0.0
npm ERR! node_modules/vue-video-player
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! D:\nodejs\node_cache\_logs\2023-04-07T02_37_39_394Z-eresolve-report.txt
解决：解决的也很魔幻，一开始看他的意思好像是我自己的videojs和vue-video-player需要的video.js不匹配，然后我突发奇想，那我干脆用video.js实现算了，
执行了以下命令
npm install --save-dev video.js
后来发现，video.js这家伙操作起来有难度（网上没有教程）
于是我就又硬着头皮看报错
哎嘿！还真让我发现了
npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps
于是我就又执行了
npm install video.js @videojs-player/vue --save --force
居然，成功了！！！，当然，也可能是因为我安装了video.js的原因（因为之前一直注释掉vue-video-player，所以我其实没办法确定到底这个问题是什么时候解决的，哪一步解决的），具体原因就不细究了，等我学成归来再讲。
-
ElementUI的el-table怎样隐藏某一列
-
怎么实现页面跳转并且赋值给另外一个页面的变量
-
vue实现页面跳转并传参的八种方法
-
将el-table的某一列设置为按钮
直接在表格里面加一个button组件 -
父组件给子组件传值
props是一个对象，包含父组件传递给子组件的所有数据。
props+setup但是，我不太会用setup，因为之前一值没用过，感觉还得改原有的data和method，怕改出更多的bug
props+watch
watch监听props里面属性的变化（因为prop里面的属性是动态赋值的），然后这个属性是不能直接在methods里面通过this.获取的，所以需要监听它的变化，如果发生变化，再赋值过去。父组件 Father.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<demo1 :message="message"></demo1>
<button @click="alter">父组件传值</button>
</template>
<script>
import demo1 from "@/components/demo1";
export default {
name: 'App',
components: {
demo1
},
data(){
return{
message:'seeYou',
}
},
methods:{
alter(){
this.message="happy"
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件
<template>
<div>
<div>{{msg}}</div>
<button @click="msg='hello'">改变msg</button>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "demo1",
props:{
message:String
}
,
watch:{
message:function (newData){
this.msg=newData;
this.getMessage(this.message)
}
},
data(){
// return obj
return {
msg:'',
}
},
methods:{
getMessage(){
console.log(this.msg)
}
}
}
</script>
<style scoped>
</style>
-
vue3 setup
一文看懂vue3中setup()和 ＜script setup＞＜script＞的区别 -
vue中四个级别的作用域
全局作用域
子树作用域
组件作用域（可以理解为类）
实例作用域（可以理解为对象）
其实还应该有一个代码块作用域（let） -
原生js实现文件下载
-
前端从后端下载或导出文件的方法
-
img动态绑定src属性
注意如果是vue项目文件夹下的资源（例如assets目录）需要require函数
//img标签
<img :src=imgSrc>
data：{
return{
imgSrc=require(imgUrl)//imgUrl:图片的相对地址
}
}
- 如何让div里的span标签内容平均分布在div内？
- 报错：
Runtime directive used on component with non-element root node.
意思是自定义指令不能放到组件上，而是要放到自有的元素上,也就是这里用到的v-show不能放在自定义组件上,而是放在原来就有的标签上,所以这里套了一层div
