频：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 嵌套表格


我的git：https://github.com/chentianwei411/vue-nestedForm/blob/master/app/javascript/packs/nestedform.js


clone后，进入/teams




需要运行：bin/webpack-dev-server命令，提示没有找到


更新bundle update webpacker，再启动rails s


报告：config/webpacker.yml No such file  提示运行rails webpacker:install


rails webpacker:install安装后


我运行：


  1. bin/webpack
    2. 

  2. bin/webpack-dev-server, 这个窗口必须始终打开。


然后程序就可以正确执行了，												


											
(Gorails)vuejs系列视频:  Webpacker／vue-resource（不再为官方推荐）。的更多相关文章
	

    
								
  1. 海美迪Q系列视频文明书
		
    海美迪Q系列视频文明书
    
		
    2. 
						
  2. [iOS]C语言知识点系列视频
		
    C语言知识点系列视频 目录 C语言技术视频-01-变量的定义 C语言技术视频-02-程序分支结构(if...else) C语言技术视频-03-程序分支结构(switch) C语言技术视频-04-程序循 ...
    
		
    3. 
						
  3. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
		
    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
    
		
    4. 
						
  4. VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）
		
    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
    
		
    5. 
						
  5. 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件
		
    后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同  ...
    
		
    6. 
						
  6. 后盾网lavarel视频项目---vue实现动态添加和删除板块
		
    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
    
		
    7. 
						
  7. vue resource 携带cookie请求 vue cookie 跨域
		
    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
    
		
    8. 
						
  8. vue 快速入门 系列 —— 初步认识 vue
		
    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
    
		
    9. 
						
  9. Vue.js系列(一)：Vue项目创建详解
		
    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python chunk模块
			
    chunk模块用于读取TIFF格式的文件,打开应该使用二进制模式 TIFF 标签图像文件格式 import chunk import chunk f=open('E:\\test.tiff','rb' ...
    
			
    2. 
						
  2. python socket编程函数介绍
			
    网上看到一个socket中常用函数的介绍,记录一下 https://blog.csdn.net/rebelqsp/article/details/22109925
    
			
    3. 
						
  3. 解析分布式锁之Redis实现（二）
			
    摘要:在前文中提及了实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,本文主要阐述基于Redis的分布式锁,分布式架构设计如今在企业中被大量的应用,而在不同的分布 ...
    
			
    4. 
						
  4. ACM题目———— 一种排序（STL之set）
			
    描述 输入 第一行有一个整数 0<n<10000,表示接下来有n组测试数据:每一组第一行有一个整数 0<m<1000,表示有m个长方形:接下来的m行,每一行有三个数 ,第一个数 ...
    
			
    5. 
						
  5. P3498 [POI2010]KOR-Beads
			
    P3498 [POI2010]KOR-Beads 题解 hash+hash表+调和级数 关于调和级数(from baidu百科): 调和级数发散的速度非常缓慢.举例来说,调和序列前10项的和还不足10 ...
    
			
    6. 
						
  6. Python3 判断文件和文件夹是否存在、创建文件夹
			
    Python3 判断文件和文件夹是否存在.创建文件夹 python中对文件.文件夹的操作需要涉及到os模块和shutil模块. 创建文件: 1) os.mknod(“test.txt”) 创建空文件  ...
    
			
    7. 
						
  7. spring MVC @Resource不支持Lazy加载及解决方法
			
    今天迁一系统时发现有个bean使用@Resource注入了另外一个bean,这个被注入的bean是将被deprecated的类,而且只有一两个功能使用到,为了先调整进行测试,增加了@Lazy注解,启动 ...
    
			
    8. 
						
  8. 04: 打开tornado源码剖析处理过程
			
    目录:Tornado其他篇 01: tornado基础篇 02: tornado进阶篇 03: 自定义异步非阻塞tornado框架 04: 打开tornado源码剖析处理过程 目录: 1.1 torn ...
    
			
    9. 
						
  9. 20145127《java程序设计》第五周学习总结
			
    教材学习内容总结 第八章 异常处理 1.try catch java中所有错误会被打包成对象,可以进行尝试捕捉代表错误的对象进行处理. Import java.until.Scanner; Publi ...
    
			
    10. 
						
  10. tf.random_uniform的使用
			
    tf.random_uniform((4, 4), minval=low,maxval=high,dtype=tf.float32)))返回4*4的矩阵,产生于low和high之间,产生的值是均匀分布 ...
    
			
    11.