vue-rails-form-b​​uilder:Vue.js的定制Rails表单构建器

  • B9_666525
    了解作者
  • 8.9KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-06 13:20
    上传日期
Vue-rails-form-b​​uilder Vue.js的定制Rails表单构建器 概要 <%= vue_form_for User.new do |f| %> <%= f.text_field :name %> <% end %> < form ... > ... < input v-model =" user.name " type =" text " name =" user[name] " ... /> </ form > 安装 Gemfile添加到Gemfile : gem "vue-rails-form-builder" 在终端上运行bundle ins
vue-rails-form-builder-master.zip
  • vue-rails-form-builder-master
  • lib
  • vue-rails-form-builder
  • form_helper.rb
    540B
  • tag_helper.rb
    730B
  • railtie.rb
    378B
  • vue_options_resolver.rb
    1.5KB
  • form_builder.rb
    1.9KB
  • vue-rails-form-builder.rb
    87B
  • MIT-LICENSE
    1KB
  • vue-rails-form-builder.gemspec
    762B
  • VERSION
    6B
  • Rakefile
    28B
  • README.md
    7.4KB
  • CHANGELOG.md
    1.3KB
内容介绍
vue-rails-form-builder ====================== [![Gem Version](https://badge.fury.io/rb/vue-rails-form-builder.svg)](https://badge.fury.io/rb/vue-rails-form-builder) A custom Rails form builder for Vue.js Synopsis -------- ```erb <%= vue_form_for User.new do |f| %> <%= f.text_field :name %> <% end %> ``` ```html <form ...> ... <input v-model="user.name" type="text" name="user[name]" ... /> </form> ``` Installation ------------ Add the following line to `Gemfile`: ```ruby gem "vue-rails-form-builder" ``` Run `bundle install` on the terminal. Usage ----- ```erb <%= vue_form_for User.new do |f| %> <%= f.text_field :name %> <%= f.submit "Create" %> <% end %> ``` The above ERB template will be rendered into the following HTML fragment: ```html <form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post"> <input name="utf8" type="hidden" value="&#x2713;" /> <input type="hidden" name="authenticity_token" value="..." /> <input v-model="user.name" type="text" name="user[name]" id="user_name" /> <input type="submit" name="commit" value="Create" /> </form> ``` Note that the third `<input>` element has a `v-model` attriubte, which can be interpreted by Vue.js as the _directive_ to create two-way data bindings between form fields and component's data. If you are using the [Webpacker](https://github.com/rails/webpacker), create `app/javascript/packs/new_user_form.js` with following code: ```javascript import Vue from 'vue/dist/vue.esm' document.addEventListener("DOMContentLoaded", () => { const NewUserForm = new Vue({ el: "#new_user", data: { user: { name: "" } } }) }) ``` Add this line to the ERB template: ```erb <%= javascript_pack_tag "new_user_form" %> ``` Then, you can get the value of `user[name]` field by the `user.name`. If you use Rails 5.1 or above, you can also use `vue_form_with`: ```erb <%= vue_form_with model: User.new do |f| %> <%= f.text_field :name %> <%= f.submit "Create" %> <% end %> ``` Demo App -------- Visit [vue-rails-form-builder-demo](https://github.com/kuroda/vue-rails-form-builder-demo) for a working Rails demo application using the `vue-rails-form-builder`. Options ------- To `vue_form_for` and `vue_form_with` methods you can provide the same options as `form_for` and `form_with`. There is a special option: * `:vue_scope` - The prefix used to the input field names within the Vue component. Tag Helper ---------- This gem provides two additional helper methods: `vue_tag` and `vue_content_tag`. Basically, they behave like `tag` and `content_tag` helpers of Action Views. But, they interpret the *HTML options* in a different way as explained below. ### The `:bind` option If the *HTML options* have a `:bind` key and its value is a hash, they get transformed into the Vue.js `v-bind` directives. In the example below, these two lines have the same result: ```erb <%= vue_content_tag(:span, "Hello", bind: { style: "{ color: textColor }" }) %> <%= vue_content_tag(:span, "Hello", "v-bind:style" => "{ color: textColor }" }) %> ``` Note that you should use the latter style if you want to specify *modifiers* to the `v-bind` directives. For example: ```erb <%= vue_content_tag(:span, "Hello", "v-bind:text-content.prop" => "message" }) %> ``` ### The `:on` option If the *HTML options* have a `:on` key and its value is a hash, they get transformed into the Vue.js `v-on` directives. In the example below, these two lines have the same result: ```erb <%= vue_content_tag(:span, "Hello", on: { click: "doThis" }) %> <%= vue_content_tag(:span, "Hello", "v-on:click" => "doThis" }) %> ``` Note that you should use the latter style if you want to specify *modifiers* to the `v-on` directives. For example: ```erb <%= vue_content_tag(:span, "Hello", "v-on:click.once" => "doThis" }) %> <%= vue_content_tag(:button, "Hello", "v-on:click.prevent" => "doThis" }) %> ``` ### Boolean attributes If the *HTML options* have a string value (not a boolean value) for `checked`, `disabled`, `multiple`, `readonly` or `selected` key, the key gets transformed by adding `v-bind:` to its head. In the example below, these two lines have the same result: ```erb <%= vue_content_tag(:button, "Click me!", disabled: "!clickable") %> <%= vue_content_tag(:button, "Click me!", "v-bind:disabled" => "!clickable") %> ``` If you want to add a normal attribute without `v-bind:` prefix, specify `true` (boolean) to these keys: ```erb <%= vue_content_tag(:button, "Click me!", disabled: true) %> ``` This line produces the following HTML fragment: ```html <button disabled="disabled">Click me!</button> ``` ### Vue.js directives If the *HTML options* have one or more of the following keys > `text`, `html`, `show`, `if`, `else`, `else_if`, `for`, `model`, `pre`, `cloak`, `once` then, these keys get transformed by adding `v-` to their head. In the example below, these two lines have the same result: ```erb <%= vue_tag(:hr, if: "itemsPresent") %> <%= vue_tag(:hr, "v-if" => "itemsPresent") %> ``` Note that the `:else_if` key is transformed into the `v-else-if` directive: ```erb <%= vue_tag(:hr, else_if: "itemsPresent") %> <%= vue_tag(:hr, "v-else-if" => "itemsPresent") %> ``` ### Extensions to the form building helpers When you build HTML forms using `vue_form_for`, the form building helpers, such as `text_field`, `check_box`, etc., have these additional behavior. Example: ```erb <%= vue_form_for User.new do |f| %> <%= f.text_field :name, model: "userName" %> <label> <%= f.check_box :administrator, on: { click: "doThis" } %> Administrator </label> <%= f.submit "Create", disabled: "!submittable" %> <% end %> ``` The `vue_prefix` method of the Form Builder ------------------------------------------- When you build HTML forms using `vue_form_for`, the form builder has the `vue_prefix` method that returns the *prefix string* to the Vue.js property names. See the following code: ```erb <%= vue_form_for User.new do |f| %> <%= f.text_field :name %> <%= f.submit "Create", disabled: "user.name === ''" %> <% end %> ``` The `vue_prefix` method of the form builder (`f`) returns the string `"user"` so that you can rewrite the third line of the example above like this: ```erb <%= f.submit "Create", disabled: "#{f.vue_prefix}.name === ''" %> ``` This method is convenient especially when the form has nested attributes: ```erb <%= vue_form_for @user do |f| %> <%= f.text_field :name %> <%= f.fields_for :emails do |g| %> <%= g.text_field :address, disabled: "user.emails_attributes[#{g.index}]._destroy" %> <%= g.check_box :_destroy if g.object.persisted? %> <% end %> <%= f.submit "Create", disabled: "#{f.vue_prefix}.name === ''" %> <% end %> ``` Using the `vue_prefix` method, you can rewrite the fifth line more concisely: ```erb disabled: g.vue_prefix + "._destroy" %> ``` Data Initialization ------------------- As the official Vue.js document says: > `v-model` will ignore the initial `value`, `checked` or `selected` attributes > found on any form elements. > (https://vuejs.org/v2/guide/forms.html) Because of this, all form controls get reset after the Vue component is mounted. However, you can use [vue-data-scooper](https://github.com/kuroda/vue-data-scooper) plugin in order to keep the original state of the form. License ------- The `vue-rails-form-builder` is distributed under the MIT license. ([MIT-LICENSE](https://github.com/kuroda/vue-rails-form-builder/blob/master/MIT-LICENSE)) Author ------ Tsutomu Kuroda (t-kuroda@oiax.jp)
评论
    相关推荐
    • vue.js
      vue.js
    • vue.py:Pythonic Vue.js
      vue.py 在纯Python中使用 vue.py提供了Python绑定 。 它使用在浏览器中运行Python。 这是vue.py组件的一个简单示例 from browser import alert from vue import VueComponent class HelloVuePy ( VueComponent ):...
    • Vue.js权威指南
      Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果...
    • Vue.js 教程
      Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简 单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模 型。实际...
    • Vue.js权威指南
      如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面...
    • Vue.js权威指南》
      Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果...
    • vue.js
      乌苏 npm install npm start 。 波尔多电报公司8080 来源
    • vue.jsvue.min.js
      vue.jsvue.min.jsvue.jsvue.min.jsvue.jsvue.jsvue.min.jsvue.jsvue.min.jsvue.min.jsvue.jsvue.min.j s
    • Vue.js最佳实践示例项目-使用Vue.js + Vue路由器+ Vuex + Vuelidate的最佳实践示例项目-Vue.
      Vue.js股票交易者游戏一个用于学习Vue.js生态系统的简单游戏。 该项目使用以下内容:模块:Vue.js-框架Vue Vue.js股票交易者游戏为学习Vue.js生态系统而创建的简单游戏。 该项目使用以下模块:模块:Vue.js-框架Vue...
    • Web Worker中的Vue.js-Vue.js开发
      这是由Rollup.js捆绑提供的使用WorkerDOM在Web Worker中工作的Vue.js的“ hello world”演示应用程序。 Web Worker中的Vue.js这是Vue.js的“ hello world”演示应用程序,由Rollup.js捆绑使用WorkerDOM在Web Worker...