1 过滤器 filter
例如商城中商品的价格, 既是动态的, 而且重复出现的频率非常高, 这就意味着, 一些信息是重复的, 像前面可以加一个 "¥", 后面接一个单位 "元":¥10 元. 想实现只传价格 10, 其他信息让其自动生成, vue 里提供了过滤器 filter 来实现.
例 1:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 过滤器
- </title>
- </head>
- <body>
- <div id="app">
- <div>
- <input v-model="price">
- {{price | currency}}
- </div>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.filter('currency',
- function(val, unit) {
- val = val || 0;
- unit = unit || '元';
- return val + unit;
- });
- var App = new Vue({
- el: '#app',
- data: {
- price: 10
- }
- })
- </script>
- </HTML>
说明:
通过管道符 |, 将前面的数据 price 传到后面的过滤器 currency 中,
Vue.filter(), 第一个参数是过滤器的名字, 第二个参数是一个 function,function 也有两个参数 (可以自定义的), 第一个是传进来的值, 第二个是过滤器的值, 可以写在括号中传过来, 就像调用函数时带着参数一样.
例 2: 单位换算
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 过滤器 2
- </title>
- </head>
- <body>
- <div id="app">
- <div>
- 请输入毫米数:
- <input type="text" v-model="length">
- <br>
- 换算成米:{{length|meter}}
- </div>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- Vue.filter('meter',
- function(val, unit) {
- val = val || 0;
- unit = unit || '米';
- return (val / 1000).toFixed(2) + unit; // 保留两位小数
- });
- var App = new Vue({
- el: '#app',
- data: {
- length: 100
- }
- })
- </script>
- </HTML>
总结: filter 就是解决一些格式的问题, 可以提升用户体验的. 如果 filter 内部非常复杂, 建议写成计算属性 computed, 因为 computed 带有缓存, 可重用性强. 而 filter 都是做一些简单的事情.
2 自定义指令
2.1 基础配置
如果 vue 自带的指令无法满足需求, 就要自定义一个指令, 用法就像自定义属性一样, 只要在元素上加上这个属性, 就具有相应的功能,
用 directive 来定义一个指令, 第一个参数是指令名, 第二个参数是回调函数, 函数中第一个参数 el 是元素, 就是指令所在的元素会自动传进来, 这个元素可以用原生 API 来调用, 也可以用 jQuery 来调用, 第二个参数 binding 是指令传进来的值和其他基本信息
来源: http://www.bubuko.com/infodetail-3034609.html