jquery项目转vue

jquery项目转vue

转载文章https://blog.csdn.net/violetjack0808/article/details/51451672，为了方便自己查看，后续加一些自己的总结。

(一) jQuery和Vue的区别

• jQuery是使用选择器 ($) 选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();，它还是依赖DOM元素的值。
• Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
• Vue的使用过程是：先绘制HTML界面，然后在需要绑定数据的地方写下v-model、v-on等这些绑定属性和方法，在显示数据内容的地方使用双大括号显示内容。然后在Vue中，el属性绑定根视图的id，data属性定义并初始化v-model、双大括号用到的数据和一些其他数据。methods属性定义在v-on中用到的和一些其他方法。更新界面修改数据实现。而修改数据通过操作界面实现。

(二) jQuery to Vue

1. 添加v-model

2. 删除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不改~）

3. 将点击事件onclick改为v-on:click

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

4. 引用数据

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

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

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

5. 替换ready方法

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

jQuery写法:

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

Vue写法：

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

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

这是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是否被选中。

7. Vue使用watch方法测试

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

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

————————————————
版权声明：本文为CSDN博主「violet-jack」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/violetjack0808/article/details/51451672