Python Web前端开发篇（4）---vue计算属性&Class绑定&Style绑定&侦听器&表单输入绑定&模板引用（获取DOM）

1 计算属性

<template>
  <h3>计算属性</h3>
  <p>{{ countNames1 }}</p>
  <p>{{ countNames2() }}</p>
</template>

<script>
export default {
  data(){
    return{
      names1: ["zhang", "wang", "li"],
      names2: ["yuan", "ming", "qing"]
    }
  },
  computed:{
    countNames1(){
      return this.names1.length > 0 ? "yes" : "no"
    }
  },
  methods:{
    countNames2(){
      return this.names2.length > 0 ? "yes" : "no"
    }
  }
}
</script>

在上面代码中，使用computed和methods都能实现想要的功能，但是两者仍有一些区别：

计算属性---会基于其响应式依赖被缓存，仅在其响应式依赖更新时才会重新计算。

方法---调用总是会在重新渲染发生时再次被执行函数。

直观的理解就是，计算属性在多次调用时只计算一次，方法在每次调用时都要计算一次。

2 Class绑定

对象语法

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    };
  }
};
</script>

数组语法

<template>
  <div :class="[activeClass, errorClass]"></div>
</template>

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    };
  }
};
</script>

对象数组混合使用

<template>
  <div :class="[{ active: isActive }, errorClass]"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      errorClass: 'text-danger'
    };
  }
};
</script>

3 Style绑定

<template>
  <h3>Style绑定</h3>
  <p v-bind:style="{color:activeColor, fontSize:fontsize + 'px'}">哈哈哈1</p>
  <p v-bind:style="style1">哈哈哈2</p>
</template>

<script>
export default {
  data(){
    return{
      activeColor:"red",
      fontsize:30,
      style1:{
        color:"green",
        fontSize:"30px"
      }
    }
  }
}
</script>

4 侦听器

当响应式数据发生变化时，如果想监听发生了怎样的变化，或者执行某个操作，就可以通过watch来实现，注意函数名必须和要监听的数据名相同：

<template>
  <h3>侦听器</h3>
  <p>{{ message }}</p>
  <button @click="updateMessage">改变message</button>
</template>

<script>
export default {
  data(){
    return{
      message: "i want fuck you"
    }
  },
  methods:{
    updateMessage(){
      this.message = "oh ye"
    }
  },
  watch:{
    // 侦听器，当数据发生变法是执行
    // 函数名必须和变量名一致，
    message(newValue, oldValue){
      console.log("Message发生了变化")
      console.log(newValue, oldValue)
    }
  }
}
</script>

5 表单输入绑定

<template>
  <h3>表单输入绑定</h3>
  <form>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
  </form>
</template>

<script>
export default {
  data(){
    return{
      message: "",
      checked: false
      }
    }
  }
</script>

上面代码中，<input type="text" v-model="message">实现了实时获取用户输入，但是有些场景并不需要这样的需求，所以就需要v-model的一些修饰符：<input type="text" v-model.lazy="message">，加上修饰符.lazy后，只有当失去光标的时候，才会获取用户输入的内容。其他修饰符，如.number：只接受数字，.trim：去掉前后空格。

6 模板引用（获取DOM）

<template>
  <h3>模板应用DOM</h3>
  <input type="text" ref="username">
  <button @click="getDomHandle">通过获取DOM获取用户输入</button>
</template>

<script>
export default {
  data(){
    return{
      content: "qwer"
    }
  },
  methods:{
    getDomHandle(){
      console.log(this.$refs.username.value)
    }
  }
}
</script>

一般情况下，不通过这种方式去获取元素，比较消耗性能。