如何解决学vue 1.0和vue 2.0冲突问题
来源:互联网 发布:怎样加入淘宝外卖 编辑:程序博客网 时间:2024/06/15 18:45
最近我也一直在vue,但是在利用vue-cli脚手架下载项目的视频,却下载vue 2.0。因为在我看的那个视频里面的还是vue 1.0。
但,我想着vue 2.0应该和vue 1.0差不多。应该没什么问题,所以没管什么,就一直看下了。
在做到vue里面的router模块的时候,出现了一个报错,就是xxx.map方法不存在。度娘了一下,vue 2.0的路由和vue 1.0的用法已经完全不一样了。这我就一脸懵逼了……
突然,灵机一动。我们可以下载的时候,下载vue 1.0版本不就可以了吗?
命令如下 :
可能有点看不清,我在这里也写了
vue init webpack#1.0 sell
这样子,就先vue 1.0之后,再过渡vue 2.0就可以了!
如何1.0的代码上修改,过渡到2.0呢
1、配置文件的修改
Package.json文件修改Bulid目录的修改Config目录的修改
解决:
使用webpack下载2.0的脚手架,然后在这些配置的文件复制到相对的目录即可
2、Vue-router API
初始化路由变化 v-link指令 替换为<router-link>组件 最好看官网的详细写法,参照里面写法即可升级到2.0 [vue-router2.0](http://router.vuejs.org/zh-cn/essentials/getting-started.html)
3、Vue2.0语法变法
v-for指令的变化 v-el、v-ref指令的变化 模板变化,组件只允许一个根元素1.v-for指令没有默认的$index需要修改成 ```1.0<span v-for="item in items"></span>2.0<span v-for="(item,index) in items" key="index"></span>```需要自己手动加上这个参数不然就会报错2.v-el、v-ref指令的变化 2.0 已经把这两个指令给删除了,不再有这两个指令 代替为 `<span ref="wrappers"></span>` <script> // 在你需要用的时候这样子调用: this.$refs.wrappers </script>3.模板变化,组件只允许一个根元素 在所有的组件里面 在template标签里面,必须得有一个div标签包含所有的元素(我个人喜欢用div标签包含所有元素,其它元素也可以)
4、Vue2.0语法变化
1.组件通信变化 $dispatch 废除 2.事件监听变化,废除 events 属性 3.不能在子组件直接修改父组件传入的 prop1.组件通信变化 $dispatch 废除,事件监听变化,废除 events 属性改成 在子组件需要的地方添加`this.$emit('xxx',event.target);`然后在你的food组件的父组件里面传入监听的事件,比如 food组件`<food @add="addFood"></food>`然后就可以在你的父组件里面定义addFood方法 2.不能在子组件直接修改父组件传入的 prop 可以在子组件里面定义方法并使用`this.$emit('xxx',event.target);`派发父组件,然后在父组件里面接受该事件方法,然后再在方法里面修改值 exp: 子组件: good methods: { add() { this.$emit.('add'); }, delete(type) { this.$emit('delete',type); // type 是你希望子组件修改的值 } } 父组件: <good @add='addFodd' @delete="deleteFodd"></good>methods: { addFodd() { // 方法内容 }, deleteFodd(type) { // 方法内容 } }
5、过渡的变化,transition 组件,keep-alive改为组件
0 0
- 如何解决学vue 1.0和vue 2.0冲突问题
- 解决vue样式冲突的问题
- 如何在vue里面优雅的解决跨域,路由冲突问题
- 如何解决Django与Vue语法的冲突
- vue之django 和vue语法冲突处理
- vue自定义form控件,解决vue+layui组合时checkbutton和radiobutton事件被覆盖问题
- 【vue】如何在mac上使用npm安装vue和安装问题处理
- vue开发:vue-cli+axios解决跨域问题
- 如何检测和解决端口冲突问题?
- 如何检测和解决端口冲突问题
- 详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题
- zepto与jquery还有vue的冲突解决
- 解决vue渲染时闪烁{{}}的问题
- 解决vue不相关组件之前数据传输问题
- vue中解决跨域问题
- 解决 Django + Vue 的一些问题
- 解决vue渲染时闪烁{{}}的问题
- Vue和vue-template-compiler版本之间的问题
- yum源 epel源 no package available 更换国内yum源
- 515nod 1548 欧姆诺姆和糖果 【枚举】
- CSS(2.1)_Know-it-all
- Android 解析服务器json数据
- hdu 2502 月之数(数学)
- 如何解决学vue 1.0和vue 2.0冲突问题
- UGUI 垂直方向CenterOnChild功能的简单实现
- 11. Container With Most Water Medium
- 测试入门--功能测试
- Hanganalyze and Systemstate
- 位运算 实现加法
- 读书笔记 effective c++ Item 15 在资源管理类中提供对原生(raw)资源的访问
- Java 实例
- Git常用命令收集