在使用addEventListener时, 发现在Vue模板外为Vue实例添加的监听操作无效
按照以下代码的执行结果, 我现在的理解就是, 对Vue实例(下图id2区域)的事件监听, 监听代码得放在Vue模板中
而对非Vue实例(下图id1区域)的事件监听, 监听代码不管放在Vue模板里面还是外面, 都不影响执行
<div style="display: flex">
<div id="id1">id1</div>
<div id="app">
<div id="id2">id2</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
function func1(id, log) {
document.getElementById(id).addEventListener('click', function() {
console.log('click ', id, log);
})
}
func1('id1', ' out'); // 有效
func1('id2', ' out'); // 无效
const app = new Vue({
el: "#app",
created() {
func1('id1', ' created'); // 有效
func1('id2', ' created'); // 无效
},
mounted() {
func1('id1', ' mounted'); // 有效
func1('id2', ' mounted'); // 有效
}
})
</script>
分别点击id1区域和id2区域, 得到的执行情况如下
按照以上代码的执行结果, 我现在的理解就是, 对Vue实例(上图id2区域)的事件监听, 监听代码得放在Vue模板中
而对非Vue实例(上图id1区域)的事件监听, 监听代码不管放在Vue模板里面还是外面, 都不影响执行
vue生命周期中created时this被初始化,模板未被挂载,所以created中的id2拿不到;mounted时模板已被挂载,所以id2可以拿到;写在外面感觉也是因为模板未挂载的原因,导致id2拿不到
版本太老了。1.0的vue有很多项目都不支持了。建议用2.0或者最新的3.0