vue 个人记录

计算属性

定义：要用的属性不存在，需要通过已有属性计算得来。

个人理解
通过一个逻辑处理，得到一个不存在的属性。
比如 fullname = firstname + lastname
另：
定义一个fullname计算属性，得到里面get方法的返回值，返回值被命名为fullname，调用fullname

原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。

 <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
 </div>

<script>
   new Vue({
      el:'#root', 
      data:{ 
           firstName:'张',
           lastName:'三'
      },
      computed:{
           fullName:{
                get(){
                    return this.firstName + '-' + this.lastName
                },
                set(value){  //此处 value 就是 fullname
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
          }
      }
  })
</script>

get函数什么时候执行？
1.初次读取时会执行一次
2.当依赖的数据发生改变时会被再次调用

set函数什么时候执行？
计算属性被修改时

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注：
1.计算属性最终会出现在vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
3.如果计算属性确定 不考虑修改 ，可以使用计算属性的简写形式

简写

new Vue({
    el:'#root', 
    data:{ 
        firstName:'张',
        lastName:'三'
    },
    computed:{
        fullName(){ //计算属性叫fullname，函数名也叫fullname   ===fullname：function（）{ }
            return this.firstName + '-' + this.lastName
        }
    }
})

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

个人理解
对要显示的数据进行一些简单的逻辑操作
比如例子中的time只是一个时间戳，使用过滤器之后，变成了 年-月-日

语法：注册过滤器

“全局注册”

Vue.filter(name,callback())

“局部注册”

new Vue(
   filters:{
})

备注：

1. 过滤器也可以接受额外参数，多个过滤器也可以串联
2. 并没有改变原本的数据，是产生新的对应的数据

<h3>转换后时间：{{time | timeFormater()}}</h3>
<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>

Vue.filter('mySlice',function(value){
   return value.slice(0,11)
})

new Vue({
     el:'#root',
     data:{
        time:1626750147900,
     },
     //局部过滤器
     filters:{
           timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
              return dayjs(value).format(str)
           }
        }
     })

自定义指令

在directives：{}中自定义指令

指令何时会被调用？

1. 指令与元素成功绑定时
2. 指令所在模板被重新解析时

<h2>当前的n值是：<span v-text="n"></span> </h2>
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>

directives:{
    big(element,binding){
       console.log('big',this) //注意此处的this是window
       element.innerText = binding.value * 10
    }
}