vue *** 作dom

1、 this.$refs.xxx拿到虚拟dom,可以进行真实dom的一切 *** 作

1）在标签中添加ref="xxx"

2）在方法中用this.$refs.xxx拿到这个元素，跟document.getElementById('*')一样。

在vue的世界里，没有动态添加dom这种概念，一切都是数据驱动

<h1>{{obj.name}}</h1>

<h2>{{obj.prop}}</h2>

<script src="../Scripts/vue.js"></script>

<script>

$(function () {

alert(1)

})

var vue = new Vue({

el: 'body',

data: {

//初始obj是空的，因此视图默认是什么都没有

obj:{}

},

ready: function () {

//这里是vue初始化完成后执行的函数

this.obj.name = "对象名字"//这时会显示name

},

methods: {

//这里是自定义的方法

setProp: function () {

this.obj.prop = "测试"//这时会显示测试

}

}

})

既然你是通过dom添加，那就用dom绑定就是了

document.getElementById('table').innerHTML = strdocument.getElementById('qwe').onclick = function(){console.log(1)

}

在vue，react中，讲的就是虚拟dom，就是尽量避免 *** 作dom，所以这样写的思想是错的，你应该去利用数据来渲染

template:

<table id="table">

<tr v-for="(item,i) in tableData" :key='i'>

<td v-for="(item2,j) in item" :key='j' @click='handleClick'>{{item2.title}}</td>

</tr>

</table>

data:

tableData:[]

methods:btn(){

this.tableData = [[{title:'qwe'}]]

}

---