王王仙贝的Vue学习
王王仙贝~
我很懒,还没有添加简介
展开
-
VUE——自定义指令
v-xxx一、定义语法1.局部指令new Vue({ directives: { //方法一: big(element, binding) { element.innerText = binding.value * 10; console.log(binding.value); }, //方法二: fbind:原创 2022-04-09 20:24:51 · 1500 阅读 · 0 评论 -
VUE——指令
v-bind:单向绑定解析表达式,可简写为“:XXX”v-model:双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听,可简写为@v-if:条件渲染(动态控制节点是否存在)v-else:条件渲染(动态控制节点是否存在)v-show:条件渲染(动态控制节点是否展示)v-text:向其所在节点中渲染文本内容,与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会,不能识别html结构。v-html:向指定节点中渲染包含html结构的内容,v-html会替代掉节原创 2022-04-08 14:18:50 · 658 阅读 · 0 评论 -
VUE——过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)语法:1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{ }}2.使用过滤器:{{xxx | 过滤器名}}或v-bind:属性="xxx | 过滤器名"备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原来的数据,是产生新的对应的数据。...原创 2022-04-06 21:12:41 · 405 阅读 · 0 评论 -
VUE——收集表单数据
若:<input type="text">,则v-model收集的是value值。若:<input type="radio">,则v-model收集的是value值,且要给标签配置value值。若:<input type="checkbox">1.没有配置input的value属性,那么收集的就是checkbox(勾选or未勾选,是布尔值)2.配置input的value属性:(1)v-model的初始值是非数组,那么收集的就是checkbox(勾选or未勾选,是原创 2022-04-06 17:00:44 · 883 阅读 · 0 评论 -
Vue——Vue set()方法
向响应式属性中添加一个实例,并确保其为响应式的。例如:学生属性原先没有性别,现要添加一个性别属性,并且是响应式的。以下两句都可以,任选一个即可Vue.set(this.student, 'sex', '男')//this指的是vm._data,也就是vm.datathis.$set(this.student, 'sex', '男'),注意:不能直接给data添加响应式属性,也不可以给Vue实例。即下图红色框里的不可以给他们添加//以下两句都是错误的Vue.set(this, 'sex',原创 2022-04-04 12:23:22 · 1190 阅读 · 0 评论 -
Vue——列表排序
实现按字筛选名单,并按照年龄对其进行升序排列、降序排列或原顺序排列<body> <div id="root"> <h2>人员列表</h2> <input v-model="keyWord" type="text" placeholder="请输入名字"> <button @click="sortType=2">年龄升序</button> <b原创 2022-03-26 19:22:42 · 3109 阅读 · 0 评论 -
Vue——列表过滤
实现名字过滤,输入一个字,就能出现带有这个字的相关的名字<body> <div id="root"> <h2>人员列表</h2> <input v-model="keyWord" type="text" placeholder="请输入名字"> <!-- 遍历列表 --> <ul> <li v-for="p in fi原创 2022-03-26 19:04:05 · 1042 阅读 · 0 评论 -
Vue——key的原理
react、vue中的key有什么作用?1、虚拟DOM中key的作用:key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异对比,比较规则如下:2、对比规则:(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:a.若虚拟DOM中内容没变,直接使用之前真实的DOMb.若虚拟DOM中内容变了,则生成新的真是DOM,随后替换掉页面中之前真实的DOM(2)旧虚拟DOM中未找到与新虚拟DOM相同的key创新新的真实原创 2022-03-26 18:33:26 · 580 阅读 · 0 评论 -
Vue——列表渲染
利用v-for进行列表渲染,其中p对persons数组进行遍历。:key="p.id"给每一个li定义一个特殊的标识符。1、遍历数组:<body><div id="root">//way1 <ul> <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li> </ul>//way2 <原创 2022-03-26 18:32:50 · 613 阅读 · 0 评论 -
Vue——条件渲染
使用v-show做条件渲染,代码里显示的是display=none,适用于切换频率高的 <div v-show="n===1">1</div> <div v-show="n===1">2</div> <div v-show="n===3">3</div>结果:当n等于1时,显示1 2。按顺序向下执行,每一条都会去看看是否符合条件使用v-if做条件渲染,代码里直接删除掉了整个结构,适用于切换频率低的 <div v-i原创 2022-03-26 17:07:13 · 470 阅读 · 0 评论 -
VUE——绑定样式
正常的样式正常写变化的样式绑定写绑定class样式——字符串写法,适用于:样式的类名不确定,需要动态绑定。<div class="basic" :class="classstr" @click="changeMood">{{name}}</div>绑定class样式——数组写法,适用于:要绑定的样式个数不确定、名字也不确定。<div class="basic" :class="classarr" @click="changeMood">{{name}}<原创 2022-03-25 23:01:08 · 84 阅读 · 0 评论 -
Vue—计算属性
计算属性computed:{}1、定义:要用的属性不存在,要通过已有属性计算得来2、原理:底层借用了Object.defineproperty方法提供的getter和setter3、get函数什么时候执行:1)初次读取时会执行一次2)当依赖的数据发生改变时会被再次调用4、优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便5、备注:1)计算属性最终会出此案在vm身上,直接读取即可2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发原创 2022-02-16 14:53:26 · 417 阅读 · 0 评论 -
Vue—事件处理
Vue中的事件修饰符:1、prevent:阻止默认事件<!-- prevent:阻止默认事件 --> <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>2、stop:阻止事件冒泡<!-- stop:阻止事件冒泡 --> <div class="demo1" @click="showInfo"> &原创 2022-02-15 12:02:45 · 461 阅读 · 0 评论