vue-基础API

vue基础-动态class

语法:

• 格式1：<标签 :class="变量" />
• 格式2：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />

• • 如果布尔值为true，就添加对应的类名

说明：可以和静态class共存

<template>
  <div id="app">
    <h3>15-动态绑定class.vue</h3>
    <p :class="type"> p的内容 class="变量"</p>
    <p :class="['red', 'f40']"> p的内容 class="数组"</p>
    <p class="abc" :class="{red:true, blue:true, f40:true}"> p的内容 class="数组"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
     type: 'blue'
    }
  }
}
</script>

<style>
.abc {background-color: #ccc;}
.f40 {font-size: 40px;}
.blue {color:blue}
.red {color:red}

</style>

vue基础-动态style

语法

<标签 :style="{css属性名: 值}" />

1. 可以和静态style共存
2. 样式中带-属性写成小驼峰

<template>
  <div id="app">
    <h3>16-动态绑定style.vue</h3>
    <p style="border: 1px solid red" :style="obj"> p的内容 :style="对象"</p>
    <button @click="fn">设置随机设置字体大小</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
     obj:{
       backgroundColor: '#ccc',
       color: "red",
       fontSize: '40px'
     }
    }
  },
  methods: {
    fn(){
      const fs = Math.random() * 100
      this.obj.fontSize = fs + 'px'
    }
  }
}
</script>

<style>
.abc {background-color: #ccc;}
.f40 {font-size: 40px;}
.blue {color:blue}
.red {color:red}

</style>

计算属性

使用场景

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。

例如：要对给定的字符串做翻转处理之后再来显示

<template>
  <div>
    <h2 @click="fn">18.计算属性.vue</h2>
    <p>{{arr}}</p>
    <p>求和:{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4]
    }
  },
  computed: {
    sum(){
      // 求arr的和，并返回
      return this.arr.reduce((sum,item)=>sum+item, 0)
    },
  }
}
</script>

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

• 属性名称： 计算属性的名称
• 属性的值：计算属性的素材函数

• • 对需要依赖的数据，进行逻辑上的处理
  • 处理完毕后，需要return出去，返回的值就是计算属性的值

computed有缓存

• methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
• computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。

• • 计算属性会做缓存，提高渲染的性能。

过滤器

作用

过滤器的作用：转换格式, 把数据在显示之前做格式转换

{
    data(){},
    computed:{},
    methods:{},
    // 定义过滤器
    filters: {
      // 属性名称（过滤器名称）：属性的值（过滤器处理函数）
      myFilter:function(value,其它参数){
           return 过滤后的结果
      }
    }
}

使用的格式

// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器(参数)}}

vue监听器-基本使用

 watch: {
     "被监听的属性名" (newVal, oldVal){
         
     }
 }

监听属性-深度监听和立即执行

watch: {
    "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}