原生 JS：数据和视图「分离」，必须手动同步原生 JS 里，数据是数据，视图是视图，两者完全没关系

一、原生 JS数据和视图「分离」必须手动同步原生 JS 里数据是数据视图是视图两者完全没关系你有一个变量count 100数据页面上有一个span显示 100视图当你点击按钮修改count时必须手动写代码把新的count赋值给span的内容否则页面永远不会变。计数器// 原生JS必须手动做两件事改数据 改视图 addBtn.addEventListener(click, function() { count; // 1. 改数据 countSpan.textContent count; // 2. 手动把数据同步到视图缺一不可 });痛点项目越大DOM 操作越多很容易漏写、写错导致数据和视图不一致维护成本爆炸。二、Vue数据和视图「双向绑定」自动同步Vue 做了一件事把数据和视图「连接」起来建立了响应式关系你把count写在data里Vue 会自动给它加上「响应式监听」页面上的{{count}}会自动「订阅」这个数据的变化当你修改count时Vue 会自动检测到变化立刻更新对应的视图你完全不用写任何 DOM 操作代码。例子!-- 视图{{count}} 自动绑定data里的count -- span{{count}}/span button clickcount/buttondata: { count: 100 // 数据Vue自动监听它的变化 }优势关心「改数据」Vue 自动帮你「更视图」彻底解放了 DOM 操作代码量少、逻辑清晰、不会出错。三、一句话总结背下来就是核心原生 JS数据改了视图不会自己变必须手动写代码把数据「写」进视图里。Vue数据改了视图自动跟着变因为 Vue 在数据和视图之间搭了一座「自动同步的桥」。补充Vue 的「双向绑定」到底是什么理解成data里的数据是「源」页面上的视图是「镜像」源变了镜像自动变数据驱动视图如果是表单输入镜像变了源也自动变视图驱动数据比如v-model这就是 Vue 能成为前端主流框架的核心原因之一彻底解决了原生 JS 手动操作 DOM 的痛点。vue常用的v-bind绑定用:省略并且img的src加上:可以比绑定data的数据url集合等vue常用的v-show正常用true/falsevie常用的v-on绑定事件省略用并且可以直接click函数名(参数)v-if -else常用时候加参数true/false