2.vue2.x之vue2.x的全局api(一)

vue2.x之vue2.x的全局api(一)

Vue.extend

vue构造器用法：

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

用法示例 toast提示框 首先在components文件创建一个文件toast,文件内容包含toast.js、toast.vue

<!--toast.vue--> <template> <div class="toast" :class="type ? `toast--${type}` : ''"> <p>{{ content }}</p> </div> </template> <script> export default { ... data() { return { type: "", content: "", duration: 3000 }; }, ... }; </script> <style lang="scss" scoped> .toast { ... &--error p { background: rgba(255, 0, 0, 0.5); } &--success p { background: rgba(0, 255, 0, 0.5); } } </style> // toast.js import Vue from "vue"; import Toast from "./toast.vue"; let ToastConstructor = Vue.extend(Toast ); let instance; const Toast = function(options = {}) { // 就改了这里，加了个 options 参数 instance = new ToastConstructor({ data: options // 这里的 data 会传到 toast.vue 组件中的 data 中，当然也可以写在 props 里 }); document.body.appendChild(instance.$mount().$el); }; // 以下就是在 Toast 函数中拓展 ["success", "error"] 这两个方法 ["success", "error"].forEach(type => { Toast[type] = options => { options.type = type; return Toast(options); }; }); export default Toast;

入口文件中配置

//main.js import Vue from 'vue' import Toast from ''@/components/toast/toast.js' //挂载到Vue的原型对象上 Vue.prototype.$toast= Toast

使用

<script> export default { methods: { showToast() { this.$toast({ content: "默认样式" }); }, showErrorToast() { this.$toast.error({ content: "错误样式" }); }, showSuccessToast() { this.$toast.success({ content: "成功样式" }); } } }; </script>

Vue.nextTick

用法

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

官方示例：

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

什么情况下使用Vue.nextTick?主要有以下几种情况 1、当在created生命周期函数中进行得dom操作一定要放在this.$nextTick回调中，因为单单只在created中进行的dom操作不会在页面进行相应的渲染。 2、基于数据更新后的dom进行操作。 3、使用第三方插件去操作dom时，想要更新后的dom重新使用该插件。

Vue.set

用法

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

<script> export default { data(){ return{ a:1, c:{} } }, created(){ this.eg() }, methods:{ eg(){ this.a=2//这是响应式的 this.b=2//非响应式的,因为如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 this.c={d:1}//响应式的 this.c.e=1//非响应式的 //解决方法 this.$set(this.c,'e',1)//转换为响应式的 //添加多个响应式的属性 this.c= Object.assign({},this.c, { h: 1, g: 2 }) } } } }; </script>

Vue.delete

用法

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

<template> <div>{{c.d}}</div> <div>{{c.e}}</div> <button @click="triggerVUpdate">click</button> </template> <script> export default { data(){ return{ c:{ d:2, e:3 } } }, methods:{ triggerVUpdate(){ //触发更新视图 this.$delete(this.c,'d') } } } }; </script>

Vue.directive

使用情景

有的情况下，需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令.

指令的钩子函数：

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

以上的生命周期钩子函数接受四个个参数el, binding, vnode,oldVnode

el：指令所绑定的元素，可以用来直接操作 DOM 。 binding：一个对象，包含以下属性：             name：指令名，不包括 v- 前缀。             value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。             oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。             expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。             arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。             modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。 vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

注意:el是可以操作的,而其他的几个参数一般最好不要去修改它.

用法 注册全局指令

//可被拖拽自定义指令 Vue.directive('drag',{ inserted:(el) =>{ let oDiv = el //el --> 触发的DOM元素 oDiv.ontouchstart = function(e){ let l = e.changedTouches[0].clientX - oDiv.offsetLeft let t = e.changedTouches[0].clientY - oDiv.offsetTop let maxLeft = document.clientWidth document.ontouchmove = function(e){ oDiv.style.left = e.changedTouches[0].clientX - l + 'px' oDiv.style.top = e.changedTouches[0].clientY - t + 'px' } oDiv.ontouchend = function(){ document.ontouchmove = null oDiv.ontouchend = null } } } })

注册局部指令

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }

Vue.filter

过滤器用法: 注册全局过滤器

//value为接受到的要处理的表达式的值 Vue.filter('toFixedPrice', function (value) { //返回处理后的值 return parseFloat(value).toFixed(2) }) Vue.filter('addUnit', function (value) { return ('$'+value) }) // getter，返回已注册的过滤器 var addUnit= Vue.filter('addUnit')

注册局部过滤器

//value为接受到的要处理的表达式的值 filters:{ 'toFixedPrice', function (value) { //返回处理后的值 return parseFloat(value).toFixed(2) } }

使用

<div>{{expression| toFixedPrice}}</div>

也可以串联使用,第二个过滤器接受的是前一个过滤器的返回值

<div>{{expression| toFixedPrice | addUnit}}</div>

同时过滤器允许传递参数,messgae为filterA接受的第一个参数,'arg1’和arg2为filterA接受的第二,第三个参数.

{{ message | filterA('arg1', arg2) }}

Vue.component

注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

// 注册组件，传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({ /* ... */ })) // 注册组件，传入一个选项对象 (自动调用 Vue.extend) Vue.component('my-component', { /* ... */ }) // 获取注册的组件 (始终返回构造器) var MyComponent = Vue.component('my-component')

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

<div id="components-demo"> <button-counter></button-counter> </div> new Vue({ el: '#components-demo' })