Vue3知识总结-2

z35519069472024-05-12 13:04

目录

通过key来管理状态

事件处理

内联事件处理器

方法事件处理器

事件传参

获取event

传递参数

传参的过程中获取事件对象

事件修饰符

阻止事件描述符

阻止事件冒泡

数组变化侦测

变更方式

替换一个数组

计算属性

Class绑定

绑定对象

绑定数组

Style绑定

侦听器

表单输入绑定

修饰符

这里是第二次发的关于学习Vue的一些知识点，都是一些比较实用点。

通过key来管理状态

当使用v-for渲染之后，如果数据项顺序改变，Vue不会随着dom元素顺序移动，而是就地更新元素，确保在原本指定的位置上渲染。为了方便跟踪，所以要为每个元素对应的块提供一个唯一的key。

key通过v-bind绑定属性，推荐在什么时候都能使用，是一个基础类型的值。

因为顺序会发生变化，所以不推荐用index，应该使用唯一索引。

复制代码
javascript 复制代码 
<template>
  <h3>列表渲染</h3>

  <p v-for="(value, key, index) of user">{{index}}-{{key}}-{{value}}</p>
  <div v-for="item of result" :key="item.id">
    <p>{{item.title}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        user:{
          name: ["2132",123214],
          age: 13,
        },
        result: [
          {
            "id": 1,
            "title": "133",
          },
          {
            "id":2,
            "title":"123",
          }
        ]
      }

    }
  }
</script>

事件处理

使用v-on来监听事件，事件处理分为

  1. 内联：事件被触发的时候执行内联语句

  2. 方法：一个指向组件上定义的方法的属性名或是路径

内联事件处理器

复制代码
javascript 复制代码 
<template>
 <h3>内联事件处理器</h3>
  <button @click="count++"> Add</button>
  <p>{{count}}</p>
</template>

<script>

export default{
  data(){
    return{
      count: 0
    }
  }
}

</script>

<style scoped>

</style>

方法事件处理器

复制代码
javascript 复制代码 
<template>
 <h3>方法事件处理器</h3>
  <button @click="addCount"> Add</button>
  <p>{{count}}</p>
</template>

<script>

export default{
  data(){
    return{
      count: 0
    }
  },
  methods:{
    addCount(){
      //在这里进行操作
      this.count++
      console.log("点击了")
    }
  }

}

</script>

<style scoped>

</style>

事件传参

事件参数可以获取event对象和通过事件传递数据

获取event

复制代码
javascript 复制代码 
<template>
  <h3>方法事件处理器</h3>
  <button @click="addCount"> Add</button>
  <p>{{count}}</p>
</template>

<script>

export default{
  data(){
    return{
      count: 0
    }
  },
  methods:{
    addCount(e){
      e.target.innerHTML = "aadd" + this.count
      this.count++

    }
  }

}

</script>

<style scoped>

</style>

传递参数

复制代码
javascript 复制代码 
<template>
  <h3>事件传参</h3>
  <p @click= "getNameHandler(item)" v-for="(item, index) of names" :key="index">{{item}}</p>
</template>

<script>

export default {
  data() {
    return {
      names: ["bob", "jack", "marry"]
    }
  },
  methods: {
    getNameHandler(name){
      console.log(name)
    }
  }

}

</script>

<style scoped>

</style>

传参的过程中获取事件对象

复制代码
javascript 复制代码 
<template>
  <h3>事件传参</h3>
  <p @click= "getNameHandler(item, $event)" v-for="(item, index) of names" :key="index">{{item}}</p>
</template>

<script>

export default {
  data() {
    return {
      names: ["bob", "jack", "marry"]
    }
  },
  methods: {
    getNameHandler(name, e){
      console.log(name)
      console.log(e)
    }
  }

}

</script>

<style scoped>

</style>

事件修饰符

在处理事件的时候，调用方法很常见，为了能够更好的去处理事件的逻辑有了事件修饰符很多的可以在官网上查看

阻止事件描述符

复制代码
javascript 复制代码 
<template>
 <h3>事件描述符</h3>
<!--  //这里可以之间使用-->
  <a @click.prevent="clickHandle" href="https://www.bilibili.com/video/BV1Rs4y127j8?p=13&spm_id_from=pageDriver&vd_source=2a222b50c15b9af66c7ffac6c7740bde">bilibili</a>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    clickHandle(e) {
      // e.preventDefault()这里也就不需要了，阻止了事件的发生
      console.log("点击了")
    }
  }
}
</script>


<style scoped>

</style>

阻止事件冒泡

复制代码
javascript 复制代码 
<template>
 <h3>事件描述符</h3>
  <div @click="clickDiv">
    <p @click.stop="clickP">测试冒泡</p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    clickDiv(){
      console.log("div")
    },
    clickP(e){
  //在这里也可以写，
  //     e.stopPropagation()
      console.log("p")
    }
  }
}
</script>


<style scoped>

</style>

数组变化侦测

变更方式

Vue能够侦听响应式数组的变更方法，并在他们被调用时触发相关的更新

替换一个数组

不会改变原数组，而是创建一个新数组

下面是上面的两种的代码展示

复制代码
javascript 复制代码 
<template>
 <h3>数组变化侦听</h3>
  <button @click="addListHandle">添加数据</button>
  <ul>
    <li v-for="(item, index) of names" :key="index">{{ item}}</li>
  </ul>
  <button @click="concatHandler">合并数组</button>
  <h3>数组1</h3>
  <p v-for="(item, index) of arry1" :key="index">{{item}}</p>
  <h3>数组2</h3>
  <p v-for="(item, index) of arry2" :key="index">{{item}}</p>
</template>
<script>
  export default {
    data(){
      return{
        names: ["arry", "pop", "tom"],
        arry1: [1,2,3,4,5],
        arry2: [7,8,9,10,11,12],
      }
    },
    methods:{
      addListHandle(){
        //this.names.push("waiai")//ui自动引起更新
        this.names.concat(["123"])//ui不会变，
        console.log(this.names.concat(["123"]))
        // 可以变化为
        this.names =  this.names.concat(["123"])//体现了不是原数组了
      },
      concatHandler(){
        this.arry1 = this.arry1.concat(this.arry2)
      }
    }

  }

</script>



<style scoped>

</style>

计算属性

让模版中不要写太多的表达式

计算属性只运行一次，而返回每次都会运行。

复制代码
javascript 复制代码 
<template>
 <h3>西游{{xiyou.tast}}</h3>
  <p>{{xiyouContent}}</p>
  <p>{{xiyouContents()}}</p>/
</template>

<script>
 export default{
   data(){
     return{
       xiyou:{
         tast:"qujing",
         names:["arru", "123", "321"]
       }
     }
   },
   //计算属性
   computed:{
     xiyouContent(){
       return this.xiyou.names.length > 0 ? 'yes':"no"
     }
   },
   //放函数或者方法
   methods:{
     xiyouContents(){
       return this.xiyou.names.length > 0 ? 'yes':"no"
     }
   }
 }
</script>


<style scoped>

</style>

Class绑定

操纵元素的CSS class列表，因为class是attribute，那就可以使用v-bind将他们和动态的字符串绑定。在处理比较复杂的是时候，通过拼接生成字符串比较麻烦，因此有了特殊增强功能，除了字符串外，表达式的值可以是对象或者数组。

绑定对象

绑定数组

数组和对象一起使用

提示：数组和对象嵌套过程中，只能是数组嵌套对象。

下面是所有代码的实现：

复制代码
javascript 复制代码 
<template>
 <p :class="{'active':isActive, 'text-danger':hasError}">Class样式绑定</p>
  <p :class="classObject">Class样式绑定2</p>
  <p :class="[arrActive, arrHasError]">Class样式绑定3</p>
  <p :class="[isActive? 'active':'']">Class样式绑定4</p>
  <p :class="[isActive? 'active':'',{'text-danger':hasError}]">Class样式绑定5</p>
</template>

<script>
export default {
  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:red;
  }

</style>

Style绑定

这个和class绑定是一样的

复制代码
javascript 复制代码 
<template>
  <p :style="{color:activeColor,fontSize:fontSize +'px'}">Style绑定1</p>
  <p :style="styleObject">Style绑定2</p>
</template>

<script>
export default {
  data(){
    return{
      activeColor:"green",
      fontSize:50,
      styleObject:{
        color:"red",
        fontSize:"50px"
      }

    }
  }
}

</script>


<style scoped>

</style>

侦听器

侦听数据的变化，使用watch选项在每次响应式属性发生变化时触发一个函数

javascript 复制代码 
<template>
 <h3>侦听器</h3>
  <p>{{message}}</p>
  <button @click="MidMessage">修改数据</button>
</template>

<script>
  export default {
    data(){
      return{
        message:"hello",
      }
    },
    methods:{
      MidMessage(){
        this.message = "123"
      }
    },
    watch:{
      //注意这个名字要和侦听的数据对象是一样的
      message(newValue,oldValue){
        console.log(newValue, oldValue)
      }
    }

  }

</script>

<style scoped>

</style>

表单输入绑定

使用v-model指令简化手动连接值绑定和更改时间监听器

修饰符

提供了修饰符：.lazy,.number,.trim

javascript 复制代码 
<template>
<h3> 表单输入绑定</h3>
  <form>
    <input type="text" v-model = "message">
    <input type="text" v-model.lazy="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>


<style scoped>

</style>
相关推荐
神仙别闹12 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry35 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程（一）：从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流，时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07（后台与若依前端对接）
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解