The original project is jquery+BootStrap, which has introduced more plug-ins, so the project is redundant and difficult to maintain. Now I am ready to use vue to rewrite some functions, and then expand to the whole world and refactor the project.

This article is good, turn to study. https://blog.csdn.net/violetjack0808/article/details/51451672

Difference between jQuery and Vue

jQuery uses selectors ($) to select DOM objects and perform operations such as assignment, value acquisition, and event binding. In fact, the difference from native HTML is that DOM objects can be more easily selected and manipulated, while data and interface are together. For example, you need to get the content of the label tag: $("lable").val();, which still depends on the value of the DOM element.
Vue completely separates data and View through the Vue object. It is no longer necessary to refer to the corresponding DOM object to operate the data. It can be said that the data and the View are separated, and they are bound to each other through the vm of the Vue object. This is the legendary MVVM.

jQuery to Vue

1. Import Vue.js and remove jQuery.

Download Vue.js, import the project, I put it in the header file.

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

Vue.js download address

2. Root view id binding

Define an id for the outermost div tag and bind it using Vue's el property

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

3. Add v-model to the input

Use the v-model attribute to bind the value of the input tag to the corresponding data of data.

<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>

Note the v-model above, we bind data in the data property of the Vue object:

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

At this point, the binding of the form input box and the data is realized. For more Vue form bindings, see Form Control Bindings

4. Delete the id and name attributes for jQuery

When using jQuery, a large number of attributes such as id and name need to be defined in HTML for jQuery selectors to get elements.

<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。

<button id="btnCommit" v-on:click="commit">提交</button>
<button id="btnReset" v-on:click="reset">重置</button>

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

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

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

6. 引用数据

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

<label>{{ result }}</label>
...
data: {
    result: 'hello world',
    ...
}

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

7. 替换ready方法

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

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

Vue写法：

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

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

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

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);

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

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;

同样是显示表单结果的函数。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>

jquery project to vue