Vue学习之路---No.2（分享心得，欢迎批评指正）
Posted coopermc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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（分享心得，欢迎批评指正）的主要内容，如果未能解决你的问题，请参考以下文章