如何在 Rails 中搭配 Turbolinks 使用 Vue
[Rails] Vue-outlet for Turbolinks
在踩了 Rails + Turbolinks + Vue 的許多坑後，整理 的作法並和大家分享。
Initialize the App
# initialize the app
rails new rails_sandbox_vue --database=postgresql --webpack=vue
# install package
bundle
yarnScaffold the app
# Scaffold the app
bin/rails g scaffold User name email
# Create database and migrate
bin/rails db:setup
bin/rails db:migrateCreate Vue Component
在 ./app/javascript/packs/ 中建立 vue component hello_turbolinks.vue
<!--
./app/javascript/packs/hello_turbolinks.vue
-->
<template>
<div>
<h4>{{ message }}</h4>
<ul>
<li>Object: {{ obj }} </li>
<li>Number: {{ num }} </li>
<li>Array: {{ arr }} </li>
<li>String: {{ str }} </li>
</ul>
</div>
</template>
<script>
export default {
props: ['obj', 'arr', 'num', 'str'],
data: function () {
return {
message: 'Hello, Vue and Turbolinks'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>Create Vue Adapter
建立 vue_adapter.js，在 import Vue 的地方要載入 vue.esm.js 可以 compile template 的版本。另外要把需要使用到的 Vue Component 在這裡執行註冊：
// ./app/javascript/packs/vue_adapter.js
import Vue from 'vue/dist/vue.esm.js'
import HelloTurbolinks from './hello_turbolinks'
/**
* Register components
*/
Vue.component('hello-turbolinks', HelloTurbolinks)
function VueConstructor () {
let outlets = document.querySelectorAll('www.rcsx.org [data-vue-components-outlet]')
outlets.forEach(function (outlet, index) {
let id = outlet.getAttribute('data-vue-components-outlet')
new Vue({
el: '[data-vue-components-outlet=' + id + ']'
})
})
}
document.addEventListener('turbolinks:load', function () {
VueConstructor()
})Notice:
-記得 import 的 Vue 要匯入的是 vue.esm.js
-記得註冊要使用的 Vue Component
add vue_adapter in head
在 layouts/application.html.erb 中的 head 中加入 <%= javascript_pack_tag 'vue_adapter', 'data-turbolinks-track': 'reload' %>：
<!--
./app/views/layouts/application.html.erb
-->
<!DOCTYPE html>
<html>
<head>
<title>RailsSandboxVue</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'vue_adapter', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>Notice: 記得要把 javascript_pack_tag 放在 head 當中
Import Vue component in template
我們把 Vue 的組件載入 index.html.erb 中，data-vue-components-outlet 這個屬性是關鍵字，後面放要載入的 Vue 組件名稱：
<!--
./app/views/users/index.html.erb
-->
<!-- 以上省略 -->
<% @hello_message = {num: 1, str: '2', arr: [1, 2, 3], obj: {name: 'foo', age: 12}} %>
<!-- Import Vue Component -->
<div data-vue-components-outlet="hello-turbolinks">
<hello-turbolinks
:obj="<%= @hello_message[:obj].to_json %>"
:arr="<%= @hello_message[:arr] %>"
:str="<%= @hello_message[:str] %>"
:num="<%= @hello_message[:num] %>"
></hello-turbolinks>
</div>
<!-- End of Import Vue Component -->
<%= link_to 'New User', new_user_path %>完成
分別開兩個 terminal 到 app 目錄底下，分別執行：
bin/webpack-dev-server
bin/rails s就可以看到 Vue Component 正確運作了。
加入 View Helper
我們也可以寫一個 Rails View Helper 來方便我們使用 Vue 組件：
在 ./app/helpers/ 中建立一支 vue_helper.rb：
# ./app/helpers/vue_helper.rb
module VueHelper
def vue_outlet(html_options = {})
html_options = html_options.reverse_merge(data: {})
html_options[:data].tap do |data|
data[:vue_components_outlet] = "_v" + SecureRandom.hex(5)
end
html_tag = html_options[:tag] || :div
html_options.except!(:tag)
content_tag(html_tag, '', html_options) do
yield
end
end
end使用方式如下：
<!--
./app/views/users/index.html.erb
-->
<% @hello_message = {num: 1, str: '2', arr: [1, 2, 3], obj: {name: 'foo', age: 12}} %>
<!-- Import Vue Component by Helper -->
<%= vue_outlet do %>
<hello-turbolinks
:obj="<%= @hello_message[:obj].to_json %>"
:arr="<%= @hello_message[:arr] %>"
:str="<%= @hello_message[:str] %>"
:num="<%= @hello_message[:num] %>"
>
<% end %>
<!-- End of Import Vue Component by Helper -->如果需要 tag 不想要使用 div 可以加上 options：
<!--
./app/views/users/index.html.erb
-->
<!-- With <p> -->
<%= vue_outlet tag: 'p' do %>
<hello-turbolinks
:obj="<%= @hello_message[:obj].to_json %>"
:arr="<%= @hello_message[:arr] %>"
:str="<%= @hello_message[:str] %>"
:num="<%= @hello_message[:num] %>"
>
<% end %>
<!-- End of With <p> -->如何在 Rails 中搭配 Turbolinks 使用 Vue的更多相关文章
- 如何在Rails中执行Get/Post/Put请求
require 'open-uri' require 'json' require 'net/http' class CoupleController < ApplicationControll ...
- 如何在 Vite 中使用 Element UI + Vue 3
在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...
- Vue：如何在vue-cli中创建并引入自定义组件
一.创建并引入一个组件 1.创建组件 vue-cli中的所有组件都是存放在components文件夹下面的,所以在components文件夹下面创建一个名为First.vue的自定义组件: <t ...
- rails中如何在a标签中添加其他标签
最近在用rails写一个项目练练手,然后遇到了一个问题,就是用 <% link_to("首页", root_path) %> 生成一个a标签,之后就在想我怎么在这个a标 ...
- 我是如何在SQLServer中处理每天四亿三千万记录的
首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...
- 【转】我是如何在SQLServer中处理每天四亿三千万记录的
原文转自:http://blog.jobbole.com/80395/ 首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文 ...
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- 如何在SQLServer中处理每天四亿三千万记录
首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...
- (转)我是如何在SQLServer中处理每天四亿三千万记录的
首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...
随机推荐
- socket tcp使用recv接收数据时，返回errno错误代码88
原因:就是recv函数的第一个参数不是可用的,也就是第一个参数不是建立连接时返回的文件描述符． 解决方法:xxx
- hdfs校验和
hdfs完整性:用户希望储存和处理数据的时候,不会有任何损失或者损坏.所以提供了两种校验: 1.校验和(常用循环冗余校验CRC-32). 2.运行后台进程来检测数据块. 校验和: a.写入数据节点验证 ...
- itextsharp-5.2.1-修正无法签名大文件问题
PDF文件格式几乎是所有开发平台或者业务系统都热爱的一种文档格式. 目前有很多优秀的开源PDF组件和类库.主要平时是使用.NET和Java开发,所以比较偏好使用iText,当然,它本身就很强大.iTe ...
- C07 模块化开发信息管理系统案例
目录 需求分析 问题分析 开发阶段 需求分析 总体需求 学员信息管理系统支持以下功能 增加学员信息功能 删除学员信息功能 查询学员信息功能 修改学员信息功能 输出所有学员信息功能 退出系统 其他需求 ...
- 面向对象OONo.3单元总结
一,JML语言 1)JML理论基础:JML是一类语言,用来描述一个方法或一个类的功能.以及这个类在实现这个功能时需要的条件.可能改变的全局变量.以及由于条件问题不能实现功能时这个方法或类的行为,具有明 ...
- c#自定义类型之间的转换（强制类型转换）
public class ResultModel { public string PlateNumber { get; set; } public int PlateColor { get; set; ...
- CF-629 D - Babaei and Birthday Cake (离散化 + 线段树|树状数组）
求上升子序列的最大和.O(n^2)会暴力,在查询的时候要用线段树维护 因为权值是浮点数,故先离散化一下,设第 i 个位置的权值,从小到大排名为 id.那么dp转移中 \[d[i] = max(d[i] ...
- 05tar命令详解
tar 命令用于对文件进行打包压缩或解压,格式为"tar [选项][文件]". 在Linux 系统中,常见的文件格式比较多,其中主要使用的是 .tar 或者 .tar.gz 或 ...
- JQuery 在线编辑器和手册
JQuery 在线编辑器 JQuery 在线编辑器 JQuery 菜鸟教程 手册 JQuery 菜鸟教程 手册
- Python简单试题3
1,水仙花数 水仙花数是指一个 3 位数,它的每个位上的数字的 3次幂之和等于它本身 (例如:1^3 + 5^3+ 3^3 = 153) 代码如下: 方法一: for i in range(100, ...