html中使用vue教程【内含问题 ferenceError: xx function is not defined 】

问题

近期遇到一个问题，我直接在html中定义了一个template，并尝试给他加了一个@click方法绑定了一个vue中的方法，结果可能因为生命周期的问题，显示该方法不存在【关键这玩儿也没办法调整生命周期】，就有了这篇博客

html使用vue

引入

这个很简单，一般推荐大家在这种初期，可以直接在官网查看引入教程【比如vue，element-ui，】

这里直接给出示例【常规的引入vue.js，然后使用vue2/3的语法在script中进行语法的撰写】

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app"><p>{{ message }}</p><button v-on:click="reverseMessage">Reverse Message</button>
</div><script>new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}})
</script>

这样我们就可以使用vue的语法对页面进行操作

案例分析

当时我需要引入一个template，引入方法有两种，如下

// 直接写一个template，然后js中调用【这里通过id进行绑定】
<template id="ex1"><div></div>    
</template>
<script>const ex1 = {template:"#ex1"}    
</script>
//在script中写一个
<script type="text/x-template" id="ex2"><div></div>
</script>

我一开始采用的是第一中【事实证明第二种好用】

但是这时候我在template里面定义了@click出发一个vue中的一个方法，报错显示xx is not define

后来我的想法是，既然这是字典格式的，是不是说明我能直接在template中定义一些方法，结果证明这是可行的

// 直接写一个template，然后js中调用【这里通过id进行绑定】
<template id="ex1"><div></div>    
</template>
<script>const ex1 = {template:"#ex1",methods:{a(){alert(1)}}}    
</script>

我直接在这个变量内部使用methods定义了一个方法，而且事实证明差不太多即这个和单独的vue组件，如果只是简单的几个页面，并不写vue框架的项目，只是需要简单的引用一些功能，这就完全够用了

总结

当遇到问题的时候，多去接触底层的api

像这次的问题，主要就是不知道底层的api，导致之前一直使用方法外接【类似于window.方法=this.方法()进行引出】，学好基础，才能在遇到一些小问题的时候立于不败之地