当前位置: 首页 > news >正文

【Vue】核心特性(响应式)

响应式: 数据变化,视图自动更新

接下来使用一个例子来体现一下什么是响应式

案例一:

访问数据,视图自动更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器  -->
<div id="app"></div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>var  app=new Vue({el:'#app',data:{str1:'hello',str2:'你好'}});
</script>
</body>
</html>

ctrl + shift +j 打开控制台模拟一下响应式变化

 

 

访问谁就会产生相应的变化

案例二:

修改数据,视图自动更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器  -->
<div id="app">
{{msg}}</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>var  app=new Vue({el:'#app',data:{msg:'你好'}});
</script>
</body>
</html>

修改前 

通过控制台改变数据,可以看到视图随着数据的变化而自动更新

 

 

http://www.lryc.cn/news/240662.html

相关文章:

  • ESP32 http 请求
  • 【C++】拷贝构造函数,析构函数详解!
  • qml ParticleSystem3D使用介绍
  • 集团投融资大数据平台解决方案
  • 深信服技术认证“SCSA-S”划重点:渗透测试工具使用
  • CCFCSP试题编号:201803-2试题名称:碰撞的小球
  • 《安富莱嵌入式周报》第327期:Cortex-A7所有外设单片机玩法LL/HAL库全面上线,分享三款GUI, PX5 RTOS推出网络协议栈,小米Vela开源
  • 面试官:【js多维数组扁平化去重并排序】
  • C#编程题分享(3)
  • Redis下载和安装(Windows系统)
  • MySQL数据库:开源且强大的关系型数据库管理系统
  • 如何在AD的PCB板做矩形槽孔以及如何倒圆弧角
  • SpringMVC日志追踪笔记整理
  • UML建模图文详解教程06——顺序图
  • 睡前随笔记录
  • 微服务学习|Feign:快速入门、自定义配置、性能优化、最佳实践
  • 使用【画图】软件修改图片像素、比例和大小
  • DevOps 事后分析
  • fastdfs-client-java-1.30 maven 打包安装
  • 【视觉SLAM十四讲学习笔记】第三讲——旋转矩阵
  • Linux驱动开发笔记(四):设备驱动介绍、熟悉杂项设备驱动和ubuntu开发杂项设备Demo
  • C/C++ 实现Windows注册表操作
  • nginx 模块相关配置及结构理解
  • 同时创建多个websoket(初始化多个连接、断开的重连、每个连接定时发消息、每个连接存储接收的数据(vuex或者pinia))
  • C语言——指针(一)
  • 学习量化交易如何入门?
  • CSS3动画
  • 黑马点评-10实现用户点赞和点赞排行榜功能
  • Spring配置其他注解Spring注解的解析原理
  • TypeScript 学习笔记 第一部分 语法基础