频：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 tricks(4) -- with statement
			
    简介 with是从2.5版本引入的一个语法. 这个语法本身是为了解决try..finally繁琐的释放各类资源(文件句柄, Lock等)的问题. 如果想在旧版本中使用这个功能, 直接引入future模 ...
    
			
    2. 
						
  2. python六剑客：map()、lambda()、filter()、reduce()、推导类表、切片
			
    一:map():映射 map()有两个参数,一个函数,一个序列,序列中每一个元素都会做为参数传给前边的函数,然后生成新的列表, 第二个参数必须用一个序列:元祖,列表,字符串 >>>  ...
    
			
    3. 
						
  3. 学习Linux的正确姿势
			
    学习Linux的正确姿势 端正学习态度1.Linux不等于骇客(or Cracker).当然众所周知很多“黑客工具”都是Linux平台上的,我帮助过很多Linux小白发现他们殊途同归都是朝着类似Air ...
    
			
    4. 
						
  4. mp4v2 基本知识
			
    mp4v2 和mp4的一些基础知识 由于项目需要做mp4文件的合成(264+aac)和mp4文件的解析: MP4文件本身就是一个容器,对于视频来说就是把不同的内容放按照mp4的规则存放而已: 如果完全 ...
    
			
    5. 
						
  5. python中hasattr, getattr,setattr及delattr四个方法
			
    通过一个实例来说明,这四个函数的用法: 首先一个如下的一个简单的类: class Animal(object): def __init__(self,name, zone): self.name =  ...
    
			
    6. 
						
  6. c++ sleep(windows/linux)
			
    c标准中包含了一个sleep用以实现当前线程暂停执行n毫秒,如下所示: 函数名: sleep 功 能: 执行挂起一段时间 用 法: unsigned sleep(unsigned seconds);  ...
    
			
    7. 
						
  7. centos下gitlab私服完整安装部署（nginx+MySQL+redis+gitlab-ce+gitlab-shell+）
			
    系统环境cat /etc/redhat-release CentOS release 6.8 (Final) nginx -vnginx version: nginx/1.9.15 redis-cli ...
    
			
    8. 
						
  8. 20145305 《网络对抗》MSF基础应用
			
    实践过程及结果截图 主动攻击ms08_067 Kali的IP:10.43.46.93 靶机的IP:10.43.49.28 MS08_067远程漏洞攻击实践:Shell 攻击成功的结果 在kali上执行 ...
    
			
    9. 
						
  9. sql注入学习心得与sqlmap使用心得
			
    做题是最好的老师 首先先来分享一下我用来练手的题目,实验吧中的简单的sql注入1,2,3 不得不说,sql注入真是一个神奇的东西,至少我以前看起来一点头绪都没有的题目能入手了 首先是简单的sql注入3 ...
    
			
    10. 
						
  10. P3466 [POI2008]KLO-Building blocks
			
    目录 题目 思路 错误 代码 题目 luogu csdn好像限制了展开博客次数,真的好xx 思路 显然一段区间内的值一定是他的中位数 少一点比多一点好 然后就可以枚举区间了 区间答案为 val[mid ...
    
			
    11.