Vue -- 总结 03

计算属性

<template>
  <div id="app">
    <h1>计算属性</h1>
    <!-- <div>{{ message.split('').reverse().join('') }}</div>
    <div>{{ message }}</div> -->
    <h1>方法的调用</h1>
    <div>{{ reversedMessageFun() }}</div>
    <div>{{ reversedMessageFun() }}</div>
    <div>{{ reversedMessageFun() }}</div>
    <div>{{ reversedMessageFun() }}</div>
    <input type="text" v-model="message">
    <h3>计算属性的缓存</h3>
    <div>{{ num }}</div>
    <input type="text" v-model="num">
    <div>{{ salePrice }}</div>
  </div>
</template>

<script>

// 一个.vue文件就是一个组件，组件的选项
// 你可以在一个组件的选项中定义本地的过滤器：局部过滤器
// vue2选项式API--代码应该写在什么地方给你规定好了
export default {
  name:'App',
  data(){
    return{
      message:'hello',
      num:123,
      // reversedMessage:""
    }
  },
  methods:{
    reversedMessageFun: function(){
      return this.message.split('').reverse().join('')
    }
  },
  // 计算属性
  computed:{
    // 简化模版中重复使用的复杂表达式
    // 计算属性的 getter
    // 计算属性中的方法名当成data中字段去使用
    // 计算属性中的方法名不能和data中已有的字段进行重复
    reversedMessage(){
      return this.massage.split('').reverse().join('')
    },
    salePrice(){
      return this.num*3
    }
  }
}
</script>

<style>

</style>

过滤器

        过滤器就是一个函数, 传入值返回处理后的值

        过滤器可以用在两个地方：双花括号插值和v-bind表达式。

        过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示 |

        过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本

        全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

全局定义字母都大写的过滤器

局部定义字符串翻转的过滤器

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 2. 过滤器使用
      语法: {{ 值 | 过滤器名字 }}
     -->
    <p>使用翻转过滤器: {{ msg | reverse }}</p>
    <p :title="msg | toUp">鼠标长停</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'HelloVue'
    }
  },
  // 方式2: 局部 - 过滤器
  // 只能在当前vue文件内使用
  /*
     语法: 
     filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
  */
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>

<style>

</style>

过滤器和就地更新 

<template>
    <div id="app">
      <h1>就地更新</h1>
        <div v-for="(item,index) in arr" :key="index">
          {{ item }}
        </div>
        <button @click="changeArr(1)">修改arr</button>
        <h1>高效更新</h1>
        <div v-for="item in arrObj" :key="item.id">
            {{ item.name }}
            <div v-for="item in item.children" :key="item.id">
                {{ item.name }}
            </div>
        </div>
        <button @click="changeArr(2)">修改arr</button>
        <h3>直接修改数组</h3>
        <button @click="changeArr(3)">直接修改数组</button>
        <h1>过滤器的使用</h1>

        <!-- | 管道需要放到js遇到的后面 -->
        <!-- 可被用于一些常见的文本格式化 -->
        <!-- 数据格式化 -->
        <div>{{ message | capitalize('$') }}</div>
        <!-- <div>{{ message | stan('$') }}</div> -->
        <h1>时间格式化</h1>
        <div>{{ timeDate | formTime }}</div>
    </div>
  </template>
  
  <script>
  import moment from "moment";
//   一个.vue文件就是一个组件，组件的选项
// 你可以在一个组件的选项中定义本地的过滤器：局部过滤器
// vue2选项式API--代码应该写在什么地方给你规定好了
    export default {
      name:'App',
      data(){
        return {
          message:'hello',
          arr:['小明','小蓝','小红'],
          arrObj:[
            {
              id:256,
              name:'小米',
              children:[
                {
                  id:258,
                  name:'红米'
                }
              ]
            },
            {
              id:123,
              name:'小明',
              children:[
                {
                  id:234,
                  name:'moom'
                }
              ]
            }
          ],
          timeDate:new Date()
        }
      },
      methods:{
        changeArr(type){
          let that = this;
          if(type==1){
            // 就地更新 （如果没有使用key或者key是下标时会触发就地更新（就地修改））
            that.arr.splice(1,0,'添加的值')
          }else if(type==2){
            // 高效更新（如果key是id会触发高效更新）
            that.arrObj.splice(1,0,{id:999,name:'小小'})
          }else{
            // vm.$set( target(要修改的目标), propertyName/index（要修改的属性or下标）, value（设置的新值） )
            // that.arr[0]='新值' 错误的写法
            console.log('this',this);
            that.$set(that.arr,0,'新值')
          }
        }
      },
      filters:{
        capitalize(value,money)  {
          // if(!value) return '' 的意思是，如果 value 的布尔值为 false
          //（即 value 为 undefined、null、0、空字符串 ""、false 等），
          // 则执行 return '' 语句，返回一个空字符串。
          if(!value) return ''
          // 转换成字符串
          let value1 = value.toString()
          console.log('value',value);
          console.log('value.slice(1)',value.slice(1));
          console.log('value1',value1.charAt(0).toUpperCase());
          return value1.charAt(0).toUpperCase() + value1.slice(1)+money
        },
        formTime(value){
          return moment(value).format('YYY年MM月DD日HH:mm:ss')
        }
      }
    }
  </script>

侦听器的基本使用

<template>
  <div id="app">
    <h1>侦听器--简单数据类型</h1>
    <input type="text" v-model="studentName">
    <div>{{ classMsg }}</div>
    <div>{{ schoolMsg }}</div>
    <h1>侦听复杂数据类型</h1>
    <input type="text" v-model="obj.name">
  </div>
</template>

<script>
// 一个.vue文件就是一个组件，组件的选项
// 你可以在一个组件的选项中定义本地的过滤器：局部过滤器
// vue2选项式API--代码应该写在什么地方给你规定好了
export default {
  name: 'App',
  data(){
    return {
      studentName:"小明",
      classMsg:"999",
      schoolMsg:"郑州100",
      obj:{
        name:"san"
      }

    }
  },
  methods:{
    
  },
  watch:{
    // 侦听器一般是一个值的变化影响多个值的变化
    // 一对多的关系
    studentName(newValue,oldValue){
      console.log("newValue",newValue)
      console.log("oldValue",oldValue)
      let that = this;
      that.classMsg = `火花256${newValue}`
      that.schoolMsg = `五道口火花256${newValue}`
    },
    // 侦听复杂数据类型其中一种写法
    // "obj.name"(newValue,oldValue){
    //   console.log("newValue",newValue)
    //   console.log("oldValue",oldValue)
    // }
    // 使用使用侦听来侦听对象
    deepCopy:{
      handler(newValue,oldValue){
        console.log("newValue",newValue)
        console.log("oldValue",oldValue)
      },
      // 深度侦听
      deep:true,
      // 立即执行
      immediate:true
    }
  }, 
  // 计算属性
  computed:{
    // 
    // 简化模版中重复使用的复杂表达式
    // 计算属性的 getter
    // 计算属性中的方法名当成data中字段去使用
    // 计算属性中的方法名不能和data中已有的字段进行重复
    reversedMessage(){
      return this.message.split('').reverse().join('')
    },
    deepCopy(){
      return JSON.parse(JSON.stringify(this.obj))
    },
    salePrice(){
      // 计算公式 公式里面是不是会有多个影响的因素
      // 多个值的变化影响一个值的变化
      // 多对一的关系
      // 
        return this.num*2+99
    }
  }
 
}
</script>

<style>

</style>

computed(计算属性)和watch(侦听器)有什么区别 

computed:

        computed 计算属性通过属性计算而得来的属性,使模板更加简洁,易于维护，

        computed 中的函数必须用return返回最终的结果，

        computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。

        computed 它不能计算在data中已经定义过的变量。

watch:

        watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；