jquery和vue,react等mvvm框架的实战区别

  js, 前端, 架构
484 views
刚开始学vue的时候总是感觉好像跟jq也没多大区别,无非就是有数据双向绑定,生命周期。好像用jq也能很快的获取数据,更新视图,发送请求等

做了几个项目后,对其中的区别愈加明了。首先mvvm框架的精华就是在于组件(组件有自己的生命周期,自定义事件等)。

举个日期组件的例子对比下:
1.jquery日期组件用法:

<input type="text" name="birthday" value="10/24/1984" />

<script>
$(function() {

  $('input[name="birthday"]').daterangepicker({ //初始化组件
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    maxYear: parseInt(moment().format('YYYY'),10)
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
    alert("You are " + years + " years old!");
  });

  $('#daterange').on('apply.daterangepicker', function(ev, picker) { //监听自定义事件
  //do something, like clearing an input
  $('#daterange').val('');
});
});
</script>

组件官网链接:daterangepicker

2.element ui日期选择器组件

<template>
  <div class="block">
    <p>组件值:{{ value }}</p>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  };
</script>

组件链接:date-picker

区别就很容易看出来了,jq的组件需要看javascript代码,才能知道组件的功能和用法。而vue组件只需要看html模板视图,就能清楚的知道,组价的功能和绑定的事件。这对团队开发来说是必不可少的

LEAVE A COMMENT