关于隐式创建vue实例实现简化弹出框组件显示步骤

我们在使用vue写alert组件的时候，经常是定义了一个alert.vue，然后引入alert.vue，然后配置参数等等，非常繁琐，那有没有一种方式可以像window.alert("内容")那样简单调用呢？

答案是有的，

vue.extent会返回一个预设了部分选项的Vue实例构造器，既然是vue实例构造器那我们理论上是可以像new Vue({})那样去new 这个extent实例的，vue还提供了$amount,表示挂在到节点上，这样我们理论上可以这样：

    var author = Vue.extend({
        template: "<p><a>helloe</a></p>"
      });

      function addEle(){
        new author({propsData:{author:"zhuwei"}}).$mount("#author");
      }

　　我们通过调用addEle方法就动态在ID为author节点上渲染了一个vue（前提是html界面已经存在ID为author的节点），到现在为止好像没什么特别的，如果我们在addEle方法里面直接创建一个ID为author的节点呢

    function addEle(){
        var authorEle = document.createElement("div");
        authorEle.setAttribute("ID","author");
        document.body.appendChild(authorEle);
        new author().$mount("#author");
      }

　　这样至少html部分我们不需要添加这个ID为author的节点了，然后因为是弹出框组件，所以我们需要暴露出一个属性显示用户希望显示的信息，这里面我们使用propsData,它可以在new vue({})的实例中指定属性值，vue本意说是为了方便测试，这里我们拿过来用来给我们的extent实例传递显示信息：

    function addEle(msg){
        var authorEle = document.createElement("div");
        authorEle.setAttribute("ID","author");
        document.body.appendChild(authorEle);
        new author({propsData:{author:msg}}).$mount("#author");
      }

　　这样当用户想弹出框的时候，直接点击addEle("hello world")就可以弹出信息，当然具体的弹出框组件我并没有写，这里面只是说出设计思想，细节大家都可以实现