vue---从0开始，3.vue的简单上手2-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40504108/article/details/83040451

v-bind -> 属性相关，适用于所有标签属性简写 :

class 和 style 指令
:class=“{class1: true [, class2: false …]}”
:style=“{css属性名: 属性值 [, css属性名: 属性值 …]}”
动态的class或css名 -> :style=“{[变量名]: 属性值}"

可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的真假。
可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。
例：

<template>
  <div id="app" >
    <div class="red"
        v-bind:class="{border:hasBorder,size:hasSize,fontsize:hasFont}">啦啦啦啦</div>
  	</div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      hasSize:true,
      hasFont:false,
      hasBorder:true
    }
  }
}
</script>

<style>
.red{
  color: red;
}
.border{
  border:1px solid #000;
}
.size{
  width: 100px;
  height: 30px;
}
.fontsize{
  font-size: 24px;
}
</style>

效果：
在这里插入图片描述

v-bind:class还有其他的几种写法，适用于不同的使用方法，这里就不一一写明，详细见vue官网介绍：Class 与 Style 绑定

过滤器：vue2.0 移除了所有内置过滤器，只能自定义

注意：过滤器只能在双花括号插值和 v-bind 表达式中使用，过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

一个将首字母大写的过滤器例子：

<template>
  <div id="app" >
    <div >{{message | capitalup}}</div>
  </div>
  
</template>

<script>

export default {
  name: 'app',
  data(){
    return{
      message:"hello"
    }
  },
  filters:{//过滤器都写在这个里面，作为函数存在
    capitalup:function(value){
      if(!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase()+value.slice(1)//首字母大写
    }
  }
}

</script>

<style>
</style>

效果：
在这里插入图片描述
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalup 过滤器函数将会收到 message 的值作为第一个参数。

过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。

自定义键盘指令

根据keyCode给按键起个别名，增强了程序的可读性

Vue.config.keyCodes.ctrl=17

之前写到过 v-on:keyup.enter=“addThingEnter”
这里 v-on:keyup.enter就是定义按下enter键的指令为addThingEnter函数
但不是每个键都有名字，只有少数几个有，例如f2键，如果写v-on:keyup.f2是监听不到按下f2的，但每个键都是有编码序号的，可以百度自行查阅序号表，例f2键序号为113，则使用：
Vue.config.keyCodes.f2 = 113;
再写v-on:keyup.f2就可以实现监听f2键
至于Vue.config.keyCodes.f2 = 113;直接写在script里面

计算属性

有些数据的变化是伴随着业务逻辑计算的，data 下挂载的数据无法实现这一点，所以使用计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性写在computed里面，computed里面可以放置一些业务逻辑代码
一个将字符串翻转的计算属性的例子：

<template>
  <div id="app" >
    <div >{{message }}</div>
    <div >{{reversedMessage }}</div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      message:"hello"
    }
  },
  computed:{//计算属性写computd里面，也相当于一个函数
    reversedMessage:function(){
      return this.message.split('').reverse().join('')//反向输出
    }
  }
}
</script>
<style></style>

效果：
在这里插入图片描述
计算属性实现的效果，用函数方法也可以实现，二者最终没有区别，但是
不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
通常一个计算属性的写法为：

computed: {
  fullName: {
    // getter默认调用，当你读取一个变量的时候会触发该变量的getter.
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter  当你修改该变量时候会触发他的setter.这是自己加的
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}