学习VUE第十五天课程(基础篇完结1:VUE之全局API(全局操作set+delete))
VUE之全局API(全局操作set+delete)全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API。通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操...
VUE之全局API(全局操作set+delete)
全局API
(1)什么是全局API?
全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API。
通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。
(2)常用vue 的全局 API列表
1、Vue.directive 自定义指令
2、Vue.extend 扩展实例构造器
3、全局操作Vue.set + Vue.delete
4、Vue 的生命周期
5、Vue component 组件 + Vue template模板
6、Vue.nextTick线程操作、Vue.filter筛选、Vue.use调用
小结:全局API就是在构造器外部用Vue提供的API函数来定义新的功能。
Vue.set全局操作
(3)全局操作API-set简介:
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set。
一、引用构造器外部数据
什么是外部数据,就是不在Vue构造器里里的data处声明,而是在构造器外部声明,然后在data处引用的数据。
外部数据的加入让程序更加灵活,我们可以在外部获取任何想要的数据形式,然后让data引用。 如下所示
一、引用构造器外部数据
二、改变外部数据的三种方法
1、用Vue.set改变
2、用Vue对象的方法添加
3、直接操作外部数据
如下所示,在mounted挂载完毕后年纪+1,如下所示
其实这三种方式都可以操作外部的数据,Vue也给我们增加了一种操作外部数据的方法。
三、为什么要有Vue.set的存在?
由于Javascript的限制,Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时,vue不会自动更新。
当你修改数组的长度时,vue不会自动更新。
小结:普通的情况下对Vue实例里面的数据进行更改,数据改掉了,但是呈现在页面的视图并没有发生变化,所以借用set方法视图也会跟着刷新
三、为什么要有Vue.set的存在?
案例:普通方式视图并没有刷新
案例:set方式视图会刷新
语法:Vue.set(target,key,value)
小结:
1、语法:Vue.set( target, key, value )
2、返回值:设置的值
3、作用:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
4、通俗理解:用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性
5、注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象
Vue.delete全局操作
(4)Vue.delete删除对象元素操作
语法:Vue.delete(target,key)用法和原理与set添加元素是一样的道理
如有疑问或者问题请留言联系小编!!!
感谢来访!!!
更多推荐
所有评论(0)