vue原理实现
2023-02-18 16:29:44 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue双向数据绑定原理和模拟</title> </head> <body> <input type="text" id="userName"> <br> <span id="uName"></span> </body> </html> <script type="text/javascript"> var obj = { pwd:"123456" } Object.defineProperty(obj,"userName",{ get:function() { console.log('get init') }, set:function(val){ console.log('set init') document.getElementById("uName").innerText = val; document.getElementById("userName").value = val; } }) document.getElementById("userName").addEventListener("keyup",function(event){ obj.userName = event.target.value; }) </script>
vue两大特征
数据驱动
组件化
vue框架对比
-vue
模板和渲染函数的弹性选择
简单的语法和项目创建
更快的渲染速度和更小的体积
-React
更适用于大型应用和更好的测试性
同时适用于web端和原生app
更大的生态圈带来更多的支持和工具
-相同点
利用虚拟dom实现快速渲染(2.0)
轻量级
响应式组件
支持服务端渲染(vue ssr)
易于集成路由工具 打包工具以及状态管理
相关文章
- Kotlin学习快速入门(12)—— 位运算符
- Spring Boot命令指定环境启动jar包
- Window系统的mysql数据库定时备份
- 【开源库推荐】#4 Poi-办公文档处理库
- Kotlin学习快速入门(11)—— 枚举类的使用
- TornadoFx的TableView组件使用
- Mp3文件标签信息读取和写入(Kotlin)
- Maven项目不同jar包相同类名的引用问题
- Libgdx游戏开发(2)——接水滴游戏实现
- Libgdx游戏开发(1)——环境配置及demo运行
- Jetpack架构组件学习(4)——APP Startup库的使用
- Kotlin学习快速入门(10)—— 重载运算符使用
- Kotlin学习快速入门(9)—— 密封类的使用
- Jetpack Compose学习(9)——Compose中的列表控件(LazyRow和LazyColumn)
- Jetpack Compose学习(8)——State及remeber
- Kotlin学习快速入门(8)—— 委托
- Kotlin学习快速入门(7)——扩展的妙用
- Jetpack架构组件学习(3)——Activity Results API使用
- TornadoFx实现侧边栏菜单效果
- TornadoFx中的css美化