专门做财经的网站,wordpress文章页幻灯片,做网站英语老师的简历,门户网站模板源码自定义指令补充
自定义指令通过钩子函数的形式来实现自定义的功能
这里是几个常用的钩子函数以及它的方法#xff1a; bind#xff1a;只调用一次#xff0c;指令第一次绑定到元素时调用#xff0c;在这里可以进行一次性的初始化设置。 inserted#xff1a;被绑定元素插…自定义指令补充
自定义指令通过钩子函数的形式来实现自定义的功能
这里是几个常用的钩子函数以及它的方法 bind只调用一次指令第一次绑定到元素时调用在这里可以进行一次性的初始化设置。 inserted被绑定元素插入父节点时调用 update所在的组件的VNode更新时调用指令的值可能发生了改变也可能没有。 componentUpated指令所在组件的VNode及其子VNode 全部更新后调用 unbind只调用一次指令与元素解绑时调用。
自定义过滤器
过滤器用来对Vue中的属性或者数据进行过滤即在显示之前进行数据处理或筛选。 过滤器可以用在两个地方双花括号差值和v-bind表达式
过滤器的语法如下
{{data|filter(参数)}}data时filter的第一个参数隐性参数而括号中的参数是指第二个以后的参数。
过滤器的用法如下
//双花括号形式
{{message|capitalize}}
//v-bind形式div v-bind:idrawId|formatId/div为什么叫自定义过滤器
因为Vue2.0以后删除了所有内置过滤器
自定义全局过滤器
使用全局方法Vue.filter可自定义全局过滤器。所谓全局方法就是在多个实例中都可以使用。比如再定义一个vue实例在这个示例挂载的元素中也可以使用。
对于过滤器执行的函数一般建议用箭头函数来表示。 bodydiv idapph3{{8|addZero}}/h3h3 v-bind:id3|addZero1/h3/divscript//自定义过滤器当数字为1位数字时在前面加个0//过滤器执行的函数的第一个参数data就表示要过滤处理的数据过滤器的名称Vue.filter(addZero, (data) {//data参数是 | 前面的数据return data 10 ? 0 data : data;})const vm new Vue({el: #app,data: {}})/script
/body注意过滤器要先定义然后再new Vue实例否则会失效且报错也就是过滤器要写在new Vue前面
自定义局部过滤器
局部过滤器就是写在实例内部通过filter选项设置只能应用在对应的Vue实例挂载的DOM上。 bodydiv idapph3{{currentDate|filterNum(3)}}/h3h3 v-bind:id3|addZero1/h3/divscriptconst vm new Vue({el: #app,data: {currentDate: Date.now(),},filters: {//局部过滤器filterNum: (data, n) {return data.toFixed(n)},addZero: function (data) {return data 10 ? 0 data : data}}})/script
/body
