一.v-bind作用动态的设置html的标签属性语法v-bind:属性名 表达式简写形式::属性名 表达式body div idapp img v-bind:srcimgUrl v-bind:titlemsg alt img :srcimgUrl :titlemsg alt /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { imgUrl:./images/1.jpeg, msg:这是一张风景图 } }) /script /body案例当我点击上一页和下一页时实现图片切换效果body div idapp img :srcimgList[index] alt div classbtn button clickprev v-showindex 0上一页/button button clicknext v-showindex imgList.length-1下一页/button /div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { imgList:[./images/1.jpeg,./images/2.jpeg,./images/3.jpeg], index:0 }, methods:{ prev(){ this.index-- }, next(){ this.index } } }) /script /body二.v-for作用基于数据循环多次渲染整个元素遍历数组语法:v-for (item, index) in 数组 item每一项index下标index可以省略省略indexv-for item in 数组body div idapp h3水果列表/h3 ul li v-foritem in list{{item}}/li /ul /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { list:[苹果,香蕉,橙子,葡萄] } }) /script /body案例渲染图书列表并实现点击某个图书进行删除操作body div idapp h3图书列表/h3 ul li v-foritem in booksList :keyitem.id div classitem {{item.id}}.{{item.name}} {{item.price}}button clickdel(item.id)删除/button /div /li /ul /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { booksList:[ { id:1,name:《vue从入门到精通》,price:100}, { id:2,name:《vue.js 2.0 入门》,price:120}, { id:3,name:《vue.js 3.0 入门》,price:140}, { id:4,name:《python入门到精通》,price:160}, ] }, methods: { del(id){ // filter:根据条件保留满足条件的对应项得到一个新数组,但是不会改变原数组 this.booksList this.booksList.filter(item item.id ! id) } } }) /script /bodyv-if中的key:语法key属性 唯一标识作用给列表项添加的唯一标识便于Vue进行列表项的正确排序复用v-for的默认行为会尝试原地修改元素(就地复用)1.key的值只能是字符串或数字类型2.key的值必须具有唯一性3.推荐使用id作为key(唯一)不推荐使用index作为key(会变化不对应)三.v-model作用给表单元素使用双向数据绑定可以快速获取或设置表单元素内容数据变化-------视图自动更新视图变化-------数据自动更新语法v-model 变量body div idapp 账户input typetext v-modelusernamebrbr 密码input typepassword v-modelpasswordbrbr button clicklogin登录/button button clickreset重置/button /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { username:, password: }, methods:{ login(){ console.log(this.username,this.password) }, reset(){ this.username this.password } } }) /script /body点击登录控制台打印点击重置清空输入框案例记事本实现对事件的添加渲染删除清空操作style * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f5f5f5; font-family: Microsoft YaHei, sans-serif; } #app { width: 480px; margin: 60px auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .1); overflow: hidden; } .header { padding: 20px; text-align: center; font-size: 24px; font-weight: bold; color: #333; border-bottom: 1px solid #eee; } .input-area { display: flex; padding: 16px 20px; gap: 10px; } .input-area input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid #ddd; border-radius: 4px; outline: none; font-size: 14px; } .input-area input:focus { border-color: #409eff; } .input-area .add-btn { width: 80px; height: 40px; border: none; border-radius: 4px; background-color: #409eff; color: #fff; font-size: 14px; cursor: pointer; } .input-area .add-btn:hover { background-color: #66b1ff; } .list { list-style: none; padding: 0 20px; } .list li { display: flex; align-items: center; height: 48px; border-bottom: 1px solid #f0f0f0; } .list li .index { width: 32px; color: #999; font-size: 14px; } .list li .text { flex: 1; font-size: 15px; color: #333; } .list li .del-btn { border: none; background: none; color: #ccc; font-size: 24px; cursor: pointer; padding: 4px 8px; } .list li .del-btn:hover { color: #f56c6c; } .footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; color: #999; font-size: 14px; } .footer .clear-btn { border: none; background: none; color: #409eff; font-size: 14px; cursor: pointer; } .footer .clear-btn:hover { text-decoration: underline; } /style body div idapp div classheader记事本/div div classinput-area input typetext placeholder请输入要记录的内容 v-modelinput button classadd-btn clickadd添加/button /div ul classlist li v-foritem in list :keyitem.id span classindex{{ item.id }}/span span classtext{{ item.text }}/span button classdel-btn clickdel(item.id)×/button /li /ul div classfooter v-showlist.length 0 span合计 {{ list.length }} 条/span button classclear-btn clickclear清空/button /div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { list:[ { id: 1, text: 学习 Vue 基础语法 }, { id: 2, text: 完成记事本案例 }, { id: 3, text: 晚上八点去跑步 } ], input: }, methods: { add() { if (this.input.trim() )return // 输入为空时不添加 this.list.push({ id: this.list.length 1, text: this.input }) // 添加到列表 this.input // 点击添加后清空输入框 }, del(id) { this.list this.list.filter(item item.id ! id) }, clear() { this.list [] } } }) /script /bodyv-model应用于其他表单元素常见的表单元素都可以用v-model绑定关联---------快速获取或设置表单元素的值它会根据控件类型自动选取正确的方法来更新元素输入框 input:text------value文本域 textarea------value复选框 input:checkbox------checked单选框 input:radio------checked下拉菜单 select------value注意1.name给单选框加上name属性可以分组同一组互相会互斥2.value给单选框加上value属性用于提交给后台的数据3.option需要设置value值提交给后台4.select的value值关联了选中的option的value值案例个人简介表单数据body div idapp h3个人简介/h3 姓名 input typetext v-modelusername brbr 是否单身 input typecheckbox v-modelisSingle brbr 性别 input typeradio v-modelgender namegender value0男 input typeradio v-modelgender namegender value1女 brbr 所在城市 select v-modelcity option value0济南/option option value1北京/option option value2上海/option option value3广州/option /select brbr 自我描述br textarea v-modeldescription rows4 cols30/textarea br button clicksubmit提交/button /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { username: , isSingle: false, gender: 0, city: 0, description: , }, methods:{ submit(){ console.log(this.username, this.isSingle, this.gender, this.city, this.description); } } }) /script /body四.指令修饰符通过 . 指明一些指令后缀不同后缀封装了不同的处理操作简化代码按键修饰符keyup.enter键盘回车监听v-model修饰符v-model.trim去除首尾空格v-model.number转数字事件修饰符事件名.stop阻止冒泡事件名.prevent阻止默认行为body div idapp input typetext v-modelusername keyupadd /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { username: }, methods: { add(){ console.log(this.username); } } }) /script /bodybody div idapp input typetext v-modelusername keyup.enteradd /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { username: }, methods: { add(){ console.log(this.username); } } }) /script /body五.v-bind操作class和style语法:class 对象/数组1.对象键就是类名值是布尔值。如果值为true有这个类否则没有这个类适用场景一个类名来回切换2.数组数组中所有的类都会添加到盒子上本质就是一个class列表适用场景批量添加或删除类style .box{ width: 200px; height: 200px; border: 2px solid; font-size: 24px; } .red{ background-color: red; } .big{ border-radius: 20px; } /style body div idapp div classbox :class{ red:true, big:true }落霞与孤鹜齐飞/div div classbox :class[red, big]秋水共长天一色/div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { } }) /script /body案例京东秒杀tab导航高亮style * { margin: 0; padding: 0; box-sizing: border-box; } .tab { display: flex; width: 560px; margin: 60px auto; border-bottom: 2px solid #e1251b; list-style: none; } .tab li { margin-right: 10px; } .tab li a { display: block; padding: 12px 28px; border: 1px solid #e0e0e0; background-color: #fff; color: #333; font-size: 16px; font-weight: bold; text-decoration: none; } .tab li a.active { border-color: #e1251b; background-color: #e1251b; color: #fff; } /style body div idapp ul classtab li v-for(item,index) in list :keyitem.id clickactiveId index a href# :class{active:index activeId}{{item.name}}/a /li /ul /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { list:[ { id:1, name:京东秒杀}, { id:2, name:每日特价}, { id:3, name:品类秒杀} ], activeId:0 // 高亮状态 } }) /script /body语法:style 样式对象”适用场景某个具体属性的动态设置style .box{ width: 200px; height: 200px; background-color: aquamarine; } /style body div idapp div classbox :style{width:250px,height:250px,backgroundColor:red}/div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { } }) /script /body案例点击不同按钮实现进度条显示style * { margin: 0; padding: 0; box-sizing: border-box; } #app { width: 500px; margin: 80px auto; text-align: center; } .progress { position: relative; height: 30px; background-color: #333; border-radius: 15px; margin-bottom: 60px; } .progress .inner { width: 50%; height: 100%; background-color: #4a9eff; border-radius: 15px; transition: width 0.3s ease-in-out; } .progress .inner span { position: absolute; left: 0; top: 36px; width: 100%; text-align: center; font-size: 20px; color: #000; } button { margin: 0 6px; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background-color: #f5f5f5; font-size: 14px; cursor: pointer; } /style body div idapp div classprogress div classinner :style{ width: progress % } span{{ progress }}%/span /div /div button clickprogress 25设置25%/button button clickprogress 50设置50%/button button clickprogress 75设置75%/button button clickprogress 100设置100%/button /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { progress: 25 } }) /script /body