过滤器
- 概念
vue.js允许自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:插值表达式和V-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。 - 过滤器调用时的格式
{{name | 过滤器的名称}}- name 是我们需要修改的数据 ;
- | 是管道符
- 过滤器的定义语法
注:过滤器中的function,第一个参数,已经被确定,一直都是过滤器管道符前面传递过来的数据。Vue.filter('过滤器的名称',function(){})
- 过滤器的简单使用
注:在p标签中的msgFormat,可以传递参数,这个参数是我们想要把msg变成的值,此时我们需要把function中添加参数,添加到后面。代码发现如下变化:<!-- 把msg中的单纯替换成邪恶 --> <div id="app"> <p>{{msg | msgFormat }}</p> </div> <script> Vue.filter('msgFormat', function (msg) { return msg.replace(/单纯/g,'邪恶') }) var vm = new Vue({ el: "#app", data: { msg:'我还是那个单纯的少年,单纯的我' }, </script>
<div id="app"> <p>{{msg | msgFormat('疯狂') }}</p> </div> --------------------------------------- Vue.filter('msgFormat', function (msg,arg) { return msg.replace(/单纯/g,arg) })
- 过滤器调用时,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,此时优先调用私有。私有过滤器是定义在Vue实例中。
自定义指令
- 自定义全局指令获取焦点
- 使用Vue.directive()定义全局指令
- 第一个参数代表指令的名称,在定义的时候,指令的名称前面,不需要加v-前缀。但是,在调用的时候,必须在指令名称前加上v-前缀来进行调用。
- 第二参数是一个对象,这个对象上有一些指令相关的函数,这些函数可以在特定的阶段执行相关的操作。
Vue.directive('focus',{ //bind,每当指令绑定到元素上的时候回立即执行这个bind函数,只执行一次 bind: function (el) { //元素刚绑定指令的时候,还没有插入到DOM中去,这个时候,调用focus方法没有起作用 //因为一个元素只有在插入DOM之后,才能获取焦点 //el.focus() }, //inserted 表示元素插入到DOM中的时候,会执行inserted函数,只触发一次 inserted: function (el) { el.focus() }, //当Vnode更新的时候,会执行update,可能会触发多次 update: function (el) { }, })
注:在钩子函数中,第一个参数永远是el,表示被绑定指令的那个元素,这个el参数,是一个原生JS对象。
- 钩子函数参数
el:指令所绑定的元素,可以用来直接操作DOM
binding:一个对象,包含以下 property:
- name:指令名,不包括 v- 前缀。
- value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
- expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
- 使用Vue.directive()定义全局指令
- 定义局部指令
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
- 指令函数的简写形式
在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value })