Vue学习之路---No.2(分享心得,欢迎批评指正)

时间:2023-12-05 20:09:26

昨天我们大致了解了有关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~~~