响应式网站示例,网站的建设分析,北海教网站建设,免费企业查询目录 前言Vue基础语法1.事件绑定指令2.条件渲染指令v-show和v-if指令v-else和v-else-if指令 3.列表渲染指令扩展#xff1a;v-for中的key 前言
hi#xff0c;这个系列是我自学开发的笔记#xff0c;适合具有一定编程基础#xff08;html、css那些基础知识要会#xff01;… 目录 前言Vue基础语法1.事件绑定指令2.条件渲染指令v-show和v-if指令v-else和v-else-if指令 3.列表渲染指令扩展v-for中的key 前言
hi这个系列是我自学开发的笔记适合具有一定编程基础html、css那些基础知识要会的同学有问题及时指正
Vue基础语法
1.事件绑定指令 在 Vue.js 中事件绑定是一种常用的技术用于响应用户的交互动作如点击、输入等。Vue 提供了 v-on 或 语法糖来进行事件绑定。 例子
bodydiv idapph3count的值为{{count}}/h3button v-on:clickaddCount1/buttonbutton clickcount11/button/divscriptconst vm {data : function(){return {count:0,}},methods:{addCount(){this.count1}} }const app Vue.createApp(vm)app.mount(#app)/script
/body运行结果
button v-on:clickaddCount1/button这里使用了 v-on:click 指令来监听按钮的点击事件。当按钮被点击时addCount 方法会被调用。addCount 方法会将 count 数据属性的值增加 1。button clickcount11/button这是 v-on 的语法糖它提供了一个更简洁的 click 表达式来进行事件绑定。与第一个按钮的效果相同当这个按钮被点击时count 数据属性的值会增加 1。
总结一下这两个按钮都绑定了 click 事件当它们被点击时都会触发增加 count 数据属性的值的操作。第一个按钮使用了方法绑定而第二个按钮直接在 click 表达式中进行了操作两者的效果都是相同的都会使 count 值增加 1。 需要注意的是直接在模板中修改数据属性如第二个按钮中的 count1并不是 Vue 推荐的做法。更好的方式是使用方法来修改数据因为这样可以使代码更清晰。
PS.语法糖是什么意思 “语法糖”是计算机科学中的一个术语它指的是一种编程语言特性它并不提供新的功能而是提供了更简洁、更易于理解和使用的语法形式来执行常见的操作。这种语法形式并不影响底层的实现它只是为了方便开发者。 在 Vue.js 中 符号是 v-on: 的语法糖。它们的作用是完全相同的都用于事件绑定。click“handler” 可以看作是 v-on:click“handler” 的简化形式。 2.条件渲染指令
v-show和v-if指令 在 Vue.js 中条件渲染指令用于根据表达式的真假来动态地显示或隐藏元素。Vue 提供了两个主要的条件渲染指令v-if 和 v-show。 例子
bodydiv idappbutton clickflag !flagToggle flag/buttonp v-ifflag请求成功被v-if控制/pp v-showflag请求成功被v-show控制/p/divscriptconst vm {data : function(){return {flag:false,}} }const app Vue.createApp(vm)app.mount(#app)/script
/body运行结果
p v-ifflag请求成功被v-if控制/p v-if 指令会根据 flag 数据属性的值来决定是否渲染该元素。当 flag 的值为 true 时该 p 元素会被渲染到 DOM 中当 flag 的值为 false 时该 p 元素会从 DOM 中移除。p v-showflag请求成功被v-show控制/p v-show 指令也会根据 flag 数据属性的值来控制元素的显示和隐藏但它是通过 CSS 的 display 属性来控制的。当 flag 的值为 true 时该 p 元素会显示当 flag 的值为 false 时该 p 元素会隐藏但它仍然存在于 DOM 中。button clickflag !flag中的click绑定事件语句可以改变flag的赋值所以点击按钮会显示出下面的两个p元素再次点击又会消失。
总结一下
v-if 是“真正的”条件渲染因为它确实会根据条件添加或删除元素。v-show 只是简单地切换元素的 display CSS 属性因此它对于频繁切换的元素比较适用因为它不会像 v-if 那样在每次切换时都销毁和重建元素这样可以有更好的性能表现。
在选择使用哪个指令时通常的建议是 如果元素需要频繁切换使用 v-show。 如果元素在运行时不经常改变或者在起始时就需要进行条件判断使用 v-if。
v-else和v-else-if指令 在 Vue.js 中除了 v-if 和 v-show 外还提供了 v-else 和 v-else-if 指令来进一步控制条件渲染。这两个指令用于与 v-if 或 v-else-if 配合使用根据前面指令的条件来决定是否渲染当前元素。 例子
bodydiv idappp v-ifnum0.5随机数大于0.5/pp v-else随机数小于等于0.5/phr/p v-iftype Adistinction/pp v-else-iftype BB/pp v-elseC/p/divscriptconst vm {data : function(){return {num:Math.random(),type:A}} }const app Vue.createApp(vm)app.mount(#app)/script
/body运行结果
p v-ifnum0.5随机数大于0.5/pp v-else随机数小于等于0.5/p 在这里v-if 指令检查 num 是否大于 0.5。如果条件为 true则渲染“随机数大于0.5”的 p 元素。如果条件为 false则 v-else 指令会渲染“随机数小于等于0.5”的 p 元素。p v-iftype Adistinction/pp v-else-iftype BB/pp v-elseC/p在这个例子中根据 type 的值我们有三个条件如果 type 的值是 ‘A’则渲染“distinction”的 p 元素。如果 type 的值是 ‘B’则渲染“B”的 p 元素。如果以上条件都不满足v-else 指令会渲染“C”的 p 元素。
总结一下
v-else 用于在 v-if 指令之后渲染一个元素。它必须紧跟在一个 v-if 或 v-else-if 指令之后并且在同一个元素上。v-else-if 用于在 v-if 或 v-else-if 之后添加一个额外的条件块。它必须紧跟在 v-if 或另一个 v-else-if 指令之后并且在同一个元素上。
3.列表渲染指令 在 Vue.js 中v-for 指令用于循环渲染一个数组或对象的每一项。这个指令提供了一种简单的方式来遍历数据集合并渲染每一项为 DOM 元素。 例子
bodydiv idappulli v-for(user,i) in userList索引是{{i}}, 姓名是{{user.name}}/li/ul/divscriptconst vm {data : function(){return {userList:[{id:1,name:za},{id:2,name:san},{id:3,name:wang},]}} }const app Vue.createApp(vm)app.mount(#app)/script
/body运行结果
v-for 指令遍历 userList 数组并为数组中的每个元素生成一个 li 元素。在循环的过程中我们可以使用括号内的表达式为每个元素指定一个别名和一个索引。(user, i) in userList这个表达式将 userList 数组中的每个对象解构为 user当前对象和 i当前索引。因此这段代码渲染结果会是
ulli索引是0, 姓名是za/lili索引是1, 姓名是san/lili索引是2, 姓名是wang/li
/ulv-for 指令不仅仅限于数组它也可以遍历对象的属性。此外还可以使用 v-for 指令的其他特性如提供一个可选的第二个参数作为键key值或使用 of 关键字代替 in。但在大多数情况下上述的基础用法就足够满足需求了。
扩展v-for中的key 在 Vue.js 中key 是 v-for 指令的一个重要属性用于指定每个列表项的唯一标识符。这个标识符是为了帮助 Vue 识别列表中的每一项从而有效地管理列表项的状态和重新渲染。 当 Vue 重新渲染列表时它会根据 key 的值来确定哪些元素是新增的、哪些元素是被删除的、以及哪些元素是被重新排序的。如果没有提供 keyVue 可能会使用元素的索引作为默认的 key但在某些情况下这样可能会导致不必要的性能问题和渲染错误。 例子
bodydiv idappdivinput typetext v-modelnameinput typetext :valuenamebutton clickaddUser添加/button/divulli v-for(user,i) in userList :keyuser.idinput typecheckbox /姓名{{user.name}}/li/ul/divscriptconst vm {data : function(){return {userList:[{id:1,name:za},{id:2,name:san},{id:3,name:wang},],name:,nextID:4,}},methods:{addUser(){this.userList.unshift({ id: this.nextID, name: this.name});this.name;this.nextID;}} }const app Vue.createApp(vm)app.mount(#app)/script
/body运行结果
li v-for(user, i) in userList :keyuser.id 每个 user 对象都有一个唯一的 id 属性我们使用这个 id 属性作为 key。这样当列表项被添加、删除或重新排序时Vue 可以根据 id 属性准确地识别每个列表项。input typetext v-modelname v-model 是 Vue.js 提供的一个双向数据绑定指令。它在表单输入元素上创建了一个双向绑定。当输入框的值发生变化时name 数据属性也会自动更新。同样地当 name 数据属性的值改变时输入框的值也会自动更新。input typetext :valuename :value 是 Vue.js 的一个绑定属性语法它用于单向数据绑定。它将 name 数据属性的值绑定到输入框的 value 属性。这意味着当 name 数据属性的值改变时输入框的 value 属性会更新但不会反过来影响 name 数据属性。这是一个单向的数据流只能从数据属性流向视图。
