vue dom操作_vue 使用v-html 绑定数据后，操作内部dom的方法

前几天做博客练练手，熟悉一下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 加上事件就可以了。

@老尚带你学前端