vue学习(二):自定义过滤器和自定义指令

#自定义指令

自定义指令的参数有:

  • el: 指令所绑定的元素,可以用来直接操作 DOM 。
  • binding: 一个对象,包含以下属性:
    • name: 指令名,不包括 v- 前缀。
    • value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2
    • oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"
    • arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"
    • modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }

下面写了一个自定义指令,作用是固定定位,修饰符表示位置,带参数的有黄色背景。

<template>
  <div class="b">
    <div class="box" v-pin:yellow.left.top="true">我是自定义指令,背景色为黄色,固定在左上角<br><br></div>
    <div class="box" v-pin.left.bottom="true">我是自定义指令,固定在左下角<br><br></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      length: 10
    }
  },
  directives:{
    pin (el,binding){
      console.log(el,binding);
      // 指令的值
      var pinned = binding.value;
      // 修饰符
      var position = binding.modifiers;
      // 参数
      var yellow = binding.arg;
      console.log(yellow)
      if( binding.value ){
        el.style.position = "fixed";
        for( var key in position){
          if(position[key]){
            el.style[key] = "10px";
          }
        }

        if( yellow ){
          el.style.background = "yellow";
        }

      }else{
        el.style.position = "static";
      }
    }
  }

}
</script>

binding打印出来是:

页面效果是:

#自定义过滤器

将10m转化为 毫米单位:

<template>
  <div class="b">
    <div><span>{{ length }} m</span>等价于:<span> {{ length | meter("mm") }}</span></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      length: 10
    }
  },
  filters:{
    // val 为要转化的值,unit为参数
    meter (val,unit){
      if( unit === "mm")
        return val *1000 + "mm"
    }
  }

}
</script>

效果为:

时间: 2024-09-30 10:22:17

vue学习(二):自定义过滤器和自定义指令的相关文章

vue学习(十五) 过滤器简单实用

vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name | 处理的函数名 }} //可以通过Vue.filter来自定义过滤器 data就是管道符" | " 前面的内容,也就是name Vue.filter('过滤器名称',function(data){ return data+'hahahaha' }) //该过滤器就是为插值表达式的name

实现MVC自定义过滤器,自定义Area过滤器,自定义Controller,Action甚至是ViewData过滤器

MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Filter我们不得不去单独的Controller或者Action去定义 如图: 那么问题来了,我现在想在FitlerConfig里面去维护所有的过滤器,但是又想实现自定义的过滤器该咋搞,MVC默认不支持! 我们先来看看,MVC默认的Fitlers注册是怎样的官方源码:GlobalFilterColle

vue学习二:用 Vue.js + Vue Router 创建单页应用的几个步骤

通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项目中创建如下对应的文件 ├── App.vue // APP入口文件 ├── api // 接口调用工具文件夹 │ └── index.js // 接口调用工具 ├── components // 组件文件夹,目前为空 ├── config // 项目配置文件夹 │ └── index.js // 项目配置文

vue学习二:

vue的常用标签: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind:你要动态变化的值="表达式" 3.v-for列表渲染 例: <tr v-for="item in peoples"> <td> {{item.name}} </td>  </tr> 4.v-show指令与v-if指令的区别

Django(自定义过滤器和自定义标签)

模版是一个用django模版语言标记过的python字符串.模版可以包含模版标签和变量. 模版标签是在一个模版里起作用的标记.比如,一个模版标签可以产生控制结构的内容(if或者for),可以获取数据库内容或者访问其它模版标签. 一个标签块被{%%}包围 变量标签被{{}}包围 context是一个传递给模版的key-value对. 模版渲染是通过从context获取值来替换模版中变量并执行所有的模版标签. 创建自定义标签目录 首先在app底下创建一个templatetags目录,添加一下两个.p

自定义模板语言之simple_tag和自定义过滤器

扩展你的模板系统 一般是扩展模板的tag和filter两个功能.可以用来创建你自己的tag和filter功能库. 创建模板库 分为两步: 1. 首先决定由模板库在哪一个注册的app下放置,你可以放在一个已有的app目录下,也可以新建一个专门管理模板库的app,比如python manage.py startapp myTemplateLibrary.推荐后者,因为可以方便将来的重用. 2. 在app目录下创建templatetags子目录,并在里面创建两个文件,__init__.py,用来声明这

flask中自定义过滤器

第一种方法: 1,第一步:自定义过滤器函数 # 自定义一个函数,将list里面的数据进行排序 def list_sort(list) return list.sort() 2.第二步:注册过滤器 第一个参数是函数名,第二个参数是调用名 app.add_template_filter(list_sort, "sort1") 3,注册成功后就可以在模板中进行调用 <p>{{list | sort1}}</p> ============================

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Vue.js学习 Item14 – 过滤器与自定义过滤器

基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&