会jquery 就能快速快速上手 vue? 你仿佛在说笑

2019-03-15  本文已影响0人  Mr菜头

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嵌套的情况

上一篇下一篇

猜你喜欢

热点阅读