Vue基础---->VueJS的使用(二)
2023-09-27 14:20:11 时间
组件(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
友情链接
相关文章
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- vue.js--基础 v-bind绑定属性使用
- vue基础篇---修改对象或数组的值,页面实时刷新
- axios基础学习——通过 Vue + axios 获取接口数据的小demo
- Vue基础入门小demo——记事本
- CSDN日报191120:《吊打面试官》系列-消息队列基础;Vue + Spring Boot 项目实战
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- 《JavaWeb篇》12.VUE&Element看这一篇就够了
- 【GIS】Vue、Leaflet、highlightmarker、bouncemarker
- vue引入mock的json数据
- vue对象追加对象
- vue各种插件汇总
- Vue axios 详细介绍(核心使用、封装、个性化配置,破万字)
- Vue知识点总结(3)——v-bind(超级详细)
- vue之基础---组件基础
- vue实战入门基础篇九:从零开始仿门户网站实例-移动端界面适配
- vue-router4之嵌套路由
- vueX、vue中transition的使用、axios
- 浅析Vue中的2种错误处理方式、源码分析及2种错误捕获流程
- vue里ref ($refs)用法
- 【一天时间|vue基础】vue组件间通信
- vue基础八(路由组件)
- vue项目打包后字体文件路径出错的解决办法
- 全局安装 Vue cli3 和 继续使用 Vue-cli2.x