概念：Vue.js允许你自定义过滤器，可被用作一些常见的文本格式转化。过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在javaScript表达式的尾部，由“管道提示符”。
全局过滤器的基本使用
<div id="app">
<p>{
{msg | msgFormat('疯狂','123')}}</p>
</div>
<script>
//定义一个vue全局的过滤器，名字叫做magFormat
Vue.filter('msgFormat', function(msg, msg1, msg2) {
return msg.replace(/单纯/g, msg1 + msg2);
})
// 字符串的 replace 方法，第一个擦书，除了可以写一个字符串之外，还可以定义一个正则
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的温，谁是世界上最单纯的男人'
},
meyhods: {}
})
</script>运行结果：
定义时间格式化事件的全局过滤器
/ 全局的过滤器，进行时间的格式化
//所谓的全局过滤器，就是所有的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}`
}
})运行结果：
定义私有过滤器
<div id="app2">
<h3>{
{dt|dataFormat}}</h3>
</div>
<script>
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: {
//定义私有过滤器 过滤器有两个条件【 过滤器名称和处理函数】
//过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名
//称一致了，这时候，优先调用私有过滤器
dataFormat: 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}~~~~`;
}
}
}
})
</script>按键修饰符
说明：按下键盘，敲回车，可以添加该内容；vue提供的按键修饰符还有.tab / .delete / .esc / .space / .up / .down / .left / .right；如果使用没有提供的，则需要找到相应的键盘码值，例如f2的码值为113，则可以写为：
，同样可以实现其功能。
2.x中自定义按键修饰符
<body>
<div id="app">
<label for="">
name:
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<script>
//自定义全局案件修饰符
Vue.config.keyCodes.f2 = 113;
</script>
</body>使用Vue.directive()定义全局的指令
扫描二维码关注公众号，回复：
16475716 查看本文章
第一个例子是自动获取到焦点
<body>
<div id="app">
<label for="">
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords" id="search" v-focus>
</label>
<script>
Vue.directive('focus', {
bind: function(el) {
},
inserted: function(el) {
el.focus();
},
updated: function() {}
});
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀；但是，在调用的时候，必须在指令名称前加上v-前缀来进行调用。参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
bind: function(el) {
//注意：在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
// 在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用，因为一个元素，只有插入DOM节点之后，才能获取焦点
// el.focus();
}, //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
inserted: function(el) {
el.focus();
}, //inserted表示元素插入到DOM中的时候，汇之星inserted函数，触发一次
updated: function() {} //党vNode更新的时候，会执行updated,可能会触发多次
});第二个例子自定义一个设置字体颜色的指令
<body>
<div id="app">
<label for="">
搜索名称关键字：
<!-- 注意：vue所有的指令在调用的时候，都以v-开头 -->
<input type="text" class="form-control" v-model="keywords" id="search" v-color>
</label>
<script>
//自定义一个设置字体颜色的指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function(el) {
el.style.color = 'red';
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>总结：和JS行为有关的操作，最好在inserted中去执行，防止JS不生效；样式，只要通过指令bind绑定给了元素，不管这个元素有没有插入到页面中去，这个元素肯定有了一个内联的样式，将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
钩子函数的使用
例子
<body>
<div id="app">
<label for="">
搜索名称关键字：
<!-- 注意：vue所有的指令在调用的时候，都以v-开头 -->
<input type="text" class="form-control" v-model="keywords" id="search" v-color="'green'">
</label>
<script>
//自定义一个设置字体颜色的指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function(el, binding) {
el.style.color = binding.value;
console.log(el);
console.log(binding.name);
console.log(binding.value);
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
具体使用详情请点：钩子函数
定义私有指令
<body>
<div id="app">
<p v-fontweight="900">{
{msg}}</p>
</label>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '今天天气不错'
},
methods: {},
directives: {
'fontweight': {
bind: function(el, binding) {
el.style.fontWeight = binding.value;
}
}
}
})
</script>
</body>