vue问题

vue问题

有个问题不解,为什么我在src目录下新建了一个pages目录,下面结构是这样的:
http://img1.sycdn.imooc.com//climg/5ff2722f09ea9d2b01860169.jpg


然后设置了router文件夹下的index.js
http://img1.sycdn.imooc.com//climg/5ff2729009f5b0c905740729.jpg


然后test1和test2下面的文件分别在script标签里输入如下:

test1里面:

http://img1.sycdn.imooc.com//climg/5ff272de0902d71303180244.jpg

test2里面:

http://img1.sycdn.imooc.com//climg/5ff272f30972696102880200.jpg


最后分别访问这两个页面的地址,为什么结果会混合在一起?
http://img1.sycdn.imooc.com//climg/5ff2732f096b3fbc05360131.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,问题解答如下:

1、export和export default其实就是语法上的不同,用哪一个都能实现效果。所以只要按照它们规定的语法导出和导入,随意用哪一个都行。


2、以上先让同学明白两者是可以任意用的,没有严格的规定必须要用哪一个。然后再给同学分享一个实际开发时的小规范:

(1)export default只能导出一个。当前模块中,只有一个变量(或者函数等等)需要导出,那么使用export default。示例:

http://img1.sycdn.imooc.com//climg/5ff41c3e0941ed1803440142.jpg


(2)export 可以导出多个。当前模块中,有多个变量(或者函数等等)需要导出,那么使用export 导出,示例:

http://img1.sycdn.imooc.com//climg/5ff41cca09ac96fb04930148.jpg

export default和export 可以同时在一个模块中使用的(export default只能默认导出一个),尽管可以混着用,但是这样做肯定不如统一用export 看起来更整洁规范哦。

祝学习愉快~

好帮手慕夭夭 2021-01-04 13:38:05

同学你好,问题解答如下:

1、是的,这个是正常的。

2、如果放在<script>直接输出,在页面打开时,就会在全部执行了,刷新了也会全部执行。如果在刷新页面时,只输出当前组件的内容,需要放在生命周期中。参考如下,代码放在mounted(放在created也可以,只要是组件创建或者挂载时再输出就行)中,和直接放在<script>中的区别:

http://img1.sycdn.imooc.com//climg/5ff2a9b509a1180b07050270.jpg

咱们平时在vue项目中写js代码,并不会直接放在<script>标签中,而是放在生命周期中或者自定义的方法中等。这样当组件在页面渲染之后,或者触发自定义方法之后才会执行js代码。这个具体情况具体分析,如果后续有不明白的,可以再来问答区提问,老师会为你指导。

祝学习愉快~

  • 提问者 人生的起源 #1

    再问下那个导入导出的问题

    什么时候用export,什么时候用export default?

    2021-01-05 14:36:07
好帮手慕夭夭 2021-01-04 12:06:33

同学你好,因为vue中是单页面应用,即只有一个html。路由不管如何切换组件,它们都是在同一个html中显示的。同一个页面输出的内容,除非我们自己手动刷新这个html页面或者手动清除之前输出的记录,不然控制台输出了就是输出了,不会自己销毁这些内容。例如如下,老师多次切换路由,前面输出的内容都是存在的:

http://img1.sycdn.imooc.com//climg/5ff292b6092c9a0f01450113.jpg

当刷新页面,只显示当前组件的输出的内容:

http://img1.sycdn.imooc.com//climg/5ff293cc0985a2f703620164.jpg


祝学习愉快~

  • 提问者 人生的起源 #1
    所以这种情况是正常的是吗?
    2021-01-04 13:04:18
  • 提问者 人生的起源 #2
    但是我手动刷新完,它也是两个一起出来,比如“张三 李四”和123同时出现,不会只出现“张三 李四”,或者只出现123
    2021-01-04 13:29:48
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师