组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。今天我们就来学习一下。回忆永远是惆怅。愉快的使人觉得：可惜已经完了，不愉快的想起来还是伤心。
vue中的重要特性
一、vue中的自定义组件
html的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue1</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="app"> <my-component my-name="huhx"></my-component> </div> <script type="text/javascript" src="js/vue3.js"></script> </body> </html>
vue3.js的代码：
// 定义 var MyComponent = Vue.extend({ template: '<div>A custom component!{{myName}}</div>', props: ['myName'] }) // 注册 Vue.component('my-component', MyComponent); // 创建根实例 var ap = new Vue({ el: '#app', })
运行效果如下：
二、vue中的自定义指令
html的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue4</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="app"> <div v-my-directive="someValue">{{msg}}</div> </div> <script type="text/javascript" src="js/vue4.js"></script> </body> </html>
vue4.js:
Vue.directive('my-directive', {
bind: function() {
// 准备工作
console.log("bind function.");
},
update: function(newValue, oldValue) {
// 值更新时的工作
console.log("new: " + newValue + ", old: " + oldValue);
},
unbind: function() {
// 清理工作
console.log("unbind function.");
}
});
var demo = new Vue({
el: '#app',
data: {
msg: 'hello!'
}
})
运行的效果:
console打印的日志：
bind function. new: undefined, old: undefined
三、vue中的自定义过滤器
html的代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue5</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="app"> <span v-text="message | reverse"></span> </div> <script type="text/javascript" src="js/vue5.js"></script> </body> </html>
js的代码如下：
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
});
var demo = new Vue({
el: '#app',
data: {
message: 'hello!'
}
});
运行的效果如下：
四、修改上述的过滤器，使它可以处理value为空时，返回一个默认期待的数值。
- js的代码：
Vue.filter('reverseFilter', function(string, defaultValue) {
if (!string) {
return defaultValue;
}
return string.split('').reverse().join('');
});
html的代码：页面显示为hello world
<div> {{testFilter | reverseFilter('hello world')}} </div> data() { return { testFilter: null, } }
关于vue中过滤器的详细讲解，可以参考博客：https://zhuanlan.zhihu.com/p/27445461