在vue2中 使用js 在页面中插入dom节点 并对插入的节点进行数据双向绑定以及事件绑定

在Vue2中，可以使用`v-bind`和`v-on`指令来实现数据双向绑定和事件绑定。在JS中，可以使用`appendChild`和`createElement`方法来插入DOM节点。

以下是一个例子，假设我们需要在页面中插入一个按钮，并且当点击按钮时，能够改变页面中的数据：

HTML代码：

<div id="app">
  <button id="my-btn">Click Me</button>
</div>

JS代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted: function() {
    var btn = document.getElementById('my-btn');
    var self = this;
    btn.addEventListener('click', function() {
      self.message = 'You clicked the button!';
    });
  }
});

上述代码中，我们首先创建了一个Vue实例，并将其挂载到id为`app`的元素上。在`data`选项中，我们定义了一个`message`属性，用于存储页面中的数据。在`mounted`钩子函数中，我们获取到id为`my-btn`的按钮元素，并使用`addEventListener`方法为其绑定了一个`click`事件。在事件处理函数中，我们将`message`属性的值修改为`You clicked the button!`，这样就能实现页面数据的双向绑定和事件绑定了。

当然，以上代码中没有使用Vue提供的`v-bind`和`v-on`指令，这是因为在插入DOM节点时，Vue的模板编译器无法识别这些动态创建的节点。如果需要使用`v-bind`和`v-on`指令，可以使用Vue提供的`createElement`方法来创建元素节点，然后使用`$mount`方法将其挂载到页面上。例如：

var app = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  mounted: function() {
    var btn = this.$refs.myBtn;
    var self = this;
    btn.addEventListener('click', function() {
      self.message = 'You clicked the button!';
    });
  },
  render: function(createElement) {
    return createElement('div', [
      createElement('button', {
        attrs: {
          id: 'my-btn'
        },
        ref: 'myBtn',
        on: {
          click: this.handleClick
        }
      }, 'Click Me')
    ]);
  },
  methods: {
    handleClick: function() {
      this.message = 'You clicked the button!';
    }
  }
});

app.$mount('#app');

上述代码中，我们首先创建了一个Vue实例，并在`render`方法中使用`createElement`方法来创建了一个按钮元素。在按钮元素的`on`属性中，使用了`handleClick`方法来处理`click`事件。在`mounted`钩子函数中，我们获取到按钮元素，并使用`addEventListener`方法为其绑定了一个`click`事件。在事件处理函数中，我们将`message`属性的值修改为`You clicked the button!`，这样就能实现数据的双向绑定和事件绑定了。最后，使用`$mount`方法将Vue实例挂载到页面上。