ruby on rails_如何在Ruby on Rails应用中用Vue.js替换jQuery

ruby on rails

by Igor Petrov

通过伊戈尔·彼得罗夫(Igor Petrov)

如何在Ruby on Rails应用中用Vue.js替换jQuery (How to replace jQuery with Vue.js in Ruby on Rails apps)

If you are a Ruby on Rails developer and have been for several years, you’re probably used to using jQuery as the default option for developing the front end. Several versions ago, core Rails developers offered it as a standard, and in time it became the standard. jQuery was the #1 JavaScript library, and it was very convenient to use it.

如果您是Ruby on Rails开发人员并且已经工作了几年，那么您可能已经习惯使用jQuery作为开发前端的默认选项。 几个版本以前，核心的Rails开发人员将其作为标准提供，并逐渐成为标准。 jQuery是排名第一的JavaScript 库，使用起来非常方便。

Since then, quite a bit of time has passed, but jQuery is still the default option. Now, however, you need something different because of the growing complexity of client-side code. You might try React, Angular.js, or Vue.js, but you can only use one of these easily while making the smallest effort to integrate it into an existing or new app.

从那时起，已经过去了很多时间，但是jQuery 仍然是默认选项。 但是，由于客户端代码的复杂性不断增加，您现在需要一些不同的东西。 您可以尝试使用React，Angular.js或Vue.js，但您只能轻松地使用其中之一，而将其集成到现有或新应用程序中的工作最少。

I used jQuery for a long time and it became a habit: if you start a new Rails app, jQuery is already there. You’re already familiar with it, and so you start to use it immediately.

我使用jQuery很长时间了，这已经成为一种习惯：如果启动新的Rails应用程序，则jQuery已经存在。 您已经熟悉它，因此可以立即开始使用它。

Several years ago, I discovered that I liked Angular 1, because it was very simple to start with. But it still had redundant setup with app initializing, writing controllers, and injecting dependencies.

几年前，我发现我喜欢Angular 1，因为它非常简单。 但它仍然具有应用程序初始化，编写控制器和注入依赖项的冗余设置。

This is great for architecting your app in with an MVC (MVVM) approach.

这对于使用MVC(MVVM)方法构建应用程序非常有用。

But let’s say you have an existing app with a lot of jQuery DOM manipulation code, and you want to start replacing this mess with something more supportable. Something like the following (which could be optimized, of course — but this is for the sake of example):

但是，假设您有一个包含许多jQuery的现有应用程序 DOM操作代码，并且您想开始用更可支持的方式替换此混乱。 类似于以下内容(当然可以进行优化，但这只是为了示例)：

$(document).ready(function(){

...   $('#some-radio-button1').on('click', function(){     if ($(this).is(':checked')) {       // removing "active" classes, hiding some blocks       // showing related block

} else {

// opposite of above     }   });

});

为什么选择Vue.js？ (Why Vue.js?)

So why do I recommend replacing jQuery code with Vue.js? Because Vue.js is not just useful for writing complex JavaScript apps. You can also use it just for one simple task, like DOM manipulation. If this is all you need, it would be a good idea to go with Vue. And you can go further with it if you need to solve more complex tasks like routing, state management, and so on.

那么，为什么我建议用Vue.js替换jQuery代码？ 因为Vue.js不仅对编写复杂的JavaScript应用有用。 您也可以将其仅用于一项简单的任务，例如DOM操作。 如果这是您所需要的，那么与Vue一起使用将是一个好主意。 如果您需要解决更复杂的任务，例如路由，状态管理等，则可以继续使用它。

So, if you already have a project with a lot of jQuery code and you would like to get rid of those messy event handlers, you should definitely give Vue.js a try.

因此，如果您已经有一个包含许多jQuery代码的项目，并且希望摆脱那些凌乱的事件处理程序，则绝对应该尝试一下Vue.js。

入门 (Getting started)

If you are an old-school RoR developer and still manage assets via Sprockets, then just download and put vue.js to your vendor/assets/javascripts folder.

如果您是老派的RoR开发人员，并且仍然通过Sprockets管理资产，则只需下载vue.js并将其放入您的vendor/assets/javascripts文件夹。

Next, require it from your main JavaScript manifest file (for example, application.js ):

接下来，从您的主要JavaScript清单文件(例如application.js )中要求它：

//= require jquery//= require jquery_ujs//= require bootstrap//= require vue

Then you need to instantiate a Vue instance and attach it to some element in your HTML code. For this purpose, you could create a separate vue_app.js (or .coffee) file inside app/assets/javascripts:

然后，您需要实例化Vue实例并将其附加到HTML代码中的某个元素。 为此，您可以在app/assets/javascripts内部创建一个单独的vue_app.js (或.coffee)文件：

window.vueApp = new Vue  el: '.off-canvas-container'  data:    ...

That’s it, now you can use Vue.js!

就是这样，现在您可以使用Vue.js了 ！

更进一步 (Going further)

Now you can add data to your Vue instance data section and write some handlers in the methods section. But it’s better to use a core Vue.js unit: components.

现在，您可以将数据添加到Vue实例data部分，并在methods部分中编写一些处理程序。 但是最好使用核心Vue.js单元：组件。

The easiest way to continue with Vue.js is to use your existing Rails views and wrap some pieces of HTML into components. Let’s take a look how to achieve this.

继续使用Vue.js的最简单方法 是使用现有的Rails 视图并将HTML片段包装到组件中。 让我们看看如何实现这一目标。

For example, I have app/views/sellers/print_labels/new.html.erb and some jQuery code associated with this page:

例如，我有app/views/sellers/print_labels/new.html.erb和与此页面相关的一些jQuery代码：

This is a shipping address form with inputs disabled by default. Once the user clicks the “pencil” icon, form fields will turn into accessible inputs and the “Save” button will be shown. Once “Save” is clicked, the form gets returned to its original state.

这是送货地址表格，默认情况下禁用输入。 用户单击“铅笔”图标后，表单字段将变为可访问的输入，并且将显示“保存”按钮。 单击“保存”后，表单将恢复为原始状态。

To replace this jQuery code with a simple Vue.js components, I’m creating app/assets/javascripts/components/print_labels.coffee with something like the following (but don’t forget to require your components folder from application.js):

要将jQuery代码替换为简单的Vue.js组件，我将使用以下内容创建app/assets/javascripts/components/print_labels.coffee (但不要忘记从application.js要求您的components文件夹)：

Vue.component 'print-labels',  data: ->    isEditingAddress: false

And then I use it in my Rails view:

然后在Rails视图中使用它：

Several things to notice:

需要注意的几件事：

• If you want to keep the component template inside Rails views or partials, you should use the inline-template option.

  如果要将组件模板保留在Rails视图或局部视图中，则应使用inline-template选项。

• v-cloak option is needed to display the component after it has been initialized and rendered

  初始化并呈现组件后，需要使用v-cloak选项显示组件

• We use @click for attaching onclick event handlers (you can extract complex code to the component methods)

  我们使用@click附加onclick事件处理程序(您可以将复杂的代码提取到组件methods )

Now we can get rid of the jQuery code because we’ve replaced it with a small Vue.js component (with just one data variable!).

现在我们可以摆脱jQuery代码，因为我们已经用一个小的Vue.js组件(只有一个数据变量！)代替了它。

Now it’s your turn! Go ahead with this approach, and I hope you’ll find yourself happy with Vue.js soon.

现在轮到你了！ 继续使用这种方法，希望您很快会对Vue.js感到满意。

If you liked this post, please click on ✋ to spread the word.

如果您喜欢这篇文章，请单击 ✋ 以扩展单词。

翻译自: https://www.freecodecamp.org/news/how-to-replace-jquery-with-vue-js-in-ruby-on-rails-apps-b4f4af192635/

ruby on rails