jQuery转Vue项目实践总结

谁借莪１个温暖的怀抱￠ 2021-06-26 16:06 486阅读 0赞

> 工作需要，将公司项目从`jQuery`转成`Vue`来写。这里分享下转变项目的过程并写了一个小`demo`，希望能对遇到同样问题的朋友一些帮助。  
> PS： 本人`Android`开发，兼职前端，前端知识浅薄，有什么不对的地方还请指出，大家共同进步。谢谢~

## `jQuery`和`Vue`的区别 ##

jQuery是使用选择器（`$`）选取`DOM`对象，对其进行赋值、取值、事件绑定等操作，其实和原生的`HTML`的区别只在于可以更方便的选取和操作`DOM`对象，而数据和界面是在一起的。比如需要获取`label`标签的内容：`$("lable").val()`;,它还是依赖`DOM`元素的值。  
`Vue`则是通过`Vue`对象将数据和`View`完全分离开来了。对数据进行操作不再需要引用相应的`DOM`对象，可以说数据和`View`是分离的，他们通过`Vue`对象这个`vm`实现相互的绑定。这就是传说中的`MVVM`。

## jQuery to Vue ##

### 1. 导入`Vue.js`，去除`jQuery`。 ###

下载Vue.js，导入工程,我将其放在头文件中。

### 2. 根视图id绑定 ###

为最外层的`div`标签定义`id`，然后使用`Vue`的`el`属性进行绑定

<div id="app">
            <h2>学生信息登记</h2>
            ...
            <label>{
       { result }}</label>    
    </div>
    ...
    <script> new Vue({ el: '#app', ... }); </script>
    ...

### 3. 为`input`添加`v-model` ###

使用`v-model`属性将`input`标签的`value`值绑定到`data`的相应数据中。

注意上方的`v-model`，我们在`Vue`对象的`data`属性中绑定数据：

new Vue({ 
        el: '#app',
        data: { 
            name: '',
            sex: '',
            age: '',
            member: '',
            result: ''
        },
        ...
    })

到这里就实现了将表单`input`框和数据的绑定。更多`Vue`表单绑定可以查看表单控件绑定

### 4. 删除`id、name`这些用于`jQuery`的属性 ###

在使用`jQuery`时，在`HTML`中需要定义大量的`id、name`之类的属性用于`jQuery`选择器获取元素。

<input type="text" placeholder="请输入姓名" id="name">
    ...

var name = $('#name').val();

我们这里就不需要了。去除`HTML`中的这些属性。  
（其实这里`v-model`和`id`的作用有些类似，都是一个桥梁作用。我在修改的时候偷懒直接将`id`改成`v-model`，后面的`name`不改~）

### 5. 将点击事件`onclick`改为`v-on:click` ###

`Vue`提供了`v-on`来监听`DOM`事件，如`demo`中的点击事件监听属性`v-on:click`。

然后在`Vue`对象的`methods`属性中创建这两个事件方法。

new Vue ({ 
        ...
        methods: { 
            commit: function () { ...},
            reset: function () { ...},
        ...
    ...

另外，Vue还提供了其他`v-on:属性`，如`v-on:change`、`v-on:keyup`等。具体请看：[方法与事件处理][Link 1]

### 6. 引用数据 ###

作为`MVVM`，当然是双向绑定的。`Vue`用`v-model`属性使`input`可以修改数据内容，实现界面修改数据；使用双大括号来引用数据内容，实现数据修改界面。  
具体写法如下：

<label>{
       { result }}</label>
    ...

data: { 
        result: 'hello world',
        ...
    }

如上引用后，数据`hello world`将会实时同步显示在`label`标签上，每当`result`数据有所改变，`label`的内容立即会改变。

### 7. 替换`ready`方法 ###

`jQuery`中为我们提供了一个`document`的`ready`方法，`Vue`中有`ready`属性，它们的触发时间差不多，具体要参考各自的生命周期。  
**jQuery写法：**

$(document).ready(function () { 
        alert("加载完成");
    });

**Vue写法：**

new Vue ({ 
        ...
        ready: function () { 
            alert("加载完成");
        },
        ...
    })

### 8.修改获取和修改元素属性的方式 ###

这是`jQuery`和`Vue`的最大不同点了。先看代码:  
**jQuery:**

这是显示表单结果的函数。jQuery是通过美元符号$来获取指定元素，然后通过`val()、text()`等方法获取指定元素的内容或者为指定元素赋值。  
**Vue：**

同样是显示表单结果的函数。`Vue`不需要获取`DOM`元素，只需要获得和修改`data`对象中的数据就可以了。  
这里需要注意的是：要用`jQuery`获得或者修改一组`radio`很麻烦，需要操作`checked`属性；而`Vue`处理`radio`只需通过数据，数据内容就是`radio`的`value`值，修改`value`值`radio`就会自动选择目标项。`checkbox`也是如此，`jQuery`要使用`checked`，而`Vue`只需要知道`checkbox`绑定的`data`为`true`或者`false`就可以知道`checkbox`是否被选中。

### 9. Vue使用`watch`方法测试 ###

Vue的`watch`方法真的挺好用，当程序出现问题时可以将出问题的`data`使用`watch`打`log`，每当该数据发生变化时，`watch`方法都会被触发。很好用~

watch: { 
        'sex': function (val, oldVal) { 
            console.log('oldVal = ' + oldVal + ' val = ' + val);
        }
    }

## 总结心得 ##

jQuery完全是通过美元符号来对各种元素进行操作！根据`HTML`元素的`id、name`等属性来获取到元素并对其进行取值、赋值、修改属性能行为。  
`Vue`的使用过程 是：先绘制`HTML`界面，然后在需要绑定数据的地方写下`v-model、v-on`等这些绑定属性和方法，在显示数据内容的地方使用双大括号显示内容。然后在`Vue`中，`el`属性绑定根视图的`id`，`data`属性定义并初始化`v-model`、双大括号用到的数据和一些其他数据。`methods`属性定义在`v-on`中用到的和一些其他方法。更新界面修改数据实现。而修改数据通过操作界面实现。

写完了这个`demo`后，感觉到`Vue`的确有它的魅力所在。它的`MVVM`让业务逻辑变得更加清晰和简单。

## 所有代码 ##

jQueryPage

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <script src="jquery-2.2.3.js"></script>
    </head>
    <body>
        <div>
            <h2>学生信息登记</h2>
            <br>
            <div>
                <label>姓名：</label>
                <input type="text" placeholder="请输入姓名" id="name">
            </div>
            <div>
                <label>性别：</label>
                <input id="sex01" type="radio" value="1" name="sex">
                <label for="sex01">男</label>
                <input id="sex02" type="radio" value="2" name="sex">
                <label for="sex02">女</label>
            </div>
            <div>
                <label>年龄：</label>
                <select id="age">
                    <option selected>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                </select>
            </div>
            <div>
                <label>党员：</label>
                <input type="checkbox" id="member">
            </div>
            <br>
            <button id="btnCommit" onclick="commit()">提交</button>
            <button id="btnReset" onclick="reset()">重置</button>
            <br>
            <br>
            <label id="result"></label>
        </div>
        <script type="text/javascript"> $(document).ready(function () { alert("加载完成"); }); function commit() { var name = $('#name').val(); var sex = ''; if (getChackedValue('input[name=sex]') == 1){ sex = '男' }else if (getChackedValue('input[name=sex]') == 2){ sex = '女' } var age = $('#age').val(); var member = ''; if($('#member').is(':checked')) { member = '党员'; }else { member = "非党员"; } var result = name + ' ' + sex + ' ' + age + ' ' + member; $('#result').text(result); } function reset() { $('#result').text(''); } function getChackedValue (CheckboxId) { var value = 0; var i = 0; $(CheckboxId).each(function () { if($(CheckboxId).eq(i).is(':checked')) { value = $(CheckboxId).eq(i).val(); return; } i++; }); return value; } </script>
    </body>
    </html>

VuePage

<!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>
        <meta charset="UTF-8">
        <title>index</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>学生信息登记</h2>
            <br>
            <div>
                <label>姓名：</label>
                <input type="text" placeholder="请输入姓名" v-model="name">
            </div>
            <div>
                <label>性别：</label>
                <input id="sex01" type="radio" value="1" v-model="sex">
                <label for="sex01">男</label>
                <input id="sex02" type="radio" value="2" v-model="sex">
                <label for="sex02">女</label>
            </div>
            <div>
                <label>年龄：</label>
                <select v-model="age">
                    <option selected>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                </select>
            </div>
            <div>
                <label>党员：</label>
                <input type="checkbox" v-model="member">
            </div>
            <br>
            <button id="btnCommit" v-on:click="commit">提交</button>
            <button id="btnReset" v-on:click="reset">重置</button>
            <br>
            <br>
            <label>{
       { result }}</label>
        </div>
        <script> new Vue({ el: '#app', data: { name: '', sex: '', age: '', member: '', result: '' }, ready: function () { alert("加载完成"); }, methods: { commit: function () { var name = this.name; var sex = ''; if (this.sex == 1){ sex = '男'; }else if (this.sex == 2){ sex = '女'; } var age = this.age; var member = ''; if (this.member){ member = '党员'; } else { member = '非党员'; } var result = name + ' ' + sex + ' ' + age + ' ' + member; this.result = result; }, reset: function () { this.result = ''; } }, watch: { 'sex': function (val, oldVal) { console.log('oldVal = ' + oldVal + ' val = ' + val); } } }); </script>
    </body>
    </html>

[Link 1]: https://cn.vuejs.org/v2/guide/events.html