Vue学习笔记(一)

1,computed和methods和watch的区别:

computed和watch都是他们监听或者依赖的对象的值发生变化才会调用,而methods则是每次页面刷新都会调用,因此从性能角度来看computed和watch比methods更高

computed和methods的语法简练,而watch则需要对每一个监听的对象都写一遍代码,因此,从语法简洁的层次来看,watch比不上computed

因此,综合来看,能用computed来写的方法就尽量用computed来写

2,父组件与子组件相互传值

父组件往子组件传值需要用到v-bind="value"的指令,这里其实就是通过属性去传值,value就是向子组件传递的值,同时这里有一个单向数据流的一个概念,就是父组件可以随意向子组件传值,但是子组件不能直接去修改父组件传过来的值,因为有可能父组件不只是向一个子组件传了这个值,在一个组件修改可能会导致其他组件的值也被修改了,所以如果一定要修改的话,需要将这个值赋给子组件自定义的data属性,然后通过修改data中的对象来修改数据

子组件向父组件传值则需要在子组件中使用this.$emit("event",data)来触发事件,同时在父组件中使用v-on:event="handleEvent",指令来监听子组件触发的事件,在methods中使用handleEvent(data)函数来处理这个事件,data是子组件传递的值,event是触发的时间名,这个可以自己定义

3,关于Vue实例挂载以及全局组件和局部组件

初始化一个实例的时候通常的写法是:

var vm = new Vue({

     el: "#id",data:{},methods:{},computed:{}

})

el这个属性的值id就是这个实例所挂载的组件的id的值,相当于这个id的组件托管给了vm这个Vue实例

全局组件的写法:

Vue.component("name",{

template:"<HTML标签><HTML标签>"

})

局部组件:

var name = {

template:"<HTML标签><HTML标签>"

}

然后需要在Vue实例中:

var vm = new Vue({

     el: "#id",data:{},methods:{},computed:{},

components:{

name:name

}

})

此时这个name组件就只能在vm所挂载的组件内使用了,其他id的组件是不能用name组件的

4,数组的增删

var list = [];

在数组最后去增加一个item的方法是list.push(item),而删除指定位置的item的方法是list.splice(index,1)

5,条件渲染和v-show指令

<div v-if="show"/>和<div v-show="show"/>,当show为false时,两个div都不会在页面显示,区别在于v-if指令的div在dom上也不会渲染,但v-show的div在dom上已经渲染完毕,只是将display属性设为了none,因此不显示,所以如果只是控制一个组件是否展示,那么用v-show的性能比v-if好,因为v-if会引发dom的增删机制

但是v-if可以搭配v-else和v-else-if指令来使用,从而可以控制自己想要展示哪些东西,但这里有一个问题在于Vue有一个复用机制,会去复用已经存在过的标签页,所以如果用v-if和v-else来控制刷新时可能会导致标签页内的内容背复用进来了,解决方法就是在标签页内加上一个key值,从而让Vue认定这个标签是独一无二不可复用的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容