vue2.0开发过程中踩的坑!
2017-02-17 15:39
471 查看
昨天素素终于跳了诛仙台,我好开心呀!今儿个特地整理了下vue2.0开发过程中踩得坑!希望和大家交流!
一、声明周期
声明周期钩子详见这张图 https://segmentfault.com/q/1010000007704114
1.0的ready替换成了mounted,即模板编译挂载之后
数据data要写成function的形式了,像这样
二、路由中引入静态js,全局组件,全局变量,全局function
1.引入全局的静态js库,建立一个与src同级的目录例如static,然后把静态资源放入该文件夹下,直接在根目录的index.html中引入如下,其他路由页面就都可以用了!(看起来好简单啊 我可是折腾了好久!!)
2.页面内的公共的参数
比如,用户名,分组,权限等都放在framework.vue里,子页面用this.$parent.$parent.userInfo调用
3.引入公共组件 component
在main.js里import singleSelect from './components/functional_select/single_select' //引入
这样注册后,所有路由页面都可以使用singleSelect了
4.引入公共方法 function
在main.js里,把一个方法绑定到vue的原型上,
然后在路由页面,调用this.hello('lemon',callback)就可以使用了
同样适用于公共的util方法,不过我没有使用这种拓展Vue原型链的方法,而是在每个路由页面都单独import util,使用公共方法
三、内插值属性1.0和2.0的写法不同了
<!-- 1.x -->
<!-- 2.0 -->
四、v-for循环的key,value值互换了位置,还有track-by
五、filter过滤器
filter过滤器现在要定义到和methods同级的对象下
六、遍历数组时,key值不能做model
v-model绑定数据的时候,{key,value}这种数据类型,key值是不能做model的,js里不能修改key值,value值未声明的话会报错,但是modal.value没有的话,不会报错,数组也是同理,会报错
下面是错误的写法:
改为::
七、父子通信
其实父子通信踩得坑最多了,很多的api和方法1.0和2.0都完全不一样了!详见之前的一篇组件父子通信!
一、声明周期
声明周期钩子详见这张图 https://segmentfault.com/q/1010000007704114
1.0的ready替换成了mounted,即模板编译挂载之后
数据data要写成function的形式了,像这样
data () { return { tableList: [], currentModel: "", modal: { name: "", ip: "", ipList: [{"ip":"11"},{"ip":"22"},{"ip":"33"}], // desc: "", } } }
二、路由中引入静态js,全局组件,全局变量,全局function
1.引入全局的静态js库,建立一个与src同级的目录例如static,然后把静态资源放入该文件夹下,直接在根目录的index.html中引入如下,其他路由页面就都可以用了!(看起来好简单啊 我可是折腾了好久!!)
<head> <link rel="shortcut icon" href="./static/img/favicon.ico" /> <!-- 静态css --> <link rel="stylesheet" type="text/css" href="./static/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="./static/css/framework.css"> <link rel="stylesheet" type="text/css" href="./static/css/common.css"> <link rel="stylesheet" type="text/css" href="./static/css/date-time-picker.css"> <link rel="stylesheet" type="text/css" href="./static/css/dataTables.bootstrap.css"> <!-- 静态js --> <script type="text/javascript" src="./static/js/lib/jQuery-2.1.4.min.js"></script> <script type="text/javascript" src="./static/js/lib/bootstrap.min.js"></script> <!-- <link rel="stylesheet" type="text/css" href="./static/css/fixedColumns.bootstrap.min.css"> --> <script type="text/javascript" src="./static/js/lib/jquery.dataTables.min.js"></script> <script type="text/javascript" src="./static/js/lib/dataTables.bootstrap.min.js"></script> <script type="text/javascript" src="./static/js/lib/date-time-picker.js"></script> <!-- <script type="text/javascript" src="./static/js/lib/dataTables.fixedColumns.min.js"></script> --> <meta charset="utf-8"> <title>XYvod</title> </head>
2.页面内的公共的参数
比如,用户名,分组,权限等都放在framework.vue里,子页面用this.$parent.$parent.userInfo调用
3.引入公共组件 component
在main.js里import singleSelect from './components/functional_select/single_select' //引入
Vue.component('singleSelect', singleSelect) //注册
这样注册后,所有路由页面都可以使用singleSelect了
4.引入公共方法 function
在main.js里,把一个方法绑定到vue的原型上,
Vue.prototype.hello = function(){ console.log('ppppp') }
然后在路由页面,调用this.hello('lemon',callback)就可以使用了
同样适用于公共的util方法,不过我没有使用这种拓展Vue原型链的方法,而是在每个路由页面都单独import util,使用公共方法
三、内插值属性1.0和2.0的写法不同了
<!-- 1.x -->
<div id="{{ selected.title }}">
<!-- 2.0 -->
<div v-bind:title="selected.title" >test</div> <div v-bind:someprop="testModel">test</div> <div v-bind:class="'id-' + item.id">test</div>//字符串+变量
四、v-for循环的key,value值互换了位置,还有track-by
<!-- 1.x --> <div v-for="(index,item) in list" track-by="id">
<!-- 2.0 --> <div v-for="(item,index) in list" :key="item.id">
五、filter过滤器
filter过滤器现在要定义到和methods同级的对象下
<div>{{ title | titleFilter }}</div> methods: {}, filters: { titleFilter: function(value){ return value+ 'ppp' } }
六、遍历数组时,key值不能做model
v-model绑定数据的时候,{key,value}这种数据类型,key值是不能做model的,js里不能修改key值,value值未声明的话会报错,但是modal.value没有的话,不会报错,数组也是同理,会报错
下面是错误的写法:
taskList: ["lemontest1","lemontest2","lemontest3"] <div class="form-group" v-for="(task,index) in taskList"> <input type="text" class="form-control" placeholder="请输入任务名称" v-model="task"> </div>
改为::
taskList: [ {name: "lemontest1"},{name: "lemontest2"},{name: "lemontest3"} ] <div class="form-group" v-for="(task,index) in taskList"> <input type="text" class="form-control" placeholder="请输入任务名称" v-model="task.name"> </div>
七、父子通信
其实父子通信踩得坑最多了,很多的api和方法1.0和2.0都完全不一样了!详见之前的一篇组件父子通信!
相关文章推荐
- vue2.0开发过程中遇到的常见问题
- MiniOA开发过程记录(7)-JSF2.0/Richfaces/MiniOA开发入门
- 总结一下php5.2.16与apache2.0的扩展开发整个过程
- Vue2.0 全家桶开发的网页应用(参照吾记APP)
- Vue 2.0 高级实战-开发移动端音乐WebApp
- Vue2.0总结———vue使用过程常见的一些问题
- 【SD2.0大会】CodeGear布道者范路:软件开发过程,改天换地
- 使用vue-cli开发过程中如何把jQuery设置为全局
- 前端Vue开发过程使用相关组件及库
- vue2.0 开发实践总结之入门篇
- Vue 2.0 高级实战-开发移动端音乐WebApp
- ejb2.0详细开发过程
- vue 2.0 开发实践总结之疑难篇
- vue2.0开发实践总结之入门篇
- vue2.0开发环境的搭建详解
- 总结一下php5.2.16与apache2.0的C++扩展开发整个过程
- vue2.0 开发实践总结之入门篇
- Vue开发过程中遇到的疑惑知识点总结
- vue2.0之多页面的开发
- Vue2.0项目开发流程—通俗易懂