vue如何调用api,vue.js api
Vue.js是一个用于构建Web界面的渐进式JavaScript框架，通过简洁的API提供高效的数据绑定和灵活的组件系统。本文主要介绍Vue.js中容易被忽略的API的一些信息，有需要的朋友可以参考一下。
目录
nextTickv-model语法sugar.sync修饰符set计算属性的集合摘要
nextTick
NextTick是Vue.js提供的一个功能，没有内置在浏览器中。nextTick函数接收一个回调函数cb，该函数在下一个DOM更新周期后执行。例如，下面的例子：
模板
差异
P-if= show ref= node 内容/p
Button @click=handleShow 显示/button
/div
/模板
脚本
导出默认值{
data () {
返回{
显示：假
}
},
方法：{
handleShow () {
this.show=true
console.log(这个。$ refs . node)；//未定义
这个。$nextTick(()={
console.log(这个。$ refs . node)；//p内容/p
});
}
}
}
/脚本
当show设置为true时，P节点此时尚未渲染，因此打印未定义。在nextTick的回调中，已经渲染了P，所以可以正确打印节点。
nextTick的源代码在github.com/vuejs/vue/b…大家可以看到，Vue.js使用Promise、setTimeout、setImmediate来实现nextTick，不同的环境会使用不同的方法。
v-model 语法糖
V-model通常用于表单元素(如输入)上数据的双向绑定。除了本机元素之外，它还可以用于自定义组件。
V-model是一个语法糖，可以拆解成道具：值和事件：输入。也就是说，组件必须提供一个适当的命名值和一个名为input的自定义事件。如果满足这两个条件，用户就可以在定制组件上使用v-model。例如，下面的示例实现了一个数字选择器：
模板
差异
Button @click=增加(-1)减去1/button
span style= color:red；填充：6px“{ current value } }/span
Button @click=增加(1)加1/button
/div
/模板
脚本
导出默认值{
名称：输入号码，
道具：{
值：{
类型：数量
}
},
data () {
返回{
当前值：this.value
}
},
观察：{
值(val) {
this.currentValue=val
}
},
方法：{
增加(值){
this.currentValue=val
这个。$emit(input ，this . current value)；
}
}
}
/脚本
Props一般不能在一个组件中修改，是由父级修改的，所以v-model的实现一般有一个currentValue的内部数据，一开始从Value中获取一次，当值被修改时，也由watch监控并及时更新；组件不是修改value的值，而是修改currentValue，并通过自定义事件输入将修改后的值发送给父组件。在父组件接收到它之后，父组件修改该值。因此，上述数字选择器组件可以以下两种方式使用：
模板
InputNumber v-model=value /
/模板
脚本
从导入输入号码./components/input-number/input-number . vue ；
导出默认值{
组件：{输入编号}，
data () {
返回{
值：1
}
}
}
/脚本
或者：
模板
input number:value= value @ input= handle change /
/模板
脚本
从导入输入号码./components/input-number/input-number . vue ；
导出默认值{
组件：{输入编号}，
data () {
返回{
值：1
}
},
方法：{
handleChange (val) {
this.value=val
}
}
}
/脚本
如果您不想使用names值和输入，从VUE.js版本2.2.0开始，提供了一个模型选项来指定它们的名称，因此数字选择器组件也可以这样编写：
模板
差异
Button @click=增加(-1)减去1/button
span style= color:red；填充：6px“{ current value } }/span
Button @click=增加(1)加1/button
/div
/模板
脚本
导出默认值{
名称：输入号码，
道具：{
编号：{
类型：数量
}
},
型号：{
道具：“号码”，
事件：“更改”
},
data () {
返回{
当前值：this.number
}
},
观察：{
值(val) {
this.currentValue=val
}
},
方法：{
增加(值){
this.currentValue=val
这个。$emit(number ，this . current value)；
}
}
}
/脚本
在model选项中，可以指定prop和event的名称，而不是value和input，因为这两个名称在一些本机表单元素中，并且有其他用途。
.sync 修饰符
如果你用过Vue.js 1.x，你一定很熟悉。同步。在1.x中，您可以使用。sync双向绑定数据，即父组件和子组件都可以修改这些数据，这是一种双向响应。在Vue.js 2.x中放弃了这种用法，目的是为了尽可能地解耦父子组件，防止子组件无意中修改父组件的状态。
但是，在vue . js 2 . 3 . 0版中。增加了sync修改器，但是用法和1.x. 2.x的不完全一样。sync不是真正的双向绑定，而是一个语法糖。修改数据仍然在父组件中完成，而不是在子组件中。
它仍然是数字选择器的一个例子。这一次，它使用的不是v-model。sync，可以改写成这样：
模板
差异
Button @click=增加(-1)减去1/button
span style= color:red；填充：6px“{ value } }/span
Button @click=增加(1)加1/button
/div
/模板
脚本
导出默认值{
名称：输入号码，
道具：{
值：{
类型：数量
}
},
方法：{
增加(值){
这个。$emit(update:value ，this . value val)；
}
}
}
/脚本
使用案例：
模板
input number:value . sync= value /
/模板
脚本
从导入输入号码./components/input-number/input-number . vue ；
导出默认值{
组件：{输入编号}，
data () {
返回{
值：1
}
}
}
/脚本
看起来比v-model的实现简单多了，实现效果是一样的。一个组件中只能有一个v-model，但是。同步可以设置为多。同步很好，但也有局限性，比如：
不能与表达式一起使用(如v-bind:title.sync=doc.title ！无效)；
不能用在literal对象上(比如v-bind.sync={ title: doc.title} 不能正常工作)。
$set
$set在前面的章节中已经介绍过了，它将在两种情况下使用：
由于JavaScript的限制，Vue无法检测到以下更改的数组：
直接按索引设置项目时，例如：this . items[index]=value；
修改数组长度时，例如：vm.items.length=newLength。
由于JavaScript的限制，Vue无法检测对象属性的添加或删除。
例如，它是：
//数组
导出默认值{
data () {
返回{
项目：[a ， b ， c]
}
},
方法：{
处理程序(){
this . items[1]= x ；//没有响应
}
}
}
使用$set:
//数组
导出默认值{
data () {
返回{
项目：[a ， b ， c]
}
},
方法：{
处理程序(){
这个。$set(this.items，1， x )；//有反应。
}
}
}
以对象为例：
//对象
导出默认值{
data () {
返回{
项目：{
答：1
}
}
},
方法：{
处理程序(){
this . item . b=2；//没有响应
}
}
}
使用$set:
//对象
导出默认值{
data () {
返回{
项目：{
答：1
}
}
},
方法：{
处理程序(){
这个。$set(this.item， b ，2)；//有反应。
}
}
}
此外，以下数组方法可以触发视图更新，这是响应式的：
push()、pop()、shift()、unshift()、splice()、sort()、reverse().
另一个窍门是先复制一个数组，然后按索引修改，再整体替换原数组，比如：
处理程序(){
常量数据=[.this . items]；
data[1]= x ；
this.items=data
}
计算属性的 set
Computed属性很简单，会被广泛使用，但是很多时候我们只是使用它默认的get方法，也就是通常的常规写法，通过computed来获得一个依赖于其他状态的数据。例如：
计算值：{
全名(){
返回“{ this . first name } { this . last name } ”;
}
}
这里的fullName其实可以写成Object而不是Function，但是Function的形式默认是我们的get方法，写成Object的时候也可以用它的set方法：
计算值：{
全名：{
get () {
返回“{ this . first name } { this . last name } ”;
},
设置(值){
const names=val . split( )；
this . first name=names[0]；
this . last name=names[names . length-1]；
}
}
}
很多时候，属性只用于读取。在使用集合之后，它们可以被写入。例如，在上面的示例中，如果执行this.fullName=Aresn Liang ,将调用computed集，并将firstName和lastName赋给Aresn和Liang。
总结
关于Vue.js中容易被忽略的API的这篇文章就到这里了，关于Vue.js中容易被忽略的API的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。