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' })