Vue学习之路---No.2（分享心得，欢迎批评指正）

昨天我们大致了解了有关Vue的基础知识和语法；今天我们继续在大V这条路上前进。

首先，我们回忆一下昨天提到的相关知识点：

1.了解Vue的核心理念------”数据驱动视图“

2.了解Vue的特色功能-------”双向绑定“

3.了解Vue的基础语法-------”{{bigSurprise}},el:'',data{},vm.project，method{},等

首先，昨天我们提到了很好用的双向绑定，但是如果在某些情况下我们不需要双向绑定应该怎么办呢，看如下代码：

<div >

<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 >

<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

}

})

这样的写法可以理解为，前面固定一个或多个类名，而后面可以显示任意类名。

顺便提一下，在vue中，某些需要加前缀的属性，比如 border-radius，transform等，vue会自动添加前缀~~~很方便哦~~~~~~

冰冻三尺，非一日之寒；学习东西也一样，我们一步一步稳扎稳打的走~~那么明天见~~~~~~good night~~~