Vue常用API、高级API的相关总结


Posted in Vue.js onFebruary 02, 2021

最近手痒痒,玩儿了一下Vue3.0,很舒服,赶紧把这几期Vue2.0弄完,写一些3.0的东西。
本文主要罗列和解析一些个人认为常用或有大用途的Api,作为自我总结的笔记和探讨。

nextTick

功能:

添加在下次Dom更新循环结束之后的延迟回调,修改数据之后,可以获取更新后的Dom。
用法:

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )
// 用法2
// 作为一个 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
 .then(function () {
  // DOM 更新了
 })

说明:

callback:延迟回调函数
context:可选的object
ps:2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。

扩展:

关于nextTick的执行机制和使用场景,我们还必须掌握类似的requestAnimationFrame() 和 process.nextTick(), 前者是浏览器自带的监听(在下次重绘之前执行),后者是node环境下,在下一个事件轮询的时间点上执行

mixin

功能:

注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。
用法:

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

说明:

object:一个vm的属性或方法
ps:请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。

$forceUpdate

功能:

迫使 Vue 实例重新渲染。
用法:

vm.$forceUpdate()

set、delete

功能:

对响应式数据的属性进行设置、删除,同时触发视图更新。
用法:

// 用法1
Vue.set( target, key, value )
Vue.delete( target, key )
// 用法2
vm.$set( target, key, value )
vm.$delete( target, key )

说明:

target:目标对象
key:要添加的属性名
value:要添加的属性值
ps:主要使用场景,可以避开 Vue 不能检测到 property 被删除的限制

filter

功能:

用于一些常见的文本格式化和一些规范数据mapping。
用法:

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
// 注册
filters: {
 capitalize: function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
 }
}
// 全局注册
Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
 // ...
})

说明:

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。

ps:过滤器可以接受多个参数,如{{ message | filterA('arg1', arg2) }},这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

directive

功能:

用于注册自定义指令。

用法:

<!-- 当页面加载时,该元素将获得焦点 --> 
<input v-focus>
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})
// 注册局部指令,组件中也接受一个 directives 的选项
directives: {
 focus: {
  // 指令的定义
  inserted: function (el) {
   el.focus()
  }
 }
}

说明:

inserted 只是注册指令的其中一个插值函数,完整的注册属性还可以包括:
bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有,但是可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。

Vue.directive('my-directive', {
 bind: function () {},
 inserted: function () {},
 update: function () {},
 componentUpdated: function () {},
 unbind: function () {}
})

其它简单的常用属性和方法

// console.log(vm.$root); 
vm.$root  //实例对象

vm.$el //根元素(真实的DOM元素)
// console.log(vm.$el);

vm.$el.innerHTML  //得到根元素(真实的DOM元素)中的内容
// console.log(vm.$el.innerHTML);

vm.$data  //实例下的data对象
// console.log(vm.$data);

vm.$options   //实例下的挂载项
// console.log(vm.$options);

vm.$props  //组件之间通信的数据
// console.log(vm.$props);

vm.$parent   //在组件中,指父元素
// console.log(vm.$parent);

vm.$children  //在组件中,指子代元素
// console.log(vm.$children);

vm.$attrs  //用来获取父组件传递过来的所有属性
// console.log(vm.$attrs);

vm.$listeners  //用来获取父组件传递过来的所有方法
// console.log(vm.$listeners);

vm.$slots  //组件中的插槽
// console.log(vm.$slots);

vm.$scopedSlots   //用来访问作用域插槽
// console.log(vm.$scopedSlots);

vm.$refs  //用来定位DOM元素(使用ref进行追踪)
// console.log(vm.$refs);

vm.$watch  //用于监听数据(在vue文件中使用后会自动销毁)
// console.log(vm.$watch);

vm.$emit  //用于派发事件(常用于数据通信)
// console.log(vm.$emit);

vm.$on //用于监听事件的派发
// console.log(vm.$on);

vm.$once  //只监听事件一次(之后不监听)
// console.log(vm.$once);

//生命周期
beforeCreate() {
}
created() {
}
beforeMount() {
}
mounted() {
}
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
}
destroyed() {
}

总结

本文主要收录vue中常用的这几个API,如果有兴趣学习更多,可以参考其官网。希望本文对你有用,并能熟练运用到实际的项目开发中。

为了方便阅读理解,本文代码已经上传Github

文中如有错误,欢迎在评论区指正,如果有所帮助,欢迎点赞和关注。

以上就是Vue常用API、高级API的相关总结的详细内容,更多关于Vue常用API、高级API的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
vue监听键盘事件的相关总结
Jan 29 #Vue.js
You might like
PHP 加密解密内部算法
2010/04/22 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
Javascript 布尔型分析
2008/12/22 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python求导数的方法
2015/05/09 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
幼儿教师工作感言
2014/02/14 职场文书
责任书格式
2015/01/29 职场文书
初婚未育证明样本
2015/06/18 职场文书