随笔分类 -  vue

vue—组件(2)单文件组件
摘要:原文链接:vue—组件(2)单文件组件 – 每天进步一点点 上一篇文章介绍了vuejs中非单文件组件,这篇文章介绍一下单文件组件。 单文件组件需要用到vue脚手架,可以参考前面的文章:vue3.0(1)—项目搭建 – 每天进步一点点 (longkui.site) 1.默认组件 我们通过脚手架创建了一 阅读全文

posted @ 2024-10-28 14:50 longkui 阅读(13) 评论(0) 推荐(0) 编辑

vue(vue.js)—组件(1)非单文件组件
摘要:原文连接:vue(vue.js)—组件(1)非单文件组件 – 每天进步一点点 现在流行的前端框架都支持组件化开发,什么是组件呢?试想一个场景,你开发了一个系统,系统中有一个修改密码的功能,点击后弹出一个小窗口,然后修改密码。 系统中一共有5个页面需要用到这个功能,按照以前的做法是把写完的代码复制份, 阅读全文

posted @ 2024-10-28 14:49 longkui 阅读(27) 评论(0) 推荐(0) 编辑

vue(vue.js)—生命周期(3)
摘要:原文链接:vue(vue.js)—生命周期(3) – 每天进步一点点 这篇文章简单介绍一下,生命周期中的销毁周期。 一般是调用了vm中的destroy方法时,才会执行销毁流程。 beforeDestroy,此时vm中所有的data、methods、指令等等,都处于可用状态,马上要执行销毁过程,一般在 阅读全文

posted @ 2024-10-22 15:50 longkui 阅读(6) 评论(0) 推荐(0) 编辑

vue(vue.js)—生命周期(2)
摘要:原文链接:vue(vue.js)—生命周期(2) – 每天进步一点点 这篇文章简单介绍一下数据的更新流程,过程及其简单。 主要是两个函数,beforeUpdate、updated 触发这个的原则就是:data中的数据发生了变化。b 当data中数据发生变化时,beforeUpdate函数首先响应,此 阅读全文

posted @ 2024-10-22 15:49 longkui 阅读(6) 评论(0) 推荐(0) 编辑

vue(vue.js)—生命周期(1)
摘要:原文链接:vue(vue.js)—生命周期(1) – 每天进步一点点 vue也有自己的生命周期。数据初始化的生命周期如下: beforeCreate、created、beforeMount、mounted 1.beforeCreate 此时,无法通过vm访问data中的数据,methods中的方法。 阅读全文

posted @ 2024-10-20 20:42 longkui 阅读(6) 评论(0) 推荐(0) 编辑

vue(vue.js)—自定义指令
摘要:原文链接:vue(vue.js)—自定义指令 – 每天进步一点点 vue中的自定义指令就是把原生的dom一些操作进行封装。 1.函数形式 需求:我们定义一个v-mult指令,和v-text类似,但是会将绑定的值翻倍。 在vue中,用directives自定义函数,比如下面这样: <!DOCTYPE 阅读全文

posted @ 2024-10-20 20:28 longkui 阅读(14) 评论(0) 推荐(0) 编辑

vue(vue.js)—内置指令v-cloak、v-once、v-pre
摘要:原文链接:vue(vue.js)—内置指令v-cloak、v-once、v-pre – 每天进步一点点 1.v-cloak 情景:请求服务器资源的时候,服务器资源有可能延时响应,这时候,vue无法加载一些数据,比如下面这种情况, <div id="root"> <div>你好,{{name}}<di 阅读全文

posted @ 2024-10-20 20:26 longkui 阅读(44) 评论(0) 推荐(0) 编辑

vue(vue.js)—内置指令v-text、v-html
摘要:原文链接:vue(vue.js)—内置指令v-text、v-html – 每天进步一点点 (longkui.site) 1.v-text v-text指令的基本功能是向其所在的标签中插入文本内容,需要注意的是,v-text会替换掉整个div的内容,实际开发中用的不多, 1 2 3 4 5 6 7 8 阅读全文

posted @ 2024-10-18 20:19 longkui 阅读(17) 评论(0) 推荐(0) 编辑

vue(vue.js)—过滤器
摘要:原文链接:vue(vue.js)—过滤器 – 每天进步一点点 (longkui.site) vue中的过滤器是对要显示的数据进行特定格式化后进行显示。比如最常用的保留两位小数,我们就可以用过滤器实现,它并没有改变原始数据的值,只是通过新的方式显示出来。功能类似于angular中的管道。 对于过滤器要 阅读全文

posted @ 2024-10-18 20:17 longkui 阅读(4) 评论(0) 推荐(0) 编辑

vue(vue.js)—列表排序
摘要:原文链接:vue(vue.js)—列表排序 – 每天进步一点点 (longkui.site) 上一篇文章中,我们介绍了vue的列表过滤:vue(vue.js)—列表过滤 – 每天进步一点点 (longkui.site) 这篇文章简单介绍一下,列表排序,这个一般是后端返回的jso直接排好序,当然,前端 阅读全文

posted @ 2024-10-16 09:46 longkui 阅读(74) 评论(0) 推荐(0) 编辑

vue(vue.js)—列表过滤
摘要:原文链接:vue(vue.js)—列表过滤 – 每天进步一点点 (longkui.site) 列表过滤可以认为是模糊搜索。实现的下面的这种效果: 1.监视属性watch实现 参考代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" 阅读全文

posted @ 2024-10-14 20:15 longkui 阅读(78) 评论(0) 推荐(0) 编辑

vue(vue-js)—列表渲染(v-for)
摘要:原文链接:vue(vue-js)—列表渲染(v-for) – 每天进步一点点 (longkui.site) 列表渲染是前端经常用到的代码,在vue中用v-for做列表渲染。 1.基础用法 首先我们构造一个json数据, [ { "name":"张三1", "sex":"男", "age":12 }, 阅读全文

posted @ 2024-10-14 20:14 longkui 阅读(10) 评论(0) 推荐(0) 编辑

vue(vue.js) —条件渲染(v-if、v-show)
摘要:原文链接:vue(vue.js) —条件渲染(v-if、v-show) – 每天进步一点点 (longkui.site) 1.v-show v-show是控制元素隐藏与删除的语句,基础用法如下: <div v-show='true'>我是第一个div</div> <div v-show='false 阅读全文

posted @ 2024-10-14 20:12 longkui 阅读(32) 评论(0) 推荐(0) 编辑

vue(vue.js) 计算属性
摘要:原文链接:vue(vue.js) 计算属性 – 每天进步一点点 (longkui.site) 0.案例 一个需求,将一个人姓和名 拼接起来,但是这个人的姓或者名比较长,有可能需要裁剪,但是不希望在HTML中写的太复杂。 比如,出来现实这个人的姓名以外,要求将这个人的姓名中的大小写反转,截取前3位,将 阅读全文

posted @ 2022-09-02 15:21 longkui 阅读(155) 评论(0) 推荐(0) 编辑

vue(vue.js)中的键盘事件
摘要:原文链接:这里 0.前言 前面一篇文章中,主要介绍了vue中click事件。这篇文章中,简单介绍下vue中的键盘事件。 1.键盘事件(基础) 常见的键盘事件有keyup和keydown。keydown意为按下按键触发,keyup意为抬起按键触发。 实现简单功能:当用户按下回车按键时,触发一个事件。 阅读全文

posted @ 2022-02-02 15:17 longkui 阅读(1026) 评论(0) 推荐(0) 编辑

vue(vue.js)中的click事件及常见的事件修饰符
摘要:原文链接:这里 0.前言 需求:用户点击按钮,现实浏览器弹窗。 1.基础写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e 阅读全文

posted @ 2022-02-02 15:12 longkui 阅读(4404) 评论(0) 推荐(0) 编辑

vue中的数据绑定
摘要:原文链接:这里 0.前言 vue中的数据绑定分为单向数据绑定和双向数据绑定。 单向数据绑定指的是data中的数据可以改变页面的数据,而页面数据的改变不能影响data中的数据。 双向数据绑定指的是可以互相影响。 1.单向数据绑定 <!DOCTYPE html> <html lang="en"> <he 阅读全文

posted @ 2022-02-02 15:11 longkui 阅读(431) 评论(0) 推荐(0) 编辑

vue中的循环语法(v-for)
摘要:原文链接:这里 0.前言 前面的文章中介绍的vue.js的v-if和v-show的简单用法,这篇文章中简单介绍下vue中循环语法。 1.基础用法 参考代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ht 阅读全文

posted @ 2022-02-02 15:10 longkui 阅读(391) 评论(0) 推荐(0) 编辑

vue中的v-if语法和v-show语法
摘要:原文链接:这里 0.前言 前面文章中介绍了vue中的模板语法,这篇文章中介绍一下vue中的if的用法。 1.基础用法 基础用法代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=" 阅读全文

posted @ 2022-02-02 15:09 longkui 阅读(504) 评论(0) 推荐(0) 编辑

vue中的模板语法
摘要:原文链接:这里 0.前言 vue中的模板语法分为插值语法和指令语法。 1.插值语法 插值语法就是我们常见的花括号。比如下面的代码,用花括号括起来的name和msg1就是插值语法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 阅读全文

posted @ 2022-02-02 08:29 longkui 阅读(101) 评论(0) 推荐(0) 编辑

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示