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

Question

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

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方法，在别的页面可以引入使用吗。

Answer 1

老哥，我遇到同样问题！现在我解决了！{{getDateTime(modalInfo.order.dateline)}}在vue里面定义一个函数getDateTime (dateline) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;util.getDateTime(dateline); &nbsp;&nbsp;&nbsp;&nbsp;}等于 {{util.getDateTime(modalInfo.order.dateline)}}

Answer 2

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