vue在html标签中不能使用引入的js方法吗?

新手上路,请多包涵

今天改项目的时候发现了一个问题。
需求:

图片描述

img标签获取验证码,发请求的时候需要带上token,于是我在下面进行了引入
图片描述

结果发现居然会报错,找不到getToken方法,当然这个问题我知道怎么解决,我只是不明白为什么在html中不能直接使用引入的js方法,是因为vue中只能使用挂载到实例上的方法吗?

接着又进行了一些拓展思考,项目用的是vue-cli,脚手架中实例化vue是在main.js里,然后根据el里的id挂载并替换到index.html文件夹相应的标签,而这样的话我们建立的vue页面会有如下模板:

<templemte>
    <div></div>
</templemte>
<script>
export default {
    name: 'xx',
    data() {
        return {}
    },
    created(){},
    methods:{}
}
</script>

vue的每个页面本质都是组件,export default的理解是导出,那么问题来了,这个导出是导出到哪里?因为我其他的页面并没有把该页面当组件引入,既然这样的话其中的created等钩子函数是如何触发的?因为不import的话这些方法只是声明而已。

我在这里说下我自己思考的结果,不知道对不对想求证一下:

App.vue相当于是所有页面的根组件,所有页面可以理解为App.vue的子组件,那么当我们加载App之后,会通过路由出口进行子组件页面的展示,而注册路由的时候我们可以看到有一个component的选项,这个component是不是可以理解为注册组件,并且与当前path绑定?而组件注册之后vue自己会做一些处理,代替掉了我们自己手动import,所以路由跳转各个页面的时候可以触发相应的钩子函数。那么如果我在methods下面加一个自定义的方法test,在其他页面我想使用这个test,该怎么写呢。

<templemte>
    <div></div>
</templemte>
<script>
export default {
    name: 'xx',
    data() {
        return {}
    },
    created(){},
    methods:{},
    test() {
        alert(1);
    }
}
</script>

总结一下要提的问题:
1.html中为什么不可以使用引入的js方法。
2.export default{}是导出,并没有实例化,那么每个页面的vue实例this是怎么拿到的,钩子函数又是怎么触发的?
3.自己在页面中自定义的test方法,在别的页面可以引入使用吗。

阅读 12.9k
2 个回答

老哥,我遇到同样问题!现在我解决了!
{{getDateTime(modalInfo.order.dateline)}}
在vue里面定义一个函数
getDateTime (dateline) {

        return util.getDateTime(dateline);
    }

等于 {{util.getDateTime(modalInfo.order.dateline)}}

1.html可以使用引入js方法,前提是你引入的方法要满足es6模块规范
2.你写的vue模板不是最终的代码,还要经过complier编译
3.没有实际尝试过

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题