vue学习笔记

一,两种情况下vue更改数据不会响应

1.v-for渲染数据时,为数组中某一项直接赋值,数据不会响应。

vue学习笔记_第1张图片
list数组中改变第二项数据无响应

              解决办法:调用Vue.set方法:(需在当前组件中引用vue)

vue学习笔记_第2张图片
可实现数据响应

2,改变数组的长度,数据不会响应。

二,组件中props,$emit用法实例:

      1.props

vue学习笔记_第3张图片
子组件

子组件中需要用到父组件中的参数,就需要用props属性来申明一些变量,去获取父组件中要传的值。

父组件引用子组件

2.$emit

vue学习笔记_第4张图片
$emit官方解释

实例用法:

vue学习笔记_第5张图片
子组件


vue学习笔记_第6张图片
父组件自定义事件


vue学习笔记_第7张图片
a为子组件传到父组件的参数

三,slot插槽用法

  父组件需要在子组件的标签内添加其他标签,子组件可在标签内加入,那么父组件中添加的内容就会放在slot标签内。如图:

vue学习笔记_第8张图片
子组件


父组件


vue学习笔记_第9张图片
效果图

注:若子组件有多个插槽则可为每个插槽取个名字去匹配父组件中增加的标签。若匹配不到,则父组件中没匹配到的标签不显示。

四,v-bind绑定的值会随值的变化发生动态的响应

五,组件在调用的时候要将驼峰改为横线的写法,如comA改为,标签中的属性自定义事件最好也是小写加中线的模式


vue学习笔记_第10张图片


vue学习笔记_第11张图片

六,v-model和v-on中可以添加修饰器,v-model.lazy和number,trim,以及v-on

七,transition动画在,v-show,v-if,component:is="aa",路由变化中生效,如果相同标签进行动画切换时,需要增加key属性进行区分,动画才生效。

vue学习笔记_第12张图片

八,路由的三种写法


vue学习笔记_第13张图片

你可能感兴趣的:(vue学习笔记)