【Vue】vue3数据绑定
2023-04-18 12:37:16 时间
文章目录
Vue2
分析当前应用环境
企业老项目要用,还是需要掌握的
类型项目
vue2为主,感兴趣可以了解
代码结构
mounted生命周期函数,页面加载完
vue3取代生命周期函数的应用
效果图
import { defineComponent, onMounted} from 'vue'; // vue3从这里引入生命周期函数
import axios from 'axios'; // 1引入库
export default defineComponent({
name: 'Home',
setup(){ // 2初始化方法
console.log("setup")
onMounted(()=>{ // vue3的生命周期函数使用
console.log("onMounted")
axios.get("http://localhost:8081/hello").then((res)=>{
console.log("这是请求返回的数据", res)
});
})
}
});
</script>
vue3
响应式ref()数据绑定
vue3新的ref() 绑定响应数据方式 响应式:js修改数据,前端也会随之变更
返回值,代码好引用
前端展示数据
响应式reactive()数据绑定
返回数据
数据渲染
比较两者
reactive比较麻烦,ref()每次赋值要.value 建议风格统一便于维护,ref()
相关文章
- 直接在代码里面对list集合进行分页
- .NET Framework 4.5新特性详解
- 大数据的简要介绍
- 大数据的由来
- 高斯混合模型的自然梯度变量推理
- timing-wheel 仿Kafka实现的时间轮算法
- 使用Navicat软件连接自建数据库(Linux系统)
- 那一天,我被Redis主从架构支配的恐惧
- Redis 深入了解键的过期时间
- C#使用委托调用实现用户端等待闪屏
- 基于流计算 Oceanus 和 Elasticsearch Service 构建百亿级实时监控系统
- GRAND | 转录调控网络预测数据库
- JFreeChart API中文文档
- 临床相关突变查询数据库
- TIGER | 人类胰岛基因变化查询数据库
- 视频边缘计算网关EasyNVR在视频整体监控解决方案中的应用分析
- Apache Arrow - 大数据在数据湖后的下一个风向标
- 常见的电商数据指标体系
- AKShare-艺人数据-艺人流量价值
- MySQL中多表联合查询与子查询的这些区别,你可能不知道!