会jquery 就能快速快速上手 vue? 你仿佛在说笑
vue和jquery 操作DOM的区别
jquery 操作Dom 的思维:获取Dom元素
步骤:
1、在dom中输入id
2、用选择器选中 该id ,修改id的元素
vue 操作Dom 思维: Dom是对象
步骤:
1、在dom中声明属性,
2、 在js中直接修改,该属性
如 用jquery时 修改表格中的值
html
<table id="table1" class="table table-bordered col-sm-8">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td id="col1" >1.1</td>
<td>1.2</td>
</tr>
<tr>
<td id="col1" >1.1</td><!--声明dom id-->
<td>{{col2}}</td> <!--声明 dom 属性-->
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</tbody>
</table>
jquery
$("#col1").text('jqHelloCol2'); //获取Id为 col1 的dom 元素 ,并修改
vue
this.col2='vhelloCol2';//修改 dom对象 的 col2 属性,并修改
上面列子 看似jquery 和 vue 代码量都差不多,甚至vue还略多一些,
但页面复杂后,用 jquery获取dom 就会变得复杂,而vue的代码量却没有变化
如 n个div嵌套的情况