Vue学习之路---No.4(分享心得,欢迎批评指正)
这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说。
http://www.tuicool.com/articles/NVZ7Vfe
老规矩,先回顾一下上一次的重点:
1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一定要跟在v-if后面才有效
2.v-show和v-if的区别( v-show不会渲染dom,只会改变display属性;所以v-if切换速度比v-show慢,而v-show初次渲染比v-if慢 )
3.v-for循环,及循环中每一个参数所对应的值,这里不具体指出,详情请看学习之路No.3
4.当我们不需要循环数据只需要循环次数的时候( <div v-for = " n in items ">{{n}}</div> )
Ok,温故而知新,下面我们开始第二步---知新
首先,我们先了解一下常用的修饰器,如下:
push() //在结尾处增加一条或多条数据
pop() //删除最后一条数据
shift() //删除第一条数据并返回
unshift() //从开始增加一条或多条数据,并返回数组长度
splice() //从数组中添加或删除元素,然后返回被删除的元素
sort() //对数组进行排序
reverse() //颠倒数组的顺序
比如:
example1.items.push( { message } )
//在循环数组的最后加上一条数据,同时我们也改变了它的视图
相应的,有些js方法不修改原始数据,只返回一个新的数组
比如:
filter() //返回条件为真的数据
conact() //连接两个或多个数组
silce() //从已有数组中选择一部分元素返回
使用的时候,因为这样的方法不会改变原有数据,只会返回一个新数组,所以需要整体接受一下,代码如下:
example1.items = example1.items.filter( function (){
return item.message.match(/ foo /)
} )
也许这个时候有人会说,这样整体返回和整体接收会大大影响渲染速度吧,不得不说,你很有想法
但是令人惊奇的就在于 Vue的内置方法会自动重用那些没有进行过改动的数据,这也是Vue为什么快的原因之一。
那么需要之一的地方是,由于javascript的某些限制,我们不能直接对数组进行改动,比如这样:
vm.items[ indexOfItems ] = newValue
vm.items.length = newLength
我们应该这样:
1. Vue.set(example1.items,indexOfItems,newValue)
example1.items = example1.items.splice( indexOfItems,1,newVaue )
2.example1.items = example1.items.splice( newLength )
这里我给大家解释一下
第一种情况的 方法一为 利用Vue的内置方法set()改变了下标为indexOfItems的元素
方法二为 通过整体接收,找到某个元素,同时用一个新的值替换从这个元素开始的n个元素,上面n等于1
第二种情况则为 利用整理接收的方法,返回一个新的长度为 newLength的数组
变得比一开始更难理解了?对的,所以,我们减少学习量,一步一步走踏实
进入今天的最后一个环节:
显示过滤或排序后的数据:
<div v-for = " n in numbers ">{{n}}</div>
data: {
numbers[ 1,2,3,4,5 ]
},
computed : {
evenNumbers: function( ){
reutrn this.numbers.filter( function( number ){
return number % 2 === 0
} )
}
}
data:{
numbers[ 1,2,3,4,5 ]
}
method : {
even : function ( numbers ){
return numbers.filter( function( number ) {
return number % 2 === 0
} )
}
}
上面两种方法输出的结果都是一样的,都为2,4
一种为计算属性,另一种为方法;之前我们提到过,方法和计算属性可以完成一样的功能,但是相互有区别。
这个地方,当某些地方不能使用计算属性的时候,我们就利用方法来实现,同时仔细观察的同学可以看出
这个方法,我们可以传参。
今天我们就到这里,祝大家工作顺利,学习进步。
明天见~~~~~~欢迎大家留言指出问题,互相交流,共同进步
相关文章
- vue 学习资源链接,总结
- vue - 认识ora
- vue - webpack.dev.conf.js for HtmlWebpackPlugin
- vue 动态绑定change事件
- axios基础学习——通过 Vue + axios 获取接口数据的小demo
- 07Vue - Vue实例(属性与方法)
- Vue项目中使用AntV X6绘制流程图
- vue学习
- vue-cli2.0权限控制
- vue导入excel
- Vue 生命周期 详细介绍(面试必考,内附实例截图)
- Cordova结合Vue学习Camera
- Vue中的导航守卫(路由守卫)
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue学习笔记一:环境搭建
- vue学习小笔记
- vue中如何-巧-妙-的引入v-u-e--a-w-e-s-o-m-e-s-w-i-p-e-r
- MintUI引入vue项目以及引入iconfont图标
- vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏
- vue学习:使用v-for向select组件绑定数据
- vue学习:使用tab标签页时,刷新页面停留在当前tab
- Django+Vue项目学习第七篇:利用nginx解决跨域问题
- Django+Vue项目学习第四篇:使用axios发送携带参数的get请求
- Vue学习第33天——路由守卫(导航守卫)超详解讲解及使用场景、案例练习
- Vue学习第32天——缓存路由组件keep-alive的用法及路由组件独有的2个生命周期函数
- Vue学习第31天——编程式路由导航5种方法详解及案例练习(与声明式路由导航对比)
- Vue学习第29天——路由的props配置项的详解与案例(对比组件props配置项)
- Vue学习第15天——props配置项详解
- vue项目打包后字体文件路径出错的解决办法
- Vue.js 技术揭秘学习 (3) render