Vue3知识总结-2

news/2024/10/18 12:25:33/

目录

通过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.countthis.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>
 












http://www.ppmy.cn/news/1461921.html












相关文章










智能合约是什么？搭建与解析









智能合约是什么？搭建与解析




智能合约是一种基于区块链技术的自动化执行合约&#xff0c;它通过编程语言编写&#xff0c;并在区块链网络上部署运行。智能合约是区块链技术的重要组成部分&#xff0c;它使得去中心化应用&#xff08;DApp&#xff09;的开发变得更加便捷和高效。本文将从智能合约的搭建、原…




阅读更多...

















车牌检测识别功能实现(pyqt)









车牌检测识别功能实现(pyqt)




在本专题前面相关博客中已经讲述了 pyqt + yolo + lprnet 实现的车牌检测识别功能。带qt界面的。 
本博文将结合前面训练好的模型来实现车牌的检测与识别。并用pyqt实现界面。最终通过检测车牌检测识别功能。 
1）、通过pyqt5设计界面 ui文件如下： 
<?xml version="1…




阅读更多...

















STM32F407 2个高级定时器生成2路无刷电机波形以及相电流采集程序（寄存器版）









STM32F407 2个高级定时器生成2路无刷电机波形以及相电流采集程序（寄存器版）




stm32f407 高级定时1、定时8 生成20k 中心PWM 波形 并分别用其通道4 触发ADC1 ADC2 采样 用于分别两无刷电机foc 电流环控制&#xff0c;ADC1产生50us的电流采集完成中断&#xff0c;用于foc算法周期运算 
主要参考高级定时器的寄存器和ADC寄存器 首先&#xff0c;要使用STM32F…




阅读更多...

















四川景源畅信：如何更好的为抖音小店做引流？









四川景源畅信：如何更好的为抖音小店做引流？




在数字化营销的浪潮中&#xff0c;抖音小店作为新兴的电商形态&#xff0c;正以其独特的社交属性和流量优势吸引着众多商家的目光。如何为抖音小店引流&#xff0c;成为许多店主心中的疑问。本文将深入探讨有效提升店铺流量的策略&#xff0c;助你在抖音平台上快速崛起。 一、内…




阅读更多...

















论文：论面向服务的架构设计









论文：论面向服务的架构设计




题目 
在面向服务的架构&#xff08;Service-Oriented Architecture&#xff0c;SOA&#xff09;中&#xff0c;服务的概念有了延伸&#xff0c;泛指系 统对外提供的功能集。例如&#xff0c;在一个大型企业内部&#xff0c;可能存在进销存、人事档案和财务等多个系统&#xff…




阅读更多...

















Redis教程汇总篇，让你从入门到精通









Redis教程汇总篇，让你从入门到精通




Redis教程目录 
Redis教程(一)&#xff1a;Redis在Windows环境下的安装 
Redis教程(二)&#xff1a;Redis在Linux环境下的安装 
Redis教程(三)&#xff1a;Redis的五种基本数据类型 
Redis教程(四)&#xff1a;Redis中String类型的常用命令 
Redis教程(五)&#xff1a;Redis中数…




阅读更多...

















Linux网络编程——HTTP协议的理解与运用









Linux网络编程——HTTP协议的理解与运用




目录 前言 
一、认识URL 
二、认识HTTP样例 
三、HTTP的报头内容 
1.url 
2. Content-Type 
3.Method 方法 
1.GET方法  
2.POST方法  
4、状态码 
5.cookie和session 前言 
我们知道&#xff0c;协议就是一种约定&#xff0c;客户端与服务端统一的用这种约定进行传输数据。我们…




阅读更多...

















如何修改antd的pagination翻页组件为中文？









如何修改antd的pagination翻页组件为中文？




很简单 加一个属性 locale{{ items_per_page: 页 }}<PaginationpageSize{pagination.pageSize}locale{{ items_per_page: 页 }}current{pagination.current}showTotal{(total, range) > 共有 ${pagination.total} 条数据}style{{ textAlign: right }}onChange{(page: num…




阅读更多...















 
 
 
 










最新文章







 





















Copyright @ 2022~2023