首页 > 代码库 > Vue基础---->VueJS的使用(二)
Vue基础---->VueJS的使用(二)
组件（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!‘ }});
运行的效果如下：
友情链接
Vue基础---->VueJS的使用(二)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。