vue全局方法

VUE的全局方法是大家最常见的,但是却又都不太了解具体意思的部分,很多小白同学都直接就忽略了这一部分。读懂这些方法,会让你的开发轻松十倍。

Vue.extend( options )使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数。参数:{Object} options

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

结果如下:

Walter White aka Heisenberg
   

Vue.nextTick( [callback, context] )在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。参数:{Function} [callback];{Object} [context]

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

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
Vue.nextTick()
 .then(function () {
 // DOM 更新了
 })
   

Vue.set( target, key, value ) 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

  • 参数:{Object | Array} target
  • {string | number} key
  • {any} value
  • 返回值:设置的值。

Vue.delete( target, key )删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

  • 参数:
  • {Object | Array} target
  • {string | number} key/index

Vue.directive( id, [definition] )注册或获取全局指令。

  • 参数:
  • {string} id
  • {Function | Object} [definition]
// 注册
Vue.directive('my-directive', {
 bind: function () {},
 inserted: function () {},
 update: function () {},
 componentUpdated: function () {},
 unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
 // 这里将会被 `bind` 和 `update` 调用
})
// getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')
   

Vue.filter( id, [definition] ) 注册或获取全局过滤器。

  • 参数:
  • {string} id
  • {Function} [definition]
// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
   

Vue.component( id, [definition] ) 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

  • 参数:
  • {string} id
  • {Function | Object} [definition]
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
   

Vue.use( plugin ) 安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当 install 方法被同一个插件多次调用,插件将只会被安装一次。

  • 参数:
  • {Object | Function} plugin

Vue.mixin( mixin )全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。

  • 参数:
  • {Object} mixin

Vue.compile( template ) 在 render 函数中编译模板字符串。只在独立构建时有效

  • 参数:
  • {string} template
var res = Vue.compile('{{ msg }}')
new Vue({
 data: {
 msg: 'hello'
 },
 render: res.render,
 staticRenderFns: res.staticRenderFns
})
   

Vue.version 提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用,你可以根据不同的版本号采取不同的策略。

var version = Number(Vue.version.split('.')[0])
if (version === 2) {
 // Vue v2.x.x
} else if (version === 1) {
 // Vue v1.x.x
} else {
 // Unsupported versions of Vue
}
   

椰子分享:无论做什么事,第一次紧张是正常的,但如果真的很想做这件事,或者必须做这件事,你就不能止步于紧张

(0)

相关推荐

  • 手机短视频拍摄软件VUE使用方法?

    手机短视频拍摄软件VUE如何使用呢?今天小编为大家讲解一下. 操作方法 01 打开手机,找到VUE,点击并进入,如图所示. 02 进入之后,点击图示位置可调整画幅,如图所示. 03 点击该按键还可调整 ...

  • 怎样为IE浏览器的javascript提速

    随着现在网页设计越来越多的应用javascript技术,而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标,各家浏览器厂商皆宣称他们的浏览器速度更快,希望搅动现存的竞争态势 ...

  • 为IE浏览器的javascript提速

    随着现在网页设计越来越多的应用javascript技术,而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标,各家浏览器厂商皆宣称他们的浏览器速度更快,希望搅动现存的竞争态势 ...

  • JS中this关键字的解释

    this关键字 每一个行为发生的时候,肯定会有一个发生这个行为的主体.比如说吃饭这个方法,它是由上帝来定义的,世界上所有的人来执行.吃饭这个行为发生的时候,主体就是在吃饭的这个人,也就是要有人执行吃饭 ...

  • JavaScript类型的转换

    Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值. 操作方法 01 JavaScript 数据类型 在 JavaScript 中有 5 种不同的数据类 ...

  • 追书神器手机版全局转换繁体字方法图解

    想必很多用户都喜欢用繁体字看文字吧,可之前追书神器都没有更换繁体字看小说的,现在用户再也不用说没有繁体字了,最近追书神器更新功能就是可以全局转换繁体字了。想必很多用户都还不知道怎么更换吧,今天小编就教 ...

  • [两种方法]Win10内部隐藏的全局程序视图如何启用?

    你一般怎么看自己在Windows 10上已经安装了那些应用程序?想必多数人的第一反应就是瞄向左下角的开始按钮. 当然,这是最符合常识和逻辑的,然而这并不是最有效率和最好的办法. 之所以这么说,一是因为 ...

  • vue如何添加音乐?vue给视频添加音乐方法

    vue是一款手机小视频视频制作软件,可以将在制作好的视频,发到朋友圈等地方.只能制作固定大小的视频,还可以给视频添加音乐,让视频看起来更加好.那么我们怎么用vue添加音乐呢?小编下面告诉大家. vue ...

  • vivo手机全局主题制作修改方法

    vivo手机全局主题制作修改方法 操作方法 01 首先在手机的主题文件夹找到要修改的主题,以themedefault.itz为例 02 把themedefault.itz复制到电脑,修改扩展名为zip ...

  • 全局透明背景教程,两种方法

    操作方法 01 首先大家提取原生态没有任何修改过的framework-res.apk,反编译,(这里特别交代一下,大家要看仔细了,全局背景化透明化的修改是有两种修改的方法,大家可以根据自己喜好来修改) ...