如何在 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,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...
随机推荐
- {Linux} boot仅剩余XX字节
1. 查看已安装的linux-image各版本 dpkg --get-selections |grep linux-image 2. 查看我们当前使用的是哪一个版本: uname -a 3. ...
- <转>Java 高并发综合
并发模型 悲观锁和乐观锁的理解及如何实现,有哪些实现方式? 悲观锁 悲观锁假设最坏的情况(如果你不锁门,那么捣蛋鬼就会闯入并搞得一团糟),并且只有在确保其他线程不会干扰(通过获取正确的锁)的情况下才能 ...
- 掌握 Azure 的注册、帐户和订阅管理 Azure 上云须知
计划使用由世纪互联运营的 Microsoft Azure 的用户,可通过下列流程注册开通并购买所需 Azure 服务:信息获取 > 试用 > 购买 > 账户/订阅管理 > 支付 ...
- UVA 10037 Bridge （基础DP）
题意: 过河模型:有n个人要渡河,每个人渡河所耗时可能不同,只有1只船且只能2人/船,船速取决于速度慢的人.问最少耗时多少才能都渡完河? 思路: n<2的情况比较简单. 考虑n>2的情况, ...
- java入门第二章——java编程基础
习题 一.填空题 (p)1.java中的程序代码都必须在一个类中定义,类使用(class)关键字来定义. (p)2.布尔常量即布尔类型的两个值,分别是(true)和(false) (p18)3.jav ...
- [VC]ocx控件怎么屏蔽backspace的后退键
<script Language=javascript> function document.onkeydown() { if(window.event.keyCode = ...
- GWT-2.5.1离线安装
GWT官方离线包下载地址 http://dl.google.com/eclipse/plugin/3.7/zips/gpe-e37-latest-updatesite.zip 以下是GWTDesign ...
- java 自定义容器，实现foreach
import java.util.Arrays; import java.util.Iterator; public class ArrayList implements Iterable<In ...
- oracle 快速复制一张表，并在此创建索引，日志及并行度
复制表结构及其数据 create table table_name_new as select * from table_name_old 只复制表结构 create table table_name ...
- Flask-蓝图、模型与CodeFirst
一.应用.蓝图与视图函数 结构,如图: Flask最上层是app核心对象 ,在这个核心对象上可以插入很多蓝图,这个蓝图是不能单独存在的,必须将app作为插板插入app ,在每一个蓝图上,可以注册很多静 ...