题外话：
npm install -g express-generator
npm安装express框架

封装复用

Vue中关于封装复用的内容，属于Vue中的进阶知识，在实战中对开发者的抽象和泛化能力有一定的要求。

.3.1 过滤器

filters选项用于定义在当前组件或实例作用域中可用的过滤器，可在双括号插值（Mustache语法）中添加在Javascript表达式的尾部，以管道符号“|”与表达式隔开，表达式的值将作为参数传入filter中。下面来看一段示例代码：

<body>
<div id="app"><h1>{{ title }}</h1><h2>{{ title | supplyTitle1 }}</h2><!-- 存在多个filter时，将从左向右执行 --><h3>{{ title | supplyTitle1 | supplyTitle2 }}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">let vm = new Vue({el: '#app',data () {return {title: 'Test#%for#%Filter.'}},filters: {supplyTitle1 (value) {  // 表达式的值将作为形参传入console.log('Supply Title 1')return value.replace(/#/g, ',')},supplyTitle2 (value) {console.log('Supply Title 2')return value.replace(/%/g, '   ')}}})
</script></body>

当存在多个filter时，Vue将从左向右执行过滤，并将上一次过滤的结果作为下一次过滤的输入值。 除在组件中定义filter之外，Vue还允许开发者在全局定义filter，全局filter的使用方法与选项filter一致，定义的方法如以下代码：

<body>
<div id="app"><h1>{{ title }}</h1><h2>{{ title | title1 }}</h2><!-- 存在多个filter时，将从左向右执行 --><h3>{{ title | title1 | title2 }}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">Vue.filter('title1',value=>{console.log('title1')return value.replace(/#/g,' ')})Vue.filter('title2',value=>{console.log('title2')return value.replace(/%/g,' ')})//表达式的值将作为形参传入let vm = new Vue({el: '#app',data () {return {title: 'Test#%for#%Filter.'}},</script>

与选项filter不同，全局filter可以在任何组件和实例中起作用。

3.2自定义指令

在之前的章节中，我们接触过一些Vue提供的“开箱即用”的指令，如v-bind、v-on、v-model等。除了这些指令外，Vue也允许我们使用一些自定义的指令。在组件和实例中，这些自定义指令应该被声明在directives选项中。
Vue为自定义指令提供了如下几个钩子函数（均为可选）： ●bind：指令与元素绑定时调用。
●inserted：指令绑定的元素被挂载到父元素上时调用。 ●update：指令所在VNode更新时调用，可能发生在其子VNode更新之前。
●componentUpdated：指令所在VNode及其子VNode全部更新后调用。
●unbind：指令与元素解绑时调用
同时，钩子函数会被传入以下参数：
●el：指令所绑定元素，可用于操作DOM。
●binding：包含指令相关属性的对象。binding包含以下属性：
●name：指令名称。
●value：指令绑定的值，如在v-some=“22”中，绑定值为4。
●oldValue：指令值改变前的值，仅在update和componentUpdated钩子函数中可用。
●expression：字符串类型的指令表达式，如在v-some=“22”中，值为“2*2”。
●arg：传给指令的参数，如在v-some:someValue中，值为“someValue”。
●modifiers：修饰符对象，如在v-some.upper中，值为{upper: true}。
●vnode：虚拟节点。
●oldNode：虚拟节点更新前的值，仅在update和componentUpdated钩子函数中可用。
下面笔者将演示一个相关示例，同学们可以参照着示例进行理解，示例代码如下：

<body>
<div id="application"><h1 v-some.upper>{{ title }}</h1><h2 v-some.lower>{{ title }}</h2><h3 v-style="style">{{ title }}</h3><button @click="handlestyle">进行修改v-style的值(＾Ｕ＾)ノ~ＹＯ~~ </button></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">let vm = new Vue({el:'#application',data(){return {title:'this is for directive',style:{fontStyle:'italic'}}},methods:{handlestyle(){this.$set(this.style,'color','#c3e330')this.$set(this.style,'transform','rotateX(45deg)')}},directives:{style: //用于为节点绑定样式{bind(el, binding, vnode) {console.log('%c-----bind参数:el,binding,vnode-----', 'font-size:18px;')console.log('%o\n\n%o\n\n%o',el,binding,vnode)let styles=binding.value //获取指令绑定的值Object.keys(styles).forEach(key => el.style[key]=styles[key])},update(el,binding,vnode,oldVnode){console.log('%c----updateCanshu :el,bind,vnode,oldVnode----','font-size: 18px;')console.log('%o\n\n%o\n\n%o\n\n%o', el, binding, vnode, oldVnode)let styles=binding.valueObject.keys(styles).forEach(key => el.style[key] = styles[key])}},// 在bind和update时触发相同行为，且无需定义其他钩子函数// 指令可以简写为以下形式some (el, binding) {let text = el.innerTextlet modifiers = binding.modifiersif (modifiers.upper) {  // 如果带有upper后缀，则大写文本el.innerText = text.toUpperCase()}if (modifiers.lower) {  // 如果带有lower后缀，则小写文本el.innerText = text.toLowerCase()}}}})
</script>
</body>

点击按钮：

3.3组件的注册

组件的注册 components选项用于为组件注册从外部引入的组件，由于子组件并非在全局定义，因此不可以直接在父组件的作用域内使用。选项常见的应用场景有引入第三方库中的组件和自定义组件等。下面来看一段示例代码：

<div id="app"><easy-title></easy-title><easy-wish></easy-wish><easy-motto></easy-motto></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script type="text/javascript">let EasyTitle = {  // EasyTitle组件name: 'EasyTitle',template: '<h1>大器当成</h1>'}
let EasyMotto = {  // EasyMotto组件
name: 'EasyMotto',
template: '<p>过一方水土，历一番人事，方知天地不仁，万物刍狗</p>'
}
let EasyWish = {  // EasyWish组件
name: 'EasyWish',
template: '<p>白发渔樵隐深山，浮名穷利岂愿沾。</p>'
}
let vm = new Vue({  // Vue实例
el: '#app',
components: { EasyTitle, EasyMotto, EasyWish }
})
</script>

在这个示例中定义了EasyTitle、EasyWish和EasyMotto三个组件，并使用components选项将其注册到实例中。在vue-devtools中，我们可以看到组件的结构。

与components选项相似，mixins（混入）选项也用于注册在外部封装好的代码，不过这些代码更加碎片化，并不如组件一样成体系，混入的目的在于灵活地分发组件中一些可复用的功能。 mixins可以将一些封装好的选项混入另一个组件中。在混入过程中，如果没有发生冲突，则执行合并；如果发生冲突且用户没有指定解决策略，Vue将采用默认策略

  <style>#app {color: #2c3e50;font-family: Roboto, sans-serif;}.label {display: inline-block;min-width: 160px;}</style><div id="app"><h1>{{ title }}</h1><p><strong class="label">Text:</strong>{{ text }}</p><p><strong class="label">Plus Text:</strong>{{ plusText }}</p><p><strong class="label">Upper Text:</strong>{{ text | supplyUpper}}</p><button @click="toggleText">切换文本</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script><script type="text/javascript">// 强耦合，需要被混入组件的data根节点中包含text属性let mixin = {data () {return {title: 'Test for mixin'}},mounted () {console.log('mixin mounted')},methods: {toggleText () {this.text = 'mixin text'}},computed: {plusText () {  // 此处需要创建函数作用域以使this指向Vue实例return '+ ' + this.text + ' +'}},filters: {  // 选项过滤器supplyUpper: value => value.toUpperCase()},watch: {  // 监听器text (value) {console.log('mixin text: ' + value)}}}let vm = new Vue({el: '#app',mixins: [ mixin ],data () {return {title: 'A Title',text: 'which one?'}},mounted () {console.log('instance mounted')},methods: {toggleText () {this.text = 'instance text'}},watch: {text (value) {console.log('instance text: ' + value)}}})</script>

可以看到，组件合并了mixin混入的选项。在处理data选项冲突时，Vue选用了组件数据；在处理mounted钩子函数时，Vue先行调用mixin的钩子函数，同时，Vue也将mixin中的computed和filters选项合并到组件中。
点击按钮以后，**mixin和组件的watch方法都被调用，**这意味着Vue在处理watch选项时，采用了和处理mounted等钩子函数一样的策略。

笔记三 vue中封装复用过滤器自定义组件 vue中component选项相关推荐

Vue自定义组件 Vue.component
Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教 ...
Vue Tooltip封装全局问号提示组件
前言我们经常在网站看到一个小问号鼠标放上去会出现一段文字,移开文字消失.起到一个提示功能. 它其实是Tooltip + icon 实现的,但是有一个小问题,就是修改背景颜色和文字颜色不生效. 其实是 ...
[vue] 你有写过自定义组件吗？
[vue] 你有写过自定义组件吗? 写过,随便说点组件的引入问题.注册问题.传值问题吧个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
amazeui学习笔记二（进阶开发2）--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
Vue第四章过滤器、组件、插槽、props组件属性、生命周期、监听器(内含详细代码解释)
目录一.过滤器二.组件三.插槽四.props组件属性五.生命周期六.监听器每日一句一.过滤器新的配置项 filters: 用于存放过滤器, 配合 {{ value | 过滤器 }} ...
vue 关闭弹如何销毁子组件_vue中的eventBus会产生内存泄漏吗
eventBus是在vue中经常用来解决跨组件消息传递的问题,但对它的使用要特别注意,否则会产生很严重的后果. 引入本文介绍了eventBus的实现原理,并介绍它如何在vue中使用,并举了一个具体的 ...
初探 amaze-vue（基于vue.js封装的Amaze UI 组件库）
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
ASP.NET中实现复用代码自定义用户控件UserControl的使用
场景 ASP.NET中新建Web网站并部署到IIS上(详细图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199 ...
Python爬虫urllib2笔记(三)之使用正则表达式提取百度贴吧网页中的楼主发的图片
使用正则表达式提取百度贴吧网页中的楼主发的图片 # -*- coding:utf-8 - import re #正则模块 import urllib2 import urllib#使用正则表达式提取百 ...

笔记三 vue中封装复用过滤器自定义组件 vue中component选项

封装复用

.3.1 过滤器

3.2自定义指令

3.3组件的注册

笔记三 vue中封装复用过滤器自定义组件 vue中component选项相关推荐

最新文章

热门文章

笔记三 vue中封装复用 过滤器 自定义组件 vue中component选项

封装复用

.3.1 过滤器

3.2自定义指令

3.3组件的注册

笔记三 vue中封装复用 过滤器 自定义组件 vue中component选项相关推荐

最新文章

热门文章

笔记三 vue中封装复用过滤器自定义组件 vue中component选项

笔记三 vue中封装复用过滤器自定义组件 vue中component选项相关推荐