2021年11月14日

vue学习---v-text指令(向其所在的节点中渲染文本内容)

摘要：学过的指令： v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-s 阅读全文

posted @ 2021-11-14 19:56 leiyanting 阅读(514) 评论(0) 推荐(0)

vue学习---过滤器Vue.filter / {{ xxx | 过滤器名}}

摘要：过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法： 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器阅读全文

posted @ 2021-11-14 19:52 leiyanting 阅读(96) 评论(0) 推荐(0)

vue学习---收集表单数据/v-model的三个修饰符

摘要：收集表单数据：若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。若：<input type="checkbox"/> 阅读全文

posted @ 2021-11-14 17:21 leiyanting 阅读(114) 评论(0) 推荐(0)

vue学习---数据监视总结

摘要： Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vue.set(ta 阅读全文

posted @ 2021-11-14 16:35 leiyanting 阅读(90) 评论(0) 推荐(0)

vue学习---Vue.set添加数据

摘要：当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变在vue文档中写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。 <div id="app"> <p v-for="i 阅读全文

posted @ 2021-11-14 15:08 leiyanting 阅读(606) 评论(0) 推荐(0)

vue学习---列表排序

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表排序</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> 阅读全文

posted @ 2021-11-14 11:36 leiyanting 阅读(222) 评论(0) 推荐(0)

vue学习---列表过滤

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表过滤</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> 阅读全文

posted @ 2021-11-14 11:04 leiyanting 阅读(98) 评论(0) 推荐(0)

vue学习---key的作用以及原理

摘要：面试题：react、vue中的key有什么作用？（key的内部原理） 1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1). 阅读全文

posted @ 2021-11-14 10:44 leiyanting 阅读(293) 评论(0) 推荐(0)

vue学习---列表渲染(v-for)

摘要： v-for指令: 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" 阅读全文

posted @ 2021-11-14 10:13 leiyanting 阅读(160) 评论(0) 推荐(0)

vue学习---条件渲染

摘要：条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 2 阅读全文

posted @ 2021-11-14 09:46 leiyanting 阅读(119) 评论(0) 推荐(0)

vue学习---绑定样式

摘要： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>绑定样式</title> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .ha 阅读全文

posted @ 2021-11-14 08:20 leiyanting 阅读(53) 评论(0) 推荐(0)

导航

2021年11月14日