vue 指令和过滤器的基本使用(品牌管理案例)


Posted in Javascript onNovember 04, 2019

过滤器的基本使用

定义一个过滤器

<div id="app">
  <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
 </div>
// 定义一个 Vue 全局的过滤器,名字叫做 msgFormat
  Vue.filter('msgFormat', function (msg, arg, arg2) {
   // 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
   return msg.replace(/单纯/g, arg + arg2)
  })

  Vue.filter('test', function (msg) {
   return msg + '========'
  })
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
   },
   methods: {}
  });

过滤器可以使用多个·

下面js代码的HTML部分

<div id="app">
  <!-- {{1+1}} -->
  <div class="panel panel-primary">
   <div class="panel-heading">
    <h3 class="panel-title">添加品牌</h3>
   </div>
   <div class="panel-body form-inline">
    <label>
     Id:
     <input type="text" class="form-control" v-model="id">
    </label>
    <label>
     Name:
     <input type="text" class="form-control" v-model="name" @keyup.f2="add">
    </label>
    <!-- 在Vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了 -->
    <input type="button" value="添加" class="btn btn-primary" @click="add()">
    <label>
     搜索名称关键字:
     <!-- 注意: Vue中所有的指令,在调用的时候,都以 v- 开头 -->
     <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
    </label>
   </div>
  </div>
  <table class="table table-bordered table-hover table-striped">
   <thead>
    <tr>
     <th>Id</th>
     <th>Name</th>
     <th>Ctime</th>
     <th>Operation</th>
    </tr>
   </thead>
   <tbody>
    <!-- 之前, v-for 中的数据,都是直接从 data 上的list中直接渲染过来的 -->
    <!-- 现在, 我们自定义了一个 search 方法,同时,把 所有的关键字,通过传参的形式,传递给了 search 方法 -->
    <!-- 在 search 方法内部,通过 执行 for 循环, 把所有符合 搜索关键字的数据,保存到 一个新数组中,返回 -->
    <tr v-for="item in search(keywords)" :key="item.id">
     <td>{{ item.id }}</td>
     <td v-text="item.name"></td>
     <td>{{ item.ctime | dateFormat() }}</td>
     <td>
      <a href="" @click.prevent="del(item.id)">删除</a>
     </td>
    </tr>
   </tbody>
  </table>
 </div>

定义一个私有过滤器和私有指令

// 如何自定义一个私有的过滤器(局部)
  var vm2 = new Vue({
   el: '#app2',
   data: {
    dt: new Date()
   },
   methods: {},
   filters: { // 定义私有过滤器  过滤器有两个 条件 【过滤器名称 和 处理函数】
    // 过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器
    dateFormat: function (dateStr, pattern = '') {
     // 根据给定的时间字符串,得到特定的时间
     var dt = new Date(dateStr)
     //  yyyy-mm-dd
     var y = dt.getFullYear()
     var m = (dt.getMonth() + 1).toString().padStart(2, '0')
     var d = dt.getDate().toString().padStart(2, '0')
     if (pattern.toLowerCase() === 'yyyy-mm-dd') {
      return `${y}-${m}-${d}`
     } else {
      var hh = dt.getHours().toString().padStart(2, '0')
      var mm = dt.getMinutes().toString().padStart(2, '0')
      var ss = dt.getSeconds().toString().padStart(2, '0')
      return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
     }
    }
   },
   directives: { // 自定义私有指令
    'fontweight': { // 设置字体粗细的
     bind: function (el, binding) {
      el.style.fontWeight = binding.value
     }
    },
    'fontsize': function (el, binding) { // 注意:这个 function 等同于 把 代码写到了 bind 和 update 中去
     el.style.fontSize = parseInt(binding.value) + 'px'
    }
   }
  })
  // 过滤器的定义语法
  // Vue.filter('过滤器的名称', function(){})
  // 过滤器中的 function ,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据
  /* Vue.filter('过滤器的名称', function (data) {
   return data + '123'
  }) */

全局过滤器

// 全局的过滤器, 进行时间的格式化
  // 所谓的全局过滤器,就是所有的VM实例都共享的
  Vue.filter('dateFormat', function (dateStr, pattern = "") {
   // 根据给定的时间字符串,得到特定的时间
   var dt = new Date(dateStr)
   //  yyyy-mm-dd
   var y = dt.getFullYear()
   var m = dt.getMonth() + 1
   var d = dt.getDate()
   // return y + '-' + m + '-' + d
   if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`
   } else {
    var hh = dt.getHours()
    var mm = dt.getMinutes()
    var ss = dt.getSeconds()
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
   }
  })
// 自定义全局按键修饰符
  Vue.config.keyCodes.f2 = 113
Vue.directive() 定义全局的指令
 // 其中:参数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, 可能会触发多次

   }
  })

自定义一个字体颜色的指令

// 自定义一个 设置字体颜色的 指令
  Vue.directive('color', {
   // 样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联的样式
   // 将来元素肯定会显示到页面中,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素
   bind: function (el, binding) {
    // el.style.color = 'red'
    // console.log(binding.name)
    // 和样式相关的操作,一般都可以在 bind 执行
    // console.log(binding.value)
    // console.log(binding.expression)
    el.style.color = binding.value
   }
  })

总结

以上所述是小编给大家介绍的vue 指令和过滤器的基本使用(品牌管理案例),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
jquery提示效果实例分析
Nov 25 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
js转html实体的方法
Sep 27 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
JS立即执行的匿名函数用法分析
Nov 04 #Javascript
You might like
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
keras topN显示,自编写代码案例
2020/07/03 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
python中的对数log函数表示及用法
2020/12/09 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
药店主任岗位责任制
2014/02/10 职场文书
代领毕业证委托书
2014/08/02 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
交通安全月活动总结
2015/05/08 职场文书
刮痧观后感
2015/06/05 职场文书
师范生见习总结范文
2015/06/23 职场文书
大学生活感想
2015/08/10 职场文书