上海高端工作室网站简述网络营销的八大职能

上海高端工作室网站,简述网络营销的八大职能,wordpress的mysql,做视频找素材的网站有哪些#x1f4dd; 用 Vue 开发 Todos 任务清单 你有没有过这样的经历#xff1f;想做个简单的任务清单#xff0c;结果写着写着就陷入了 “找 DOM、改 DOM、DOM 又乱了” 的死循环#x1f92f;#xff1f;今天咱们就来聊聊#xff0c;从传统 JS 的 “手动搬砖” 到 Vue 的 “… 用 Vue 开发 Todos 任务清单你有没有过这样的经历想做个简单的任务清单结果写着写着就陷入了 “找 DOM、改 DOM、DOM 又乱了” 的死循环今天咱们就来聊聊从传统 JS 的 “手动搬砖” 到 Vue 的 “数据驱动躺平”开发一个 Todos 任务清单到底能有多爽 一、传统做法被 DOM 支配的恐惧先回忆一下没学 Vue 的时候咱们是怎么写任务清单的就像demo.html里展示的那样全程被 DOM 牵着鼻子走html!-- 传统JS操作DOM示例 -- h2 idapp/h2 input typetext idtodo-input script const app document.getElementById(app); const todoInput document.getElementById(todo-input); todoInput.addEventListener(change, function(event) { const todo event.target.value.trim(); if(!todo) { console.log(请输入任务); return; } app.innerHTML todo; }); /script这段代码翻译成人话就是先费劲吧啦找到h2和输入框getElementById然后监听输入框的变化addEventListener拿到输入内容后再手动把内容塞给h2innerHTML。这还只是改个标题要是想加个列表、弄个复选框、统计完成数量… 光是想想那些appendChild、removeChild就头大传统 DOM 编程就像用手一块块砌砖每加一块砖改一个元素都得亲自搬、亲自放稍有不慎就砌歪了DOM 结构乱了。效率低不说还特别容易出错 —— 这大概就是前端开发者早期的 “工伤” 吧。✨ 二、响应式数据驱动让数据自己 “动” 起来Vue 的出现直接把我们从 “搬砖工地” 拉到了 “全自动生产线”它的核心思想就是响应式数据驱动界面—— 简单说就是你只管管好数据界面怎么变Vue 替你操心。1、什么是响应式数据驱动就像你在手机上改了通讯录名字通话记录里的名字会自动更新一样数据变了依赖这个数据的界面元素会 “聪明地” 自动更新完全不用你手动操作 DOM。2、为啥非要用它省脑子不用记哪个 DOM 元素对应哪个数据不用写一堆xxx.innerHTML性能好Vue 会智能追踪数据变化只更新需要改的地方比手动操作 DOM 高效多了好维护数据逻辑和界面展示分开代码像整理好的衣柜而不是堆成山的衣服3、Vue 怎么实现响应式数据驱动Vue 不会自动监控所有数据需要你用专属 API 把普通数据 “包装” 成响应式数据常用的就是ref和reactive1 ref给基本类型数据字符串 / 数字装监控适合单个值比如标题、数量底层是 “把基本类型包成对象再用 Proxy 监控”javascriptimport { ref } from vue; // 普通字符串 → 响应式数据带.value的包装对象 const title ref(Todos任务清单); // 修改时必须用.value因为是包装对象 title.value 我的今日计划; // 修改后所有依赖title的界面元素h2、输入框自动更新2 reactive给对象 / 数组装监控适合复杂数据比如任务列表、用户信息直接返回 Proxy 代理对象不用.valuejavascriptimport { reactive } from vue; // 普通数组 → 响应式数组 const todos reactive([{ id:1, title:打王者, done:false }]); // 直接修改不用.value todos.push({ id:2, title:学Vue }); 小技巧Todos 案例里用ref包裹数组也能行const todos ref([])本质是 ref 自动把数组转成 reactive 的代理对象只是需要.value访问。 三、Todos 任务清单项目Vue 实战秀说了这么多咱们来看看用 Vue 做的 Todos 任务清单长啥样 —— 这可是个 “麻雀虽小五脏俱全” 的经典案例1、项目效果亮个相顶部有个大标题还能通过输入框改双向绑定的魔力✨输入框敲回车就能新增任务keydown.enter 立功了任务列表里的复选框一点任务就会变灰加删除线:class 动态样式任务为空时显示 “暂无计划”有任务时才显示列表v-if/v-else 切换底部有全选按钮还能显示 “已完成数 / 总任务数”computed 计算属性的功劳2、代码速览vuetemplate div h2 !-- 数据绑定 -- {{ title }} /h2 !-- 双向数据绑定 -- !-- v-bind: 的缩写不用addEventListener -- !-- event-name.enter 监听键盘输入当按下回车的时候 -- input typetext v-modeltitle keydown.enteraddTodo !-- 条件渲染指令 -- ul v-iftodos.length !-- key 唯一属性 -- li v-fortodo in todos :keytodo.id input typecheckbox v-modeltodo.done !-- // : v-bind:缩写 js表达式 vue 有一定的学习 api 对用户非常友好好上手 -- span :class{done:todo.done}{{ todo.title }}/span /li /ul div v-else 暂无计划 /div div 全选input typecheckbox v-modelallDone !-- {{ 数据绑定 表达式结果绑定 }} -- !-- {{ todos.filter(todo todo.done).length }} -- {{ active }} / {{ todos.length }} /div /div /template script setup // 业务是界面上要动态展示标题且编辑标题 // vue focus 标题数据业务修改数据余下的dom更新vue 替我们做了 // setup vue3的composition 组合式 API // vue2 options API import {ref,computed} from vue // 响应式数据 const title ref(Todos任务清单); const todos ref([ { id:1, title:打王者, done:false }, { id:1, title:吃饭, done:true } // 睡觉, // 学习Vue ]) // 依赖于todos 响应式数据的 计算属性 // 形式上是函数计算过程结果计算属性返回 // 也是响应式的 依赖todos // computed 缓存性能优化 只有todos 变化时才会重新计算 const active computed(() { return todos.value.filter(todo todo.done).length; }) const addTodo (){ // focus 业务 if(!title.value) { return; } todos.value.push({ id:Math.random(), title: title.value, done:false}); title.value ; } // computed 高级技巧 // get set 属性概念 const allDone computed({ get() { return todos.value.every(todo todo.done); }, set(val) { todos.value.forEach(todo todo.done val); } }) /script style * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #ffc0cb; min-height: 100vh; padding: 20px; font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } #app { background-color: #ffc0cb; min-height: 100vh; } #app div { display: flex !important; flex-direction: column !important; align-items: center; gap: 20px; max-width: 600px; margin: 40px auto; padding: 30px; background-color: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } h2 { font-size: 28px; color: #d63384; margin-bottom: 10px; text-align: center; font-weight: 600; } input[typetext] { width: 100%; padding: 12px 16px; font-size: 16px; border: 2px solid #ffc0cb; border-radius: 10px; outline: none; transition: all 0.3s ease; } input[typetext]:focus { border-color: #d63384; box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.1); } ul { width: 100%; list-style: none; display: flex; flex-direction: column; gap: 12px; } li { display: flex; align-items: center; gap: 12px; padding: 12px; background-color: #fff5f7; border-radius: 10px; transition: all 0.3s ease; } li:hover { background-color: #ffeef2; transform: translateX(5px); } input[typecheckbox] { width: 20px; height: 20px; cursor: pointer; accent-color: #d63384; } span { flex: 1; font-size: 16px; color: #333; transition: all 0.3s ease; } .done { color: #999; text-decoration: line-through; opacity: 0.6; } div[v-else] { text-align: center; color: #999; font-size: 16px; padding: 20px; } div:last-child { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding-top: 20px; border-top: 2px solid #ffeef2; font-size: 16px; color: #666; } div:last-child input[typecheckbox] { margin-right: 5px; } /style 四、代码详解Vue 黑科技大揭秘接下来咱们拆拆看这个项目里藏了哪些 Vue 的 “黑科技”让代码这么简洁又强大核心指令Vue 的 “快捷键”1. 双向数据绑定v-model—— 数据和界面 “手拉手”htmlinput typetext v-modeltitlev-model就像个 “传话筒”输入框里的内容变了title数据会自动跟着变反过来title数据改了输入框显示的内容也会立刻更新。比如你在输入框里敲 “今日计划”上面的h2{{ title }}/h2会同步显示完全不用写额外代码 —— 这就是双向绑定的快乐复选框也能用htmlinput typecheckbox v-modeltodo.done勾选复选框todo.done会变成truetodo.done设为true复选框会自动勾选简直天作之合2. 事件监听v-on缩写—— 给元素装 “感应器”htmlinput typetext keydown.enteraddTodo是v-on:的缩写相当于给元素装了个 “感应器”。这里的keydown.enter表示 当用户在输入框按下回车键时执行addTodo函数 。对比传统 JS 的addEventListener(keydown, ...)Vue 的写法直接把事件和处理函数绑在一起可读性拉满而且还能加修饰符比如.enter只监听回车键不用自己写if(event.key Enter)细节控狂喜3. 条件渲染v-if和v-else—— 界面的 “开关”htmlul v-iftodos.length.../ul div v-else暂无计划/div这对组合就像个智能开关当todos数组有内容todos.length 0就显示ul列表否则显示 “暂无计划”。完全不用手动display: none或者删除 DOMVue 会根据数据自动切换省心到想鼓掌4. 列表渲染v-for—— 批量生产元素的 “复印机”htmlli v-fortodo in todos :keytodo.id.../liv-for就像个复印机能根据数组todos里的每个元素复制出一个li。比如todos有 3 个任务就会生成 3 个li完全不用手动写循环拼字符串这里的:key是个小细节:key是v-bind:key的缩写它给每个元素一个唯一标识让 Vue 能准确识别哪个元素变了更新时更高效 —— 就像给每个学生发个学号点名时不会认错人。核心 APIVue 的 “发动机”1. 响应式 APIref—— 数据的 “超能力”javascriptconst title ref(Todos任务清单); const todos ref([{ id:1, title:打王者, done:false }]);ref能让普通数据拥有 “响应式超能力”。注意哦用ref创建的基本类型数据比如字符串、数字修改时要加.value比如title.value 新标题数组或对象虽然也需要.value但修改内部元素比如todos.value.push(...)时Vue 能自动感知到。有了ref我们再也不用关心 “数据变了怎么更界面”专心处理数据逻辑就行 —— 这就是 Vue 的 “数据驱动” 精髓2. 计算属性computed—— 会 “自动算账” 的工具人javascript// 统计已完成的任务数 const active computed(() { return todos.value.filter(todo todo.done).length; }); // 全选功能 const allDone computed({ get() { return todos.value.every(todo todo.done); }, set(val) { todos.value.forEach(todo todo.done val); } });computed就像个 “自动计算器”它依赖的数据比如todos变了它会自动重新计算结果而且会缓存计算结果不是每次用到都算性能超好active用来统计已完成的任务数依赖todos所以todos里的任务状态变了active会自动更新allDone更厉害是个 “读写两用” 的计算属性get判断是否全选set在全选框变化时批量更新所有任务的状态 —— 几行代码就实现了全选功能简直不要太高效 五、总结Vue 让开发变成 “享受”回顾一下从传统 DOM 编程的 “手动搬砖”到 Vue 的 “数据驱动躺平”Todos 任务清单的开发难度直接降了好几个 level不用再写一堆getElementById、addEventListener专注数据逻辑就行响应式数据让界面自动更新省了 N 行 DOM 操作代码指令v-model、v-for 等和 APIref、computed就像现成的 “零件”拼一拼就出功能其实 Vue 的魅力远不止这些它就像个贴心的助手把复杂的 DOM 操作藏在底层让我们能以更直观、更高效的方式写代码。下次再做项目试试用 Vue 的思路想想 —— 也许你会发现前端开发原来可以这么快乐最后送大家一句话别和 DOM 死磕让数据替你说话Vue 会帮你搞定剩下的一切 下次见