Vue预习课09：可复用性.pdf

过滤器

过滤器使用filter. 过滤器是表示格式化数据的
过滤器分为全局过滤器和局部过滤器
过滤器的使用:
过滤器可以在插值语法中使用,也可以在v-bind表达式（属性绑定）中使用

| 是管道符号

  1. <div id="app">
  2.   不传前缀符号的局部过滤：{{money | preSymbol()}}
  3.   不传前缀符号的局部过滤：{{money | preSymbol}}
  4.   <br/>
  5.   传前缀符号的局部过滤：{{money | preSymbol('$')}}
  6.   <br/>
  7.   全局过滤：{{money | preSymbolG()}}
  8.   <br/>
  9.   全局过滤11：{{money | preSymbolG('$')}}
  12.   <div :title="money | preSymbolG('$')">在v-bind中使用</div>
  13. </div>
  15.     // 全局过滤器（|符号的前一个值传入money）
  16.     Vue.filter('preSymbolG', (money, symbol = "￥") => {
  17.       return symbol + money;
  18.     })
  20.     new Vue({
  21.       el: '#app',
  22.       data: {
  23.         money: 1234
  24.       },
  25.             // 局部过滤器
  26.       filters: {
  27.                 // （|符号的前一个值传入money）
  28.         preSymbol (money, symbol = "￥") {
  29.           return symbol + money;
  30.         }
  31.       }
  32.     })

自定义指令

自定义指令使用directive.
自定义指令一般是封装对DOM元素进行底层操作的方法,并且这个方法是需要复用的
更多的钩子函数需要在官方文档查看

  2. <div id="app">
  4.   <!-- 无参数的自定义指令 -->
  5.   <input type="text" v-model="inp" v-focus>
  7.   <!-- 有参数的自定义指令  自定义指令后面是表达式 -->
  8.   <button v-admin="{rooter: 'other'}">删除管理员</button>
  9. </div>
  12.         // 自定义指令
  13.     Vue.directive('focus', {
  14.       inserted (el) {
  15.         el.focus();
  16.       }
  17.     })
  19.     // 通过自定义指令来操作元素
  21.     Vue.directive('admin', {
  22.       inserted (el, bindings) {
  23.         console.log(bindings)
  24.         console.log(bindings.value.rooter)
  25.         if(bindings.value.rooter !== 'admin') {
  26.           el.parentElement.removeChild(el);
  27.         }
  28.       }
  29.     })
  32.     new Vue({
  33.       el: '#app',
  34.       data: {
  35.         inp: ''
  36.       }
  37.     })

渲染函数

作用：当程序更新的时候再次执行，得到最新的虚拟DOM
渲染函数使用render
render函数传入createdElement

  2. <script src="https://at.alicdn.com/t/font_2341569_n1zksf3dnza.js"></script>
  3.   <style>
  4.     .iconfont {
  5.       font-family: "iconfont" !important;
  6.       font-size: 16px;
  7.       font-style: normal;
  8.       -webkit-font-smoothing: antialiased;
  9.       -moz-osx-font-smoothing: grayscale;
  10.     }
  11.     .icon {
  12.       width: 1em;
  13.       height: 1em;
  14.       vertical-align: -0.15em;
  15.       fill: currentColor;
  16.       overflow: hidden;
  17.     }
  18.   </style>
  21. <div id="app">
  23.   <h1 :title="title">
  24.     <svg class="icon">
  25.       <use xlink:href="#icon-shop"></use>
  26.     </svg>
  27.     {{title}}
  28.   </h1>
  30.   <heading leave="1" title="12331" icon="shop">{{title}}</heading>
  31. </div>
  33.     Vue.component('heading', {
  34.       props: {
  35.         leave: {
  36.           type: String,
  37.           default: '1'
  38.         },
  39.         title: String,
  40.         icon: String
  41.       },
  42.       render (h) {
  43.         // 因为生成虚拟DOM的源码就是调用h的方法
  44.         let children = [];
  46.         if (this.icon) {
  48.           const icon = h('svg', {
  49.             attrs: {class: 'icon'},
  50.           },
  51.           [h('use', {
  52.               attrs: {
  53.                 'xlink:href': `#icon-${this.icon}`
  54.               }
  55.             })
  56.           ])
  57.           children.push(icon);
  58.         }
  59.         children = children.concat(this.$slots.default)
  61.         console.log(this.$slots.default, children)
  63.         return h(
  64.           'h'+this.leave,
  65.           {
  66.             attrs: {title: this.title}
  67.           },
  68.           children
  69.         )
  70.       }
  71.     })
  73.     new Vue({
  74.       el: '#app',
  75.       data: {
  76.         title: '购物车'
  77.       }
  78.     })

虚拟DOM是真实DOM的映射，它是描述真实DOM的方式，它更轻量，快速

查看官方文档

函数式组件

如果组件没有监听器,没有data(没有响应式数据),没有生命周期,则可以使用函数式组件

函数式组件没有实例
函数式组件的使用没有响应式数据了,提高了性能（更加轻量，消耗资源更少）

查看官方文档

  2. <heading leave="1" title="12331" icon="shop">{{title}}</heading>
  4.     // 函数式组件
  5.     Vue.component('heading', {
  6.       functional: true,
  7.       props: {
  8.         leave: {
  9.           type: String,
  10.           default: '1'
  11.         },
  12.         title: String,
  13.         icon: String
  14.       },
  15.       render (h, context) {
  16.         // 因为生成虚拟DOM的源码就是调用h的方法
  17.         let children = [];
  19.         let {icon, leave, title } = context.props;
  21.         if (icon) {
  23.           const iconVNode = h('svg', {
  24.             attrs: {class: 'icon'},
  25.           },
  26.           [h('use', {
  27.               attrs: {
  28.                 'xlink:href': `#icon-${icon}`
  29.               }
  30.             })
  31.           ])
  32.           children.push(iconVNode);
  33.         }
  34.         children = children.concat(context.children)
  36.         console.log(context.children, children)
  38.         return h(
  39.           'h'+leave,
  40.           {
  41.             attrs: {title}
  42.           },
  43.           children
  44.         )
  45.       }
  46.     })
  48.     new Vue({
  49.       el: '#app',
  50.       data: {
  51.         title: '购物车'
  52.       }
  53.     })

混入

混入使用mixin
混入是一种设计模式

混入式组件扩展，逻辑复用的一种方式

选项合并规则在官方文档中查看（插件开发和源码中会使用）

  1. <heading leave="1" title="12331" icon="shop">{{title}}</heading>
  3. // 混入中是一个对象
  4.     const myMixin = {
  5.       created() {
  6.         this.hello();
  7.       },
  8.       methods: {
  9.         hello () {
  10.           console.log('hello')
  11.         }
  12.       }
  13.     }
  15.     Vue.component('heading', {
  16.       props: {
  17.         leave: {
  18.           type: String,
  19.           default: '1'
  20.         },
  21.         title: String,
  22.         icon: String
  23.       },
  24.       // 混入，可以混入多个。如果组件内定义的函数名和数据名和混入定义的重复，则以组件中的为准
  25.       mixins: [myMixin],
  26.       render (h) {
  27.         // 因为生成虚拟DOM的源码就是调用h的方法
  28.         let children = [];
  30.         if (this.icon) {
  32.           const icon = h('svg', {
  33.             attrs: {class: 'icon'},
  34.           },
  35.           [h('use', {
  36.               attrs: {
  37.                 'xlink:href': `#icon-${this.icon}`
  38.               }
  39.             })
  40.           ])
  41.           children.push(icon);
  42.         }
  43.         children = children.concat(this.$slots.default)
  45.         console.log(this.$slots.default, children)
  47.         return h(
  48.           'h'+this.leave,
  49.           {
  50.             attrs: {title: this.title}
  51.           },
  52.           children
  53.         )
  54.       }
  55.     })
  58.     new Vue({
  59.       el: '#app',
  60.       data: {
  61.         title: '购物车'
  62.       }
  63.     })

插件

插件时vue扩展的终极方案
前面的几种方案不适合分发，即分享给别人
如果需要写vue的插件,则需要实现install方法
插件的使用Vue.use(插件)

Vue可以添加静态方法，申明指令或过滤器，或者混入，在混入中可以拿到组件实例，添加原型方法

  1. MyHeadering.js(插件)
  2. const MyHeadering = {
  3.   install (Vue, options) {
  4.     Vue.component('heading', {
  5.       props: {
  6.         leave: {
  7.           type: String,
  8.           default: '1'
  9.         },
  10.         title: String,
  11.         icon: String
  12.       },
  13.       render (h) {
  14.         // 因为生成虚拟DOM的源码就是调用h的方法
  15.         let children = [];
  17.         if (this.icon) {
  19.           const icon = h('svg', {
  20.             attrs: {class: 'icon'},
  21.           },
  22.           [h('use', {
  23.               attrs: {
  24.                 'xlink:href': `#icon-${this.icon}`
  25.               }
  26.             })
  27.           ])
  28.           children.push(icon);
  29.         }
  30.         children = children.concat(this.$slots.default)
  32.         console.log(this.$slots.default, children)
  34.         return h(
  35.           'h'+this.leave,
  36.           {
  37.             attrs: {title: this.title}
  38.           },
  39.           children
  40.         )
  41.       }
  42.     })
  43.   }
  44. }
  46. if(window !== undefined && window.Vue) {
  47.   // 插件的使用
  48.   window.Vue.use(MyHeadering)
  49. }
  51. 插件的使用
  53. <div id="app">
  54.   <heading leave="1" title="12331" icon="shop">{{title}}</heading>
  55. </div>
  57. <script src="../vue.js"></script>
  58. <script src="plugin/headering.js"></script>
  60. <script>
  62.   new Vue({
  63.     el: '#app',
  64.     data: {
  65.       title: '购物车'
  66.     }
  67.   })
  68. </script>