「框架篇」不需构建 使用 Vue 替换 jQuery

我们可以像使用 jQuery 一样,不需要进行编译构建,通过 script 标签将 vue.js 引入到项目之中。这里我们使用 Vue 和 jQuery 两种技术栈 实现项目中一些常见的功能,以及阐述我们为什么我们要着么做。

只重构一些代码,我们可以通过 script 标签 像引入 jQuery 样来引入 Vue.:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue/jQuery</title>
</head>
<body>
<!-- 不需构建,通过script标签直接引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> -->
</html>

接下来我们对开发中的一些常见功能,通过使用 Vue 和 jQuery 来对比两个版本的实现差异。

监听用户输入

在一些网页上,一个非常常见的功能是用户在输入表单时,监听用户的输入。

jQuery 版本:

<!DOCTYPE html>
<html lang="en">
HTML
 <div id="app">
  <label for="thing">用户名:</label>
  <input id="thing" type="text" />
  <p class="formname"></p>
</div>


JS
$(function() {  
  $('#app').keyup(function(e) {
    var formname = $(this).find('.formname');
    var n_input = $(this).find('#thing').val();
    formname.empty();
    formname.append(n_input);
  });
});

vue 版本:

HTML
<div id="app">
  <label for="name">用户名:</label>

  <input id="name" type="text" v-model="name" />
  <p>{{ name }}</p>
</div>


JS
//创建一个Vue实例
new Vue({
  el: '#app',
  data: {
    name: '' 
  }
})

这个例子中体现了 Vue 的一些优点,Vue 是响应式的,它能够响应内容的变化。您可以看到,当我们更新表单输入的内容时,它会立即发生变化。

而在 jQuery 版本中,DOM 处于控制状态,我们从DOM中取出内容,添加到对应的 DOM 之中。如果要更改 HTML 元素的结构,我们必须调整我们的 JS 代码以对应这些更改。

在Vue版本中,我们通过 v-model 指令创建数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上是语法糖,它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

切换类名

通过点击 button 按钮,来改变文本的字体颜色。

jQuery 版本:

HTML
<div id="app">
  <button aria-pressed="false">Toggle me</button>
  <p class="toggle">这是一段文本</p>
</div>
JS
$(function() {
  $('button').click(function(e) {
    $('.toggle').toggleClass('red');
    $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false));
  });
});

Vue 版本:

HTML
<div id="app">
  <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button>
  <p :class="{ red: active }">这是一段文本</p>
</div>

JS
new Vue({
  el: '#app',
  data: {
    active: false
  }
})

在 jQuery 版本中,我们将状态存储在 DOM 中,jQuery 通过 DOM 操作 class 名来决定文本字体颜色的改变。

在Vue版本中,red 这个 class 存在与否将取决于数据属性 active。我们根据该属性来设置 red 是否存在。我们不要求 DOM 获取这些信息,我们只需要修改数据的状态即可。

隐藏和显示

这个例子中,我们通过点击 button 来控制按钮的按压状态 aria-expanded 和内容的显示与隐藏。

jQuery 版本:

HTML
<div id="app">
  <button type="button" id="toggle" aria-expanded="false">
    显示/隐藏
  </button>
  <p class="hello">hello</p>
</div>

JS
$(function() {
  $('#toggle').on('click', function() {
    $('.hello').toggle();
    $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false));
  });
});

Vue 版本:

HTML
<div id="app">
  <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'">
    显示/隐藏
  </button>
  <p v-if="show">hello</p>
</div>
JS
new Vue({
  el: '#app',
  data: {
    show: true
  }
})

在这个例子的 Vue 版本中,我们使用了 v-if 指令,v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 时被渲染。

另一个用于根据条件展示元素的选项是 v-show 指令。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

提交表格

jQuery 通过 AJAX 来提交表单,而 Vue 实际上没有像 AJAX 这样的内置东西,在 Vue 应用程序中,通常使用类似 Axios(用于发出HTTP请求的JavaScript库)来帮助完成此任务。

这个例子中,在我们输入表单之前,按钮将显示为灰色,当有用户名输入时,按钮将变为蓝色,当我们提交表单时,我们会阻止页面加载。

jQuery 版本:

HTML
<div id="app">
  <form action="/">
    <div>
      <label for="name">Name:</label><br>
      <input id="name" type="text" name="name" required/>
    </div>
    <div>
      <label for="email">Email:</label><br>
      <input id="email" type="email" name="email"  required/>
    </div>

    <button class="submit" type="submit">Submit</button>

  </form>
</div>


JS
$(function() {
  var button = $("button");
  var name = $("input[name=name]");

  name.keyup(function() {
    if (name.val().length > 0) {
      button.addClass('active');
    } else {
      button.removeClass('active');
    }
  });

  $("form").submit(function(event) {
    //阻止表单刷新
    event.preventDefault();
    //获得表单字段集
    var formData = {
      name: $("input[name=name]").val(),
      email: $("input[name=email]").val(),
      caps: $("input[name=caps]").val()
    };

    // ajax post 提交
    $.ajax({
      type: "POST",
      url: "提交表单的url",
      data: formData,
      dataType: "json",
      encode: true
    }).done(function(data) {
     do something...
    });
  });
});

Vue 版本:

HTML
<div id="app">
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">Name:</label><br>
        <input id="name" type="text" v-model="name" required/>
      </div>
      <div>
        <label for="email">Email:</label><br>
        <input id="email" type="email" v-model="email" required/>
      </div>

      <button :class="[name ? activeClass : '']" type="submit">Submit</button>
    </form>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>



JS
new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      email: '',
      activeClass: 'active'
    }
  },
  methods: {
    submitForm() {
      axios.post('提交表单的url', {
        name: this.name,
        email: this.email,
      }).then(response => {
        //do something
      })
    }
  }
})

在 Vue 版本中,使用我们之前使用的 v-model 指令进行数据双向绑定,来获取提交的表单字段。我们通过用户名是否存在来切换 button 按钮的状态。通过使用事件修饰符 .prevent 处理表单只进行提交,而不进行页面刷新操作。我们引入 axios cdn,来代替 jQuery 的 Ajax。

结论

JQuery 封装了大量常用的 DOM 操作,使开发者在编写 DOM 操作相关程序的时候能够得心应手,完全使用 jQuery 进行开发,是完全没有问题的。

本文旨在 Vue 对于不需要大量开销的小型 web 应用来说也是一个非常好的选择。如果随着时间的推移项目变得越来越复杂,您也可以轻松地将此代码通过 webpack 构建转换为组件程序。这意味着您可以使用单文件组件,使用 template 语法同时写 HTML CSS 和 JS,可以将您的代码构建成单个可重用的组件。

选择将 Vue 合并到其他框架的项目中不要求您立即改变原有的代码和结构,您甚至可以随着时间的推移缓慢地进行推进和重构。由于 Vue 主张最少,具有多变的灵活性,因此人们通常称Vue为渐进式框架。

原文发布于微信公众号 - 前端infoQ(webinfoq)

原文发表时间:2019-04-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券