(Gorails)vuejs系列视频: Webpacker/vue-resource(不再为官方推荐)。
频:https://gorails.com/episodes/using-vuejs-for-nested-forms-part-1?autoplay=1
在嵌套表格上使用vue.js。
在application.html.erb
上<head>内加上:<%= javascript_pack_tag 'hello_vue' %>
如果有style(css)的话加上:<%= stylesheet_pack_tag 'hello_vue' %>
在hello_vue.js 进行配置:
需要安装vue-turbolinks和vue-resource:
在terminal上输入:
- yarn add 'vue-turbolinks'
- yarn add ''vue-resource''
添加:
import TurbolinksAdapter from 'vue-turbolinks'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(TurbolinksAdapter)
HTMLElement.dataset
The dataset property on the HTMLElement interface provides read/write access to all the custom data attributes(data-*) set on the element
返回一个DOMStringMap, 可以读写元素的custom data attributes (data-*)
- string = element.dataset.camelCasedName;
- element.dataset.camelCasedName = string;
- string = element.dataset[camelCasedName];
- element.dataset[camelCasedName] = string;
案例:
视频1 嵌套表格
clone后,进入/teams
需要运行:bin/webpack-dev-server命令,提示没有找到
更新bundle update webpacker,再启动rails s
报告:config/webpacker.yml No such file 提示运行rails webpacker:install
rails webpacker:install安装后
我运行:
- bin/webpack
- bin/webpack-dev-server, 这个窗口必须始终打开。
然后程序就可以正确执行了,
(Gorails)vuejs系列视频: Webpacker/vue-resource(不再为官方推荐)。的更多相关文章
- 海美迪Q系列视频文明书
海美迪Q系列视频文明书
- [iOS]C语言知识点系列视频
C语言知识点系列视频 目录 C语言技术视频-01-变量的定义 C语言技术视频-02-程序分支结构(if...else) C语言技术视频-03-程序分支结构(switch) C语言技术视频-04-程序循 ...
- 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件
后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...
- 后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
- Vue.js系列(一):Vue项目创建详解
引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...
随机推荐
- Python消息队列工具 Python-rq 中文教程
原创文章,作者:Damon付,如若转载,请注明出处:<Python消息队列工具 Python-rq 中文教程>http://www.tiangr.com/python-xiao-xi-du ...
- Java EE业务处理流程与XML的引入
Java EE基于MVC架构的业务处理流程 MVC架构业务处理流程 XML定义 XML是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言.XML被设计用于数据的存 ...
- C++ Word Count 发布程序
前段时间,模仿 Linux 系统下的 wc 程序,在 Windows 系统环境下使用 C/C++ 实现了一个相似的 WC 程序,只不过有针对性,针对的是 C/C++,Java 等风格的源代码文件. 此 ...
- jquery一句话实现快速搜索功能
jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...
- ThinkPHP问题收集:模板中使用U方法时无法嵌套大括号,For标签,插入数据,新增的表字段缓存问题
ThinkPHP模板中使用U方法时无法嵌套大括号需要在control里面用U方法赋值给变量传到模版如:{:U('/Blog/comment/',array('id'=>$id)}$comment ...
- 一个快速检测系统CPU负载的小程序
原理说明 在对服务器进行维护时,有时也遇到由于系统 CPU(利用率)负载过高导致业务中断的情况.服务器上可能运行多个进程,查看单个进程的 CPU 都是正常的,但是整个系统的 CPU 负载可能是异常的. ...
- SP211 PRIMIT - Primitivus recurencis(欧拉回路)
SP211 PRIMIT - Primitivus recurencis 欧拉回路 Warning: enormous Input/Output data 警告:巨大的输入/输出 经过若干(11)次提 ...
- ORM 关系对象映射 基础知识点
优点: 1.ORM使我们通用的数据库变得更加的简单便捷. 2.可避免新手程序员写sql语句带来的性能问题. 1. 创建单表 2. 创建关键表 1). 一对一 2). 一对多 3). 多对多 创建表的语 ...
- 20165310 学习基础和C语言基础调查
学习基础和C语言基础调查 做中学体会 阅读做中学之后,了解老师关于五笔练习.减肥.乒乓和背单词的经历,不禁联想到自己学古筝的经历. 成功的经验 兴趣 我其实小时候学过一段时间古筝,但是那时候是因为父母 ...
- mbr看图