Vue学习日记全局 API总结

最新推荐文章于 2023-07-29 21:06:10 发布

那是遇知吧

最新推荐文章于 2023-07-29 21:06:10 发布

阅读量164

点赞数

分类专栏： VUE.js

本文链接：https://blog.csdn.net/weixin_41406727/article/details/108793198

版权

VUE.js 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

1：Vue.extend( options )

用法：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="mount-point"></div>

<script>
 // 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
</script>
</body>
</html>

2：Vue.nextTick( [callback, context] )

用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

ES6同步写法

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}

3:Vue学习日记part2 Vue.set

4:Vue.delete( target, propertyName/index )