vue笔记之过滤器和自定义指令

 过滤器和自定义指令

人员管理案例

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">添加人员div>
        <div class="panel-body form-inline">
            <label>id:
                <input class="form-control" type="text" v-model="id">
            label>
            <label>name:
                <input class="form-control" type="text" v-model="name">
            label>
            <input type="button" value="提交" @click="add" class="btn btn-primary ">
            <label>搜索关键字：
                <input class="form-control" type="text" v-model="keywords">
            label>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>idth>
                    <th>nameth>
                    <th>dateth>
                    <th>optionth>
                tr>
                thead>
                <tbody>
                
                
                
                

                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}td>
                    <td>{{ item.name }}td>
                    <td>{{ item.ctime }}td>
                    <td><a href="" @click.prevent="del(item.id)">删除a>td>
                tr>
                tbody>
            table>

        div>
    div>
div>

HTML部分代码

js代码

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

过滤器示例

<div id="app">
    <h1>{{ msg | msgformat}}h1>
div>

HTML部分代码

js代码

传参版过滤器

<div id="app">
    <h1>{{ msg | msgFormat('天真','无邪') }}h1>
div>

HTML部分代码

js代码

过滤器版人员管理

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">添加名字div>
        <div class="panel-body form-inline">
            <label>id:
                <input class="form-control" type="text" v-model="id">
            label>
            <label>name:
                <input class="form-control" type="text" v-model="name">
            label>
            <input type="button" value="提交" @click="add" class="btn btn-primary ">
            <label>搜索关键字：
                <input class="form-control" type="text" v-model="keywords">
            label>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>idth>
                    <th>nameth>
                    <th>dateth>
                    <th>optionth>
                tr>
                thead>
                <tbody>
                
                
                
                

                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}td>
                    <td>{{ item.name }}td>
                    <td>{{ item.ctime|dateFormat('') }}td>
                    <td><a href="" @click.prevent="del(item.id)">删除a>td>
                tr>
                tbody>
            table>


        div>
    div>
div>
<div id="app2">
    <h1>{{ msg|dateFormat }}h1>
div>

HTML部分代码

js代码

HTML部分代码

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}td>

私有过滤器

私有过滤器filters

 

定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器

filters: {
            
            dateFormat: function (datestr, pattern) {
                var date = new Date(datestr);
                var y = date.getFullYear();
                var m = (date.getMonth() + 1).toString().padStart(2,0);
                var d = date.getDate().toString().padStart(2,0);

                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var h = date.getHours().toString().padStart(2,0);
                    var M = date.getMinutes().toString().padStart(2,0);
                    var s = date.getSeconds().toString().padStart(2,0);
                    return `${y}-${m}-${d} ${h}:${M}:${s}`
                }
            }

        }

View Code

全局过滤器

所谓的全局过滤器，就是所有的VM实例都共享的

Vue.filter('dateFormat', function (datestr, pattern) {
        var date = new Date(datestr);
        var y = date.getFullYear();
        var m = (date.getMonth() + 1).toString().padStart(2,0);
        var d = date.getDate().toString().padStart(2,0);

        if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
        } else {
            var h = date.getHours().toString().padStart(2,0);
            var M = date.getMinutes().toString().padStart(2,0);
            var s = date.getSeconds().toString().padStart(2,0);
            return `${y}-${m}-${d} ${h}:${M}:${s}`
        }

    });

View Code

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

键盘修饰符以及自定义键盘修饰符

https://cn.vuejs.org/v2/guide/events.html#

1.vue支持以下的键盘修饰符

2.自定义键盘修饰符

设置键值自定义修饰符的别名

Vue.config.keyCodes.f2 = 113;

使用自定义按键修饰符

自定义指令

https://cn.vuejs.org/v2/guide/custom-directive.html

自定义全局和局部的 自定义指令：

自定义全局指令

使用 Vue.directive() 定义全局的指令 v-focus
其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,
但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

Vue.directive('focus', {
  bind: function (el) {
 // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
    // 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
    // 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
    //  因为，一个元素，只有插入DOM之后，才能获取焦点
    // el.focus()
  },
  inserted: function (el) {  // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
    el.focus()
    // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
  },
  updated: function (el) {  // 当VNode更新的时候，会执行 updated， 可能会触发多次

  }
})

View Code

调用指令

<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">

自定义局部指令

directives: { // 自定义私有指令
        'fontweight': { // 设置字体粗细的
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },

View Code

简写：

directives: { // 自定义私有指令
        'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }

View Code