Vue前端框架09 计算属性、Class绑定、style绑定、侦听器、表单输入绑定、Dom操作模板引用

文章目录

一、计算属性

表达式只能做简单的操作，模板中逻辑太多难以维护，使用计算属性来描述依赖响应式状态的复杂逻辑

javascript 复制代码

<template>
  <h3>{{datas.name}}</h3>
  <p>{{textContent}}</p>
  <p>{{textContent2()}}</p>
</template>

<script>
export default {
  name: "ComputedDemo",
  data(){
    return{
      datas:{
        name:"张三",
        content:["前端","java","python"]
      }
    }
  },
  //计算属性
  computed:{
    textContent(){
      return this.datas.content.length>0 ? 'Yes':'No';
    }
  },
  //computed 和 methods 的区别
  //计算属性会基于其响应式依赖缓存 在计算属性更改的时候才会重新计算 双向绑定
  //方法调用总是会在重渲染发生时再次执行函数
  methods:{
    textContent2(){
      return this.datas.content.length>0 ? 'Yes':'No';
    }
  }
}
</script>

二、Class绑定

操作元素的class 是一个常见的数据绑定

class是属性所以可以用v-bind来实现但是处理比较复杂的时候简单的拼接字符串容易出错

为了解决这个问题，Vue提供了特殊的功能增强，除了字符串以外，表达式的值可以是对象或数组

javascript 复制代码

<template>
  <p :class="{'active':isActive,'text-danger':hasError}">Classs样式绑定1</p>
  <p :class="classObject">Classs样式绑定2</p>
  <p :class="[arrActive,arrHasError]">Classs样式绑定3</p>
<!--  也可以在渲染class时候 套上条件判断 三元表达式 -->
  <p :class="isActive? 'active' :''">Classs样式绑定4</p>
<!--  数组和对象嵌套过程中 只能是数组嵌套对象 不能反过来-->
  <p :class="[isActive? 'active' :'',classObject]">Classs样式绑定5</p>
</template>

<script>
export default {
  name: "ClassDemo",
  data(){
    return{
      isActive:true,
      hasError:true,
      classObject:{
        'active':true,
        'text-danger':true
      },
      arrActive:"active",
      arrHasError:"text-danger"
    }
  }
}
</script>

<style scoped>
.active{
  font-size: 30px;
}
.text-danger{
  color: blue;
}
</style>

三、style绑定

style绑定也是常见的应用，实现内联样式，Vue在这个方面一样也是做了功能增强，除了字符串以外，表达式的值也可以是对象或数组

与绑定Class类似

javascript 复制代码

<template>
  <p :style="styleObject">Style绑定1</p>
  <p :style="{color: textcolor}">Style绑定2</p>
  <p :style="[{color: textcolor},styleObject]">Style绑定3</p>
  <p :style="{color:textcolor,fontSize: fontSize+'px'}">Style绑定4</p>
</template>

<script>
export default {
  name: "StyleDemo",
  data(){
    return{
      styleObject:{
        color:"red",
        fontSize:"30px"
      },
      textcolor:"blue",
      fontSize: 30
    }
  }
}
</script>

<style scoped>

</style>

四、侦听器

javascript 复制代码

<template>
  <h3>侦听器</h3>
  <p>{{theMessage}}</p>
  <button @click="updateHandle">修改数据</button>
</template>

<script>
export default {
  data(){
    return{
      theMessage:"hello"
    };
  },
  methods:{
    updateHandle(){
      this.theMessage="World";
    },
  },
  watch:{
    //newvalue 改变之后的数据
    //oldvalue 改变之前的数据
    //函数名必须与侦听对象保持一致
    theMessage(newValue,oldValue){
      //数据发生变化自动执行的函数
      console.log(newValue,oldValue);
    }
  }
}
</script>

五、表单输入绑定

javascript 复制代码

<template>
  <form action="">
    <input type="text" v-model="message1">
    <input type="text" v-model.lazy="message2">
<!--    v-model 实现表单绑定 修饰符 lazy number trim
    number 只接受输入的赎罪
    trim  前后空格
    lazy 等到输入完再获取
-->
    <input type="checkbox" id="checkbox" v-model="checked"/>
    <label for="checkbox">{{checked}}</label>
  </form>
  <p>{{message1}}</p>
  <p>{{message2}}</p>
</template>

<script>
export default {
  name: "InputDemo",
  data(){
    return{
      message1:"",
      message2:"",
      checked:false
    }
  }
}
</script>

<style scoped>

</style>

六、Dom操作（模板引用）

javascript 复制代码

<template>
  <h3>模板引用（DOM操作）</h3>
  <div ref="container" class="container">344534</div>
  <button @click="getElementHandle">获取元素</button>
</template>

<script>
/**
 * 内容改变 {{模板语法}}
 * 属性改变 v-bind命令
 * 事件改变 v-on:click
 *
 * 如果没有特别需求 不要操作DOM
 */
export default {
  name: "DomDemo",
  data(){
    return{
      content:"内容"
    }
  },
  methods:{
    getElementHandle(){
      //利用原生JS的属性 对DOM进行操作
      this.$refs.container.innerText="123"
      window.console.log(this.$refs.container)
    }
  }
}
</script>

<style scoped>

</style>