过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果
export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 对传入的data 进行处理 return 处理结果 } } }
通过filters结构来创建
export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 进行处理 return 处理结果 } } }
需要在Vue实例创建之前定义
Vue.filter(过滤器名称,(data) => { // do something return 处理结果 })
在单独的文件中创建一个全局过滤器
在需要用到的组件中引入,并在filters中注册
import Vue from 'vue' // 通过Vue.filter创建全局过滤器 const filter1 = Vue.filter(过滤器名称,(data) => { // do something return 处理结果 }) // 导出 export { filter1 }
// 在组件中--引入过滤器 import { filter1 } from '@/utils/filters.js' export default { // 在组件内的 filters中,添加过滤器 // filters既可以创建过滤器,又可以用来注册过滤器 // 只有在filters中注册的才会被认为是过滤器 filters: { filter1 } }
<div> {{ 数据 | 过滤器 }} </div>
过滤器支持多个并行使用,前者的处理结果,将作为后者的参数传入
<div> {{ 数据 | 过滤器1 | 过滤器2 }}</div>
// 定义函数 const filterA = () => {} const filterB = () => {} // 导出函数对象 export { filterA, filterB }
import * as filters from './filters.js' //遍历 filters.js 内的方法 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
指令钩子函数会被传入以下参数:
// <div v-demo:left="100"></div> // 这里的 left 即为指令的 bingding对象的arg // 100 即为指令的 bingding对象的value Vue.directive('demo',{ // el--表示被绑定的元素,即指令在放置的那一个元素 bind(el,binding,vnode){ // 可以直接对这个元素进行一些处理 el.style.position = 'fixed'; const s = ( binding.arg == 'left' ? 'left' : top ); el.style[s] = binding.value + 'px'; } })
通过 Vue.directive() 方式注册全局指令,包含两个参数:
Vue.directive("指令名称", { inserted: function(el){ // do something } })
通过在Vue实例中添加 directives 对象数据注册局部自定义指令
export default { directives: { 指令名:{ 函数 } } }