Vue个人学习经验小结

主要体现为使用vue init webpack搭建项目并使用相关工具完善
vue2.0推荐使用axios获取数据

this.axios.get().then((response)=>{console.log(response)})

搭配swiper和elementUI、echarts来丰富你的界面
做出各种炫酷的效果

使用vue init webpack搭建项目之后的一些使用小技巧:
1、需要引入的静态文件诸如js、css、自定义json等文件放在src目录下的static文件夹中并在项目中唯一的index.html中引入
2、需要引入的图片都放在src目录下的assets文件夹中
3、路由跳转需要的参数需在src目录下的router文件夹中的index.js文件中引入(使用import格式)并对应的在下方添加path路径
4、个人推荐将全页面固定不变的部分区块写在App.vue中,其余需要用到的vue组件写在components文件夹中并进行合理的引用,可以事半功倍的完成项目
5、搭配axios使用时,需要自行安装并在mian.js中引入axios的配置
6、搭配swiper使用时,需要根据自己选择的代码区块来引入对应的配置
7、搭配echarts使用时,需要注意嵌套图表的盒子的大小并在文档下寻找相应的属性来修改
8、页面的重定向,个人理解为默认显示页面,即刷新页面时展示出来的界面
9、搭配自定义钩子函数使用时需要注意是否需要考虑元素挂载对获取数据的影响并合理的进行选取,当前个人经常使用created和mounted
10、灵活使用elementUI提供的各种模块化工具可以节省许多不必要的时间,配置文件也相对简单,效果更多样化

对于keep-alive的理解:keep-alive是vue的内置组件,在组件切换过程中,keep-alive能严格的将状态保留在内存中,带来的好处是可以防止重新渲染DOM
父子组件之间互相传值:
1、父子组件传值:在父组件中注册子组件并在子组件中给props设置一个属性,相应地在子组件里使用此属性,将需要传递的数据赋值给此属性即可完成父子组件传值
2、子父组件传值:在子组件中使用 e m i t 使 emit方法发送需要传递的数据并在父组件中使用 on方法接收传递来的数据完成子父组件之间的传值

猜你喜欢

转载自blog.csdn.net/ThroughWeb/article/details/89525176
今日推荐