vue和jquery 操作DOM的區(qū)別
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還略多一些,
但頁面復(fù)雜后澄者,用 jquery獲取dom 就會變得復(fù)雜,而vue的代碼量卻沒有變化?
如 n個div嵌套的情況