Vue的学习与使用（二）

1.侦听器（watch）

watch:{//监听数据的变化, //每当message发生变化时，就会调用这个函数 message:function(newVaule,oldVaule){//一个数据影响多个数据 console.log(newVaule); console.log(oldVaule); //执行异步（访问一个api）操作，或复杂逻辑代码 }

} };

<!-- v-model:数据的双向绑定 --> <input type="text" v-model="message">

 

监听不到对象的属性变化，需要使用到深度监听

 

 

 

深度监听:(deep:布尔值)

watch:{

message:{ immediate:true,//初始化的时候调用函数 handler:function(newVaule){ console.log(newVaule); if(newVaule.length<5||newVaule.length>10){ console.log("输入框中的内容不能小于5或大于10"); } } }

}

 

解决监听不到对象的属性变化：

user:{ handler:function(newVaule){ console.log(newVaule); }, deep:true,//表示是否深度监听，侦听器会一层层的向下遍历，给对象每个属性加上侦听器

}

 

优化只监听use.name:

 

"user.name":{//使用字符串的形式进行优化，只会单独监听对象中对应的属性 handler:function(newVaule){ console.log(newVaule); }, deep:true,//表示是否深度监听，侦听器会一层层的向下遍历，给对象每个属性加上侦听器

}

 

2.class类名的对象使用方式

对象语法：

我们可以传入：class(:v-bind:class的简写)一个对象，以动态的切换class.

<script>
​
export default{
  data(){
    return{
      message:"HelloWorld",
      isActive:true,
      error:{},
      classObj:{
        active:true,
        helloworld:true
      },
    };
  },
  computed:{
      chassObjCom:function(){
        return{
          active:this.isActive && !this.error,//true的结果
          helloworld:this.error//false的结果
        }
      }
    }
 };
​
</script>
<template>
  <div>
    <!-- 第一种放置字符串 -->
    <p class="active">Hello</p>
    <!-- 第二种：放置对象 -->
    <!-- 用法：<p :class="{类名：boolean}">hello</p> -->
    <p :class="{active:isActive}">Hello</p> 
    <p :class="{active:isActive,helloworld:isActive}">Hello</p> 
    <button @click="isActive=!isActive">改变active</button>
    <!-- 和普通的类同时存在，不会起冲突 -->
    <p :class="{active:isActive}" class="helloworld" >Hello</p> 
    <p :class="classObj">Hello</p> 
    <!-- 使用computed -->
    <p :class="chassObjCom">hellocomputed</p>
​
</div> 
</template>
​
<style>
.active{
  font-size: 50px;
  color: green;
}
.helloworld{
  background-color: pink;
}
</style>
​

数组语法：

 

我们可以把一个数组传给：class，以应用一个class列表

​
    <!-- 数组语法(不常用) -->
    <p :class="[message,activeClass]">hello2</p>
    <!-- 数组和对象结合 -->
    <p :class="[message,{active:isActive}]">hello3</p>
​
​

3.style样式的多种操作方式

<script>
​
export default{
  data(){
    return{
     activeColor:'red',
     fontSize:'50px',
     bgcColor:'pink',
     styleObj:{
      color:'red',
      fontSize:'50px',
      "background-color":'pink'
     },
    };
  },
  
 }
​
</script>
<template>
  <div>
    <!-- 第一种：放置字符串 -->
    <p style="color: red;">hello>   </p>
     <!-- 第二种：放置对象 驼峰命名法  -->
     <!-- 总结：<p :style="{key(css属性名):value(属性值，来自于data中的属性)}"></p>
 -->
     <p :style="{
      color:activeColor,
      fontSize:fontSize,
      'background-color':bgcColor
      }">
      hello1
    </p>
     <p :style="styleObj">hello1</p>
     <!-- 数组语法:可以将多个样式应用到同一个元素上 -->
    <p :style="[styleObj,{border:'5px solid blue'}]">hello2</p>
</div> 
</template>
​
<style>
</style>
​

条件渲染：

 

 

列表渲染：

用v-for把一个数组映射为一组元素

export default{
  data(){
    return{
     person:['张三','李四',"王五"] 
     };
    }, 
  };
  
 
​
</script>
<template>
  <div>
    <ul>
      <!-- v-if使用数组，item代表数组中的每一个元素，index表示数组元素的下标 -->
      <li v-for="item in person" :key="item">{{item}}</li>
    </ul>
    <ul>
      <!-- 加个下标 -->
      <li v-for="(item,index) in person" :key="index">{{ item }}-->{{ index }}</li>
    </ul>
   

使用v-for遍历一个对象的属性

<ul> 
      <!-- v-for使用对象  item表示键值，key表示键名 index表示索引-->
      <li v-for="(item,key,index) in personObj" :key="index">{{ item }}--{{ key }}-->{{ index }}</li>
    </ul>

 

注意：为什么要给v-for加上key值？

为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

key唯一的标识 快速找到节点，减少渲染次数 ，提高渲染性能

 

 

数组更新检测：

<script>
​
export default{
  data(){
    return{
     list:[1,3,6,4,5],
     }
    } ,
    methods:{
       changelist:function(){
         //通过索引值去修改数,vue3可用
        //this.list[5]=7
      
       // push();给数组末尾添加元素
       //this.list.push(7,8,9)
       //pop();给数组的末尾删除元素
       //this.list.pop();
       //shift();数组的第一位进行删除
       //this.list.shift();
       //unshift();给数组的首位开始添加元素
       //this.list.unshift(5);
      // splice();删除元素、插入元素、替换元素
      
      //第一个参数：表示开始插入或者开始删除的元素的位置下标
      //删除元素
      //第二个参数：从当前位置之后删除几个元素，没有第二个参数将后面的元素全部删除
       //this.list.splice(1,3,)
      //插入元素
     //第二个参数：传入0,并且后面接上我们要插入的元素
     //this.list.splice(1,0,7,8,9)
     //替换元素
     //第二个参数：表示我们要替换几个元素，并且后面接上我们要替换的元素
         //this.list.splice(1,3,7,8,9)
      //sort();排序
     // this.list.sort();
     //reverse();翻转
     this.list.reverse();
       }
    },
  };
  
 
​
</script>
<template>
  <div>
   <ul>
    <li v-for="item in list" :key="item">{{ item }}</li>
   </ul>
   <button @click="changelist">改变数组</button>
    
</div> 
</template>
​
<style>
​
​
</style>
​