vue

vue动态组件切换(选项卡)

vue的动态组件<template:is='变量'></template>可以通过改变变量,来改变template的替换内容。达到选项卡的功能如果想要切换保持不重新创建,用<keep-alive>标签。但是请注意:那个滚动条的滚动位置记录不下来。input里的内容可以。<div...

vue里在自定义的组件上定义的事件

事件分为原生事件和自定义事件。vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发。 这也是子组件向父传值的原理。如果想作为原生事件,需要在原生事件后面加上.native就可以了。然后就可以触发父级的fatherClick函数了。 ...

vue的单向数据流

父级向子组件传递的值,子组件不能直接修改这个穿过来的值,否则会曝出警告,这就是单项数据流。 如果是引用值,传递的是引用值得地址,而不是值本身,也就是说,子组件里修改这个传过来的值,通常的做法是放到它自己的data里,然后再深度克隆,以防止该组件在重复应用时候造成的数据混乱。...
代码星球·2020-05-23

vue的组件基础

组件分为全局组件和局部组件。组件的核心是template;所有的数据都为template服务。父组件子组件传值:因为子组件是父组件的个标签,完全等同于添加动态属性;然后子组件能够通过props:[ ]获取,(注意,props必须是数组或者对象,而不能是字符串)如果不通过props接受父组件穿过来的值,那么子组...
代码星球·2020-05-23

vue v-for的数组改变导致页面不渲染解决方法

直接在数组里,改变数组来达到重新渲染页面的目的,需要用push等数组方法,或者$set(),或者给数组重新赋值,来改变数组引用地址而是直接索引=<body><divid="app"><liv-for='iteminstudents'><span>{{item.name}}...

vue里的v-show和v-if

v-show:false      对应的是display:none;不移除dom元素。对网页渲染性能更好,适应于频繁的操作该dom的显示隐藏。v-if: false    对应的是彻底移除dom元素,对应的是...
代码星球·2020-05-23

vue中key的作用 v-for里警告 v-if的复用

vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的。<body><divid="app"><divv-if='flag%2'>用户名:<inputtype="text">//用户名:<...

vue的数据绑定和组件化

组件:就是自定义标签,也是Vue的实例对象;组件好处:就像工作分工,函数封装等组件分为全局组件和局部组件;全局组件,在Vue身上的组件,所有的vue挂载的元素内都可以使用;正是因为这一点,component的data必须是一个函数,绑定的变量都会去执行data函数,然后找data里的返回的对象的k,如果没有,就继续找c...
代码星球·2020-05-23

vue里的样式添加之类名改动 和style改动

类名下有不同样式,通过增加或者减少类名,来增加或减少样式。v-bind:class={类名:变量,类名:变量。。。} 变量为布尔值,如果是true则类名添加,反正类名不添加到该元素身上v-bind:class=“ [‘类名1’,‘类名2’,...

vue里的样式添加之行间样式

一:行间样式:和绑定其他dom的属性一样,v-bind:style=     <divv-bind:background-color:#ffff00;">color}>2</div>  //color是data或者comput...
代码星球·2020-05-23

vue 里filter的基本用法

filter是和data computed  methodswatch一样,都是newVue()的参数。用于对简单数据的处理,和computed有冲突,所以从vue2.0后就对filter做了删减,我觉得没有filter完全能够用其他方法比如computed来实现用在{{变量1|变量2}}...
代码星球·2020-05-23

vue里的watch 和 computed 监听的不同

1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果,  所以k不能与data里的k重名,并且必须有return,  能够缓存,依赖的值不变化不会进行重复计算;而watch是监听data里的值的变化,k是data里的k,不能自己单独定义k&nb...

vue里computed的get和set

computed里的对象有get和set方法。get是当该对象所依赖的变量发生变化是执行,重新returncomputed结果。set是该对象的值变化时会执行,并且将变化的结果作为参数传进set里。然后可以根据传进的值来处理<divid="app"><p>price:<inputtype=...
代码星球·2020-05-23

vue里的渲染以及computed的好处

如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面但是大量函数的重新没有必要的执行会导致性能的下降,此时如果把没有必要再次执行的方法定义到computed里,那么这些没有必要执行的方法就不会被渲染页面时候执行。只有在computed函数所依赖的...

从vue渲染想到的数组方法

1<divid="app">2<ul>3<liv-for='itemingoods'>{{item}}</li>4</ul>56<div>{{a}}</div>78<buttonv-on:click='demo'>click...