- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Vue常用API、高级API的相关总结由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
最近手痒痒,玩儿了一下Vue3.0,很舒服,赶紧把这几期Vue2.0弄完,写一些3.0的东西。 本文主要罗列和解析一些个人认为常用或有大用途的Api,作为自我总结的笔记和探讨.
功能:
添加在下次Dom更新循环结束之后的延迟回调,修改数据之后,可以获取更新后的Dom。 用法:
1
2
3
4
5
6
7
8
|
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环境下,在下一个事件轮询的时间点上执行 。
功能:
注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。 用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created:
function
() {
var
myOption =
this
.$options.myOption
if
(myOption) {
console.log(myOption)
}
}
})
new
Vue({
myOption:
'hello!'
})
// => "hello!"
|
说明:
object:一个vm的属性或方法 ps:请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入.
功能:
迫使 Vue 实例重新渲染。 用法:
1
|
vm.$forceUpdate()
|
功能:
对响应式数据的属性进行设置、删除,同时触发视图更新。 用法:
1
2
3
4
5
6
|
// 用法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 被删除的限制 。
功能:
用于一些常见的文本格式化和一些规范数据mapping。 用法:
1
2
3
4
5
|
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<
div
v-bind:id
=
"rawId | formatId"
></
div
>
|
1
2
3
4
5
6
7
8
|
// 注册
filters: {
capitalize:
function
(value) {
if
(!value)
return
''
value = value.toString()
return
value.charAt(0).toUpperCase() + value.slice(1)
}
}
|
1
2
3
4
5
6
7
8
9
10
|
// 全局注册
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 的值作为第三个参数.
功能:
用于注册自定义指令.
用法:
1
2
|
<!-- 当页面加载时,该元素将获得焦点 -->
<
input
v-focus>
|
1
2
3
4
5
6
7
8
|
// 注册一个全局自定义指令 `v-focus`
Vue.directive(
'focus'
, {
// 当被绑定的元素插入到 DOM 中时……
inserted:
function
(el) {
// 聚焦元素
el.focus()
}
})
|
1
2
3
4
5
6
7
8
9
|
// 注册局部指令,组件中也接受一个 directives 的选项
directives: {
focus: {
// 指令的定义
inserted:
function
(el) {
el.focus()
}
}
}
|
说明:
inserted 只是注册指令的其中一个插值函数,完整的注册属性还可以包括: bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有,但是可以通过比较更新前后的值来忽略不必要的模板更新。 componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind:只调用一次,指令与元素解绑时调用.
1
2
3
4
5
6
7
|
Vue.directive(
'my-directive'
, {
bind:
function
() {},
inserted:
function
() {},
update:
function
() {},
componentUpdated:
function
() {},
unbind:
function
() {}
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
// 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的资料请关注我其它相关文章! 。
原文链接:https://juejin.cn/post/6924181583373500430 。
最后此篇关于Vue常用API、高级API的相关总结的文章就讲到这里了,如果你想了解更多关于Vue常用API、高级API的相关总结的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
第一段代码工作正常,并给出了我需要的结果。我现在想做的是让它在 'as num' 上返回 3 个数字值对于“as num”上的 3 个不同值,对于同一列上的 3 个不同位置 SELEC
我想分析一些数据以编写定价算法。以下日期可用: 我需要三个变量/维度的函数/相关因子,它显示三个维度(pers_capacity、卧室数量、浴室数量)增长时中位数(价格)的变化。例如Y(#pers_c
正如标题所说 - 我的 Sprite Kit 游戏时不时地在后台崩溃,总是出现此错误 - Exception Type: EXC_BAD_ACCESS (SIGSEGV) Exception Sub
假设我尝试保存以下数据,并且Songs模型的name属性上设置了Phalcon \ Mvc \ Model \ Validator \ PresenceOf验证器 // Get an existing
我有一个 if 控件,如下所示; if (Directory.Exists(System.IO.Path.Combine(systemPath, "Reports", companyName))
有人可以告诉我我们使用 ReadLine() 从文件 (.txt) 中读取特定行吗?现在我想读取文件的全部内容(不仅仅是第一行)。为此我需要使用什么方法。我用谷歌搜索了很多,但找不到解决方案。 我的代
我相信在大学时我用从 C 派生的语言为 FPGA 编写了一个程序。我了解 VHDL 和 verilog 等语言。但是,我不明白的是程序员在使用哪个方面有多少选择?它依赖于FPGA吗?我将使用 Xili
我有一个 if 控件,如下所示; if (Directory.Exists(System.IO.Path.Combine(systemPath, "Reports", companyName))
如何在运行时更改 Dashcode (Javascript) 中图像对象的源? 我试过: var image = document.getElementById("image").object;ima
我有几个相互关联的类,它们将被多种不同的算法使用 例子: struct B; struct A { B* parent; }; struct B { std::vector child
我正在开发一个网站,用户在客户收到的表中输入金额,如果任何客户没有提供分期付款(金额),则用户不会在表中输入任何金额,并且用户希望获取违约者的信息客户以10天为基础。所以我的问题是应该定义什么表和属性
我试图从上一个条目中选择一个值,并每次将该数字加一。我让它工作到选择当前条目值(默认 1000)并递增 1 并重新插入该值(因此每次最终都是 1001)。我需要它来选择该字段的最后一个条目,这样它将变
我不擅长“制作”查询。假设这是我的数据库: artist pics ------------------- -
最近,我要为我的网站做一个即时通知系统。我听说 COMET 在这种情况下必不可少。 我已经搜索 PHP 和 Comet 一段时间了,但是,我发现的指南和文章似乎只是循环中的 ajax 请求。例如,有一
我正在开发一款 iOS 游戏,我希望 clown 在场景外生成,然后向下移动。我的想法是全部创建它们,并将它们以 360 像素的距离放置在不可见的场景中。 像这样: SKSpriteNode *clo
我有以下子订单表。 mysql> select * from suborder; +-------------+------------------+ | order_state | bookin
这可能是一个有点初学者的问题,但考虑到在 Java 中调试编码是相当相关的:什么时候编码与 String 对象相关? 假设我有一个要保存到文件中的字符串对象。 String 对象本身是否使用某种我应该
首先我想说我是 CPP 的新手(我从 cpp11 开始):)考虑以下实体:学生(名字+姓氏)和组(描述+更多学生)。我在 C++ 中创建了以下 2 个类: class Student { privat
我正在尝试在单击该复选框时同步更新我的数据库。我决定使用 aJax,但它似乎无法识别 ajax。 代码:将成为 Switch_Active(this.id) 函数的元素 ... Deactivat
我正在创建一个菜单。菜单如下。 $('.category').mouseover(function() { $(this).removeClass('category').addClass('cate
我是一名优秀的程序员,十分优秀!