首页 > 代码库 > Vue学习之路---No.2(分享心得,欢迎批评指正)
Vue学习之路---No.2(分享心得,欢迎批评指正)
昨天我们大致了解了有关Vue的基础知识和语法;今天我们继续在大V这条路上前进。
首先,我们回忆一下昨天提到的相关知识点:
1.了解Vue的核心理念------”数据驱动视图“
2.了解Vue的特色功能-------”双向绑定“
3.了解Vue的基础语法-------”{{bigSurprise}},el:‘‘,data{},vm.project,method{},等
首先,昨天我们提到了很好用的双向绑定,但是如果在某些情况下我们不需要双向绑定应该怎么办呢,看如下代码:
<div id=" javascript ">
<div v-once> {{ vue }} </div>
<input v-medol="vue">
</div>
new Vue({
el:‘#javascript‘
data{
vue : ‘ hello world ‘
}
})
那么这个地方,我们堆div标签添加一个directive,即为 v-once,阻止了双向绑定,所以当input中的元素发生改变,div中也并不会改变。
然后进入正题------------filters(过滤器)
先上代码:
new Vue ({
el:‘#javascript‘
data{
vue : 123.123
},
filters{
toInt function(value){
return parseInt(value)
}
}
})
<div>{{vue}}</div>
//那么这个时候div中输出的元素就应该是整数 123.
可以看到,data中定义了一个小数变量,通过关键字filters定义了一个传参方法(值得注意的是filters中function的默认第一个参数为当前value值)---toInt
既然说到了filters,那么我们还需了解到的是,filters支持链式写法,代码如下:
<div>{{ vue | filtersMc | filtersCm }}</div> ( 利用管道符分割多个过滤器,过滤器会自动按照顺序执行 )
当然filters也可以传递参数, 代码如下:
<div>{{ vue | filtersMc , Mc1 , Mc2 }}</div>
(不同的参数之间用逗号隔开,在这里,其实我们已经拥有了3个参数-------value, Mc1 , Mc2)
PS: 然而filters在2.0版本以后,将不再被允许在directive中使用,所以这个时候我们引入 计算属性---computed;
废话不多说,直接上代码:
new Vue({
el:‘ mcc ‘,
data {
mcc_number : 123.123
},
filters{
toInt function(value){
return parseInt(value)
},
computed{
mcc_numbers : function(){
return parseInt( this.mcc_number )
}
method{
toInt : function{
return parseInt (this.mcc_number)
}
}
}
}
})
<div id="mcc">
<div> {{mcc_number}} </div>
<div>{{mcc_numbers}}</div>
</div>
以上代码,我们可以发现,
1.我们利用计算属性computed替代了filters的作用
2.我们利用computed计算出来的mcc_numbers其实是一个动态属性,它随着mcc_number的变化而改变,而不像filters只获取当前data中的数据,这一点值得推崇。
3.这里的computed中的mcc_numbers不是一个方法,而是作为一个属性来使用(如果不能理解,试着理解计算属性这个词)
4.上面代码中的this,也就是vm(昨天提到了 view-medol)
所以,我们看一下打印的结果:
console.log( vm.mcc_number ) // -> 123.123
console.log( vm.mcc_numbers ) // ->123
if ( vm.mcc_number == 123456.123456 )
console.log( vm.mcc_number ) // ->123456.123456
console.log( vm.mcc_numbers ) // -> 123456;
细心的人可能还发现了,我们利用 method{ toInt:function() }其实也达到了相同的效果,那么这两种写法的区别在哪里呢??
我们来试着理解一下,上面提到计算属性是动态输出,那么它是根据 mcc_number 的变化而变化的,换言之,它随着 data 的数据而变化
我们可以把data当成 computed 的数据源,那么当data没有发生变化的时候,data中的数据就会被缓存;而filters和method不一样就在于
filters和method中都是一个方法,它们每次都会运行一次这个方法(上面提到,computed中的mcc_number是一种属性);所以善于计算属性
在某些情况下就会提高开发效率。
举一个例子:
compute{
date : function() {
return Data.now()
}
}
这个例子没有依赖任何的data数据,所以在data数据变化之前,它会一直缓存住第一个数据,而不用每次都要再运行一次拿到数据。
这些东西感觉陌生? ALL right~ 我们来点熟悉的~~~
前面我们提到了 v-bind=”“ 可以用来绑定HTML的自有属性,那么现在我们来延展一下 v-bind=”“:
<div class=" vue " v-bind="{ active : bootstrap , current : directive }"></div>
new Vue({
el:‘‘,
data{
bootstrap : true,
directive : false
}
})
注:
1.以上代码我们利用 v-bind 绑定了两个键值对,key为类名,而value为属性
2.我们在data中做一个判断,当属性为true的时候 显示对应的key,反之则不显示
3.v-bind=”{}“是可以和自带的class 连用的,于是输出结果为 -> <div class=" vue active "></div>
我们继续延展,上代码:
<div class="vue" v-bind="{ objectClass }"></div>
new Vue({
el:‘‘,
data:{
objectClass:{
nav:true
header:true
active : true,
current:false
btn:false
footer:false
}
}
})
不难看出,我们其实只是把v-bind所绑定的键值对换成了对象而已,然后在data中对对象中的class直接进行判断
这种写法比较适合class较多的情况。
有经验的小伙伴,肯定可以想到下一步该学习什么了,对,既然对象有了,键值对有了,那数组呢?
代码如下:
<div class = "vue" v-bind="{ [ mmClass, ccClass , ffClass] }"
new Vue({
el:‘‘,
data{
mmClass : active,
ccClass : current,
ffClass : nav
}
})
这种用数组的写法使用于切换多个class的情况,和之前的判断显不显示同一个类名有所不同
如果你依然需要判断是否显示,那么可以这样:
<div class = " vue " v-bind = "{ [ activeOk ? active : ‘ ‘, mmClass] }"
如果觉得这样的三元计算方法太过复杂,那么我们可以换一种方式:
<div class = " vue " v-bind = " { [ { active : bootstrap }, mmClass ] } "
如上,我们在数组中又加入了一个键值对,利用value来判断是否显示active
同样,思维活跃的小伙伴们又会发现,我们除了把它变成一个键值对,如果有更多的class,我们还可以把它变成一个对象来写,如下:
<div class = "vue" v-bind = " { [ { objectClass }, mmClass ] } "
new Vue ({
el:‘‘,
data : {
objectClass : {
active : true,
current : false
}
mmclass : nav
}
})
这样的写法可以理解为,前面固定一个或多个类名,而后面可以显示任意类名。
我们学习完利用v-bind="{}"绑定class,那么同理,我们依然可以用这几种方法来绑定 Class, 这个留个大家一起来做,明天晚上我们一起来揭晓答案~~
顺便提一下,在vue中,某些需要加前缀的属性,比如 border-radius,transform等,vue会自动添加前缀~~~很方便哦~~~~~~
冰冻三尺,非一日之寒;学习东西也一样,我们一步一步稳扎稳打的走~~那么明天见~~~~~~good night~~~
Vue学习之路---No.2(分享心得,欢迎批评指正)