Vue.js 创建一个 CNODE 社区

Posted 小粒旬

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 创建一个 CNODE 社区相关的知识,希望对你有一定的参考价值。

还是继续入门 demo

这篇博文应该有点长,因为觉得了解了 computed 之后,应该还会继续学下去,所以这里会包含 computed 和 v-bind 的相关学习内容。


computed

什么是计算属性

所有的计算属性都以函数的形式写在 Vue 实例内的computed 选项内,最终返回计算后的结果。

为什么使用计算属性以及如何使用

技术分享图片

逻辑过长,会变的臃肿,难以维护。

技术分享图片

使用计算属性可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

如计算一个购物车总价:

技术分享图片

计算属性还可以依赖多个 Vue 实例的数据

计算属性还可以依赖多个 Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新

我们声明了一个新的 Vue 实例 app2,然后在 app 中的计算属性 prices 中调用 app2 中的属性:

var app2 = new Vue({
  el:‘#app2‘,
  data:{
    msg:‘ this‘s app2‘
  }
})
var app = new Vue({
  el:‘#app‘,
  data:{
    text:‘123,456,789‘,
    package:[
      {
        package1:{
          name:‘iphone‘,
          price:6900,
          count:2
        },
        package2:{
          name:‘ipad‘,
          price:5900,
          count:3
        }
      }
    ]
  },
  //定义计算属性
  computed:{
    reverseText:function(){
      // this 代表了这个 Vue 实例
      return this.text.split(‘,‘).reverse().join(‘,‘)
    },
    prices:function(){
      var price = 0
        for(let key in this.package[0]){
          price += this.package[0][key].price*this.package[0][key].count
        }
      return price + app2.msg
    }
  }
})

技术分享图片

技术分享图片

计算属性中的 getter 和 setter

每一个计算属性都包含-个 getter 和一个 setter。

如果计算属性直接跟一个 function,默认的就是 getter ,如上面那几个例子。

如果计算属性设置 getter 和 setter,同时给计算属性设置值的时候,他就会根据 setter 先拿到新数据,处理过之后,再交由 getter 处理:

技术分享图片

技术分享图片

计算属性和 methods 的区别

调用 methods 里的方法也可以与计算属性起到同样的作用。那他们有什么区别呢?

通过 demo 来理解,使用不同的方法获取时间戳,我们在 methods 中定义一个方法:

methods:{
    thisTime:function(){
        return Date.now()
    }
}

在 computed 中定义一个属性:

computed:{
    nowTime:function(){
        return Date.now()
    }
}

在页面中显示出来:

<!--下面使用了 计算属性-->
{{ nowTime}}
<br>
<!--下面使用了 methods-->
{{ thisTime() }}

第一次渲染:

技术分享图片

通过给 app.text 重新赋值,再次渲染:

技术分享图片

可以看到,在渲染后,通过 methods 获取到的数据发生了改变;而计算属性获取到的数据并没有发生改变。

注意 渲染是渲染,页面刷新是刷新;页面刷新,一定会重新渲染;页面重新渲染,页面不一定要刷新。

methods 方法: 如果是调用方法,只要页面重新渲染。方法就会重新执行,不需要渲染,则不需要重新执行

计算属性:不管渲染不渲染,只要计算属性依赖的数据未发生变化,就永远不变,计算属性是依赖于缓存的。

如何选择 methods 和计算属性:

是否需要缓存,需要缓存,选择计算属性;不需要缓存,使用 methods。


小总结

JSbin 代码链接

  • 创建以一个vue实例,并使用计算属性和方法实现一个字符串翻转的操作,写出核心代码

html:

<div id="app">
    {{ textReverse() }}
    {{ textReverse2 }}
</div>

JS:

var app = new Vue({
    el:‘#app‘,
    data:{
        text:‘reverse text‘
    },
    methods:{
        textReverse:function(){
            return this.text.split(‘‘).reverse().join(‘‘)
        }
    },
    computed:{
        textReverse2:function(){
            return this.text.split(‘‘).reverse().join(‘‘)
        }
    }
})
  • 何时使用模板内表达式,何时使用计算属性

当表达式所需的逻辑链较短,数据处理需求不大时,可以使用模板内表达式。

当逻辑链变长,逻辑更为复杂时,使用计算属性。

  • 计算缓存 vs Methods,两者的区别

调用 methods 里的方法可以与计算属性起到同样的作用。

他们的区别在于:

methods 方法: 如果是调用方法,只要页面重新渲染。方法就会重新执行,不需要渲染,则不需要重新执行

计算属性:不管渲染不渲染,只要计算属性依赖的数据未发生变化,就永远不变,计算属性是依赖于缓存的。

  • 代码题

实例化一个vue实例,在data中定义一个姓氏firstName和名字firstName,还有一个全称叫fullName。

提示:fullName = firstName + firstName。

需求:分别使用watch监听器和计算属性来实现以下功能实现,只要姓氏firstName和名字firstName中的任意一个改变,全称fullname就会改变

老师真鸡贼...还没有看到 watch 呐哈哈,还是得去预习一下再做这道题了:

HTML:

<div id="app">
    {{ fullName }}
</div>

computed:

var app = new Vue({
    el:‘#app‘,
    data:{
        firstName:‘Zhang‘,
        lastName:‘da‘,
        fullName:‘Zhang da‘
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName + ‘ ‘ + this.lastName
            },
            set:function(newValue){
                let name = newValue.split(‘,‘)
                this.firstName = name[0]
                this.lastName = name[1]
            }
        }
    },
})

watch:

var app = new Vue({
    el:‘#app‘,
    data:{
        firstName:‘Zhang‘,
        lastName:‘da‘
    },
    watch:{
        firstName:function(val,oldVal){
            this.fullName = val + ‘ ‘ + this.lastName
            console.log(oldVal)
        },
        lastName:function(val,oldVal){
            this.fullName = this.firstName + ‘ ‘ + val
            console.log(oldVal)
        }
    }
})

v-bind

动态地绑定一个或多个特性,或一个组件 prop 到表达式。

在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。

之前在 (1) 已经略微了解过 v-bind,现在来更深入地了解一下他的用法。

绑定 class - 对象

绑定 class 对象语法,对象的键是类名,值是布尔值。

技术分享图片

技术分享图片

技术分享图片

绑定 class - 计算属性

当 class 的表达式过长或逻辑复杂时,还可以绑定一个计算属性

技术分享图片

active 就是类名,他是否会启用,取决于他的值是否为 true。当 this.isActive 为 true 且 !this.isBorder 也为 true 时,这个样式才能显示出来。

绑定 class - 数组

绑定 class 数组,数组中的成员 对应着 类名

技术分享图片

数组和对象混用

把对象写入数组中,如:

HTMl:

<div :class=‘[{borderStyle:isActive},"className"]‘></div>

JS:

var app = new Vue({
    el:‘#app‘,
    data:{
        isActive:true,
        className:‘lineStyle‘
    }
})

CSS:

.lineStyle{
    line-height:666px;
}

绑定内联样式

还可以绑定内联样式:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div>
data: {
  activeColor: ‘red‘,
  fontSize: 30
}

还可以直接绑定到一个样式对象:

<div v-bind:style="styleObject"></div>
data:{
    styleObject:{
        color:"red",
        fontSize:"30px"
    }
}

关于 v-bind 的 demo 详见 JSbin


小总结

  • 写出本课中v-bind的作用,并分别写出v-bind的变量语法,数组语法,对象语法

作用:通过数据绑定操作元素的 class 列表和内联样式

变量语法: v-bind:class=变量名,变量名在 Vue 实例里的 data 对象内定义,变量的赋值内容则是类名。

数组语法: v-bind:class=[数组成员],可以绑定多个 class,数组成员可以是对象,如果是对象的话,这个对象的值为 true ,这个 class 才可以会被使用;如果是数组成员是变量,则需要的 Vue 实例里的 data 对象内设置变量,变量的赋值内容则是类名。

对象语法: v-bind:class = {类名:布尔值},通过判断布尔值,来确定 class 是否被启用。

变量语法

HTML:

<div :href=‘url‘></div>

JS:

data:{
    url:‘http://www.acfun.cn/‘
}

数组语法

HTML:

<div :class=‘[className1,className2]‘></div>

JS:

data:{
    className1:‘divStyle‘,
    className2:‘borderStyle‘
}

对象语法

HTML:

<div :class=‘{divStyle:isActive}‘></div>

JS:

data:{
    isActive:true
}

绑定计算属性:

HTML:

<div :class=‘className‘></div>

CSS:

.active{
    color:red;
}

JS:

...
data:{
    isActive:true,
    isBorder:true
},
computed:{
    className:function(){
        return {
            active: this.isActive || isBorder
        }
    }
}

本篇博文到此结束,主要学习了计算属性 computed 和 v-bind 的一些用法,其实 Vue 的官方文档里面也有相关的教程,但是老师讲得也是十分详细,对照着看很容易理解,多写 demo 也增加了对 Vue 的认识。

以上是关于Vue.js 创建一个 CNODE 社区的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 创建一个 CNODE 社区

Vue.js 创建一个 CNODE 社区

Vue.js 创建多人共享博客

Node.JS自动化测试在CNode社区中的应用 -- CnodeJS线下沙龙活动

基于vue的nuxt框架cnode社区服务端渲染

使用带有渲染功能的 Vue.js 3 片段