Can't vue use the introduced js method in html tags?

I found a problem when I changed the project today.
requirements:

imgtoken

it turns out that there is an error and the getToken method can not be found. Of course, I know how to solve this problem. I just don"t understand why the introduced js method can not be used directly in html. Is it because vue can only use the method mounted to the instance?

then do some extended thinking. The project uses the instantiated vue in vue-cli, scaffolding is in main.js, and then mounts and replaces the corresponding tag in the index.html folder according to the id in el. In this case, the vue page we create will have the following template:

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

every page of vue is essentially a component, export default. The understanding is export, so the question is, where is this export exported? Because my other pages do not introduce this page as a component, how are the hook functions such as created triggered? Because without import, these methods are just statements.

I would like to talk about the results of my own thinking here. I don"t know if I want to verify it.

App.vue is equivalent to the root component of all pages, and all pages can be understood as sub-components of App.vue, so when we load App, we will display the sub-components page through the route exit, and when we register the route, we can see that there is an option for component. Can this component be understood as registering the component and binding with the current path? After the registration of the component, vue will do some processing instead of our own manual import, so the corresponding hook function can be triggered when the route is redirected to each page. So if I add a custom method, test, under methods, how do I want to use this test, on other pages?

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

summarize the question to ask: why the introduced js method cannot be used in
1.html.
2.export default {} is exported and not instantiated, so how did you get the vue instance this on each page, and how did the hook function trigger?
3. Self-defined test method in the page, can it be introduced and used in other pages?

Nov.03,2021

Brother, I have the same problem! Now I've solved it!
{{getDateTime (modalInfo.order.dateline)}}
define a function in vue
getDateTime (dateline) {

        return util.getDateTime(dateline);
    }

equals {{util.getDateTime (modalInfo.order.dateline)}}


1.html can use the incoming js method, provided that the method you introduce meets the es6 module specification
2. The vue template you wrote is not the final code, but also compiled by complier
3. No actual attempt has been made

Menu