vue 学习笔记

1.computed:计算属性可以缓存
2.vue 中的绑定style可以是对象也可以是数组,是对象的情况类名是属性,当属性的值是true时候类名显示否则不显示,数组的情况类名是个变量名,当变量等于类名时候改类名的样式显示否则不显示,
同时可以动态的绑定样式,让变量名为空重新给它赋值
3.vue 中会复用dom元素,当给dom元素设置一个key值,dom就不会被复用
4.页面渲染数组的时候key值最好不用数组的index,这样比较耗性能,通常后台会给每个数据一个id,key值可以是项目的id这样每个数据都有唯一的id,不会重复的渲染
5.template模板占位符可以包裹我们的元素,但是不会渲染到页面中
6.ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

父组件传哥子组件的数据只能接收,不能修改,否则会在控制台报出哥警告,要想修改父组件的传递的数据,同时对于数据要用:绑定要传递的数据否则是字符串;子组件自己设置变量让其等于父组件传递的数据;子组件向父组件传递数据通过事件$emit("事件",值)传递值
父组件监听子组件传递的事件,获取参数。
7.在子组件中定义click原生事件方法不能执行,需要子组件发射事件,父组件监听,如果父组件在子组件中定义click事件,在click事件中加native,意思是原生的即click.native
8.bus/总线/发布订阅/观察者模式
vue-cli中在src/assets/下创建一个eventBus.js,内容如下:
import Vue from'vue' export default new Vue
这样同级组件建立了中央同级事件总线,两个同级组件分别引入eventBus.js模块,这样同级之间就可以通信了,传值组件在方法中发布事件bus.$emite('事件名',传递的消息);订阅组件接收发布消息组件的消息
采用bus.$on('事件名',function(msg){console.log(msg)})这样就完成了同级组件的通信。
9.插槽slot,slot有匿名插槽和具名插槽,匿名插槽是父组件中的内容在子组件中设立slot组件,可以显示父组件中在子组件中插入的内容,具名插槽是在父组件中元素添加slot属性,在定义名字,在子组件中slot组件
name属性名字和父组件中的slot名字相同,这样子组件就能匹配到父组件中的内容。

猜你喜欢

转载自www.cnblogs.com/zhx119/p/9120138.html