前几天做博客练练手,熟悉一下vue的使用方式,遇到了一个小问题。
<div id="app">
博文标题: {{title}}
<!--博文内容-->
<div v-html="html"></div>
</div>
var app = new Vue({
el: '#app',
data: {
title: 'Hello Word',
html: '<p @click="nClick"> 博文内容 <p>'
},
methods: {
nClick: function (event) {
alert('外部事件');
}
}
简化一下模板,我想对博文内容的<p>加个事件,单击的时候做一些操作,但是这么写并没有触发事件,因为对于vue来说,绑定的只是字符串,而不是虚拟dom,所以不能直接加事件。
然后想到的就是jQuery,因为方便嘛。
$("#blogArticle").find("p,ul,h1,h2,h3,h4,h5").on();
不过这样不够vue呀。会被喷的。那么用vue怎么做呢?找了好多资料,也到处去问,得到的答案都有点太复杂(组件、内部的,,,,反正还没看懂呢)。对于初学者很难一下子看懂这么深奥的知识点,并且达到会使用的程度。
当然要学好vue,这些高深的知识还是要掌握的,只是我遇到的这个似乎是一个小问题吧,不用把意大利炮拉过来打蚊子。
想了好几天,也碰壁好几次,甚至因此被一个技术讨论群给踢出去了——让我转行。好像是说我不爱学习,或者是没有专研精神。
不过好在今天早上突然冒出来一个灵感搞定了这个问题,同时也是对于vue的模板、实例的关系更为了解。
好了,不跑题了,说答案:
var app = new Vue({
el: '#app',
data: {
title: 'Hello Word',
html: '<p id="app2" @click="nClick"> {{message}}<p>'
},
created:function() {
//渲染完毕之后执行,这样才能找到外层绑定上去的博文内容。
this.$nextTick(() => {
//再建立一个vue实例,和内部的p对应
var app2 = new Vue({
el: '#app2',
data: {
message: '内部 Hello Word'
},
methods: { //内部的单击事件,这样就可以对应上了,测试通过。
nClick: function (event) {
alert(event.target.innerText);
}
}
});
});
}
});
这个,使用的都是vue基础的方法,不涉及高深的用法,便于理解。代码也很简单,data部分可以去掉,只是试一试插值绑定是不是好用。
绑定博文之前,只需要用replace给p 加上事件就可以了。
@老尚带你学前端