一.v-bind

作用：动态的设置html的标签属性

语法：v-bind:属性名 = "表达式"

简写形式::属性名 = "表达式"

<body> <div id="app"> <img v-bind:src="imgUrl" v-bind:title="msg" alt=""> <img :src="imgUrl" :title="msg" alt=""> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { imgUrl:'./images/1.jpeg', msg:'这是一张风景图' } }) </script> </body>

案例：当我点击上一页和下一页时，实现图片切换效果

<body> <div id="app"> <img :src="imgList[index]" alt=""> <div class="btn"> <button @click="prev" v-show="index > 0">上一页</button> <button @click="next" v-show="index < imgList.length-1">下一页</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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可以省略）

省略index：v-for = "item in 数组"

<body> <div id="app"> <h3>水果列表</h3> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { list:['苹果','香蕉','橙子','葡萄'] } }) </script> </body>

案例：渲染图书列表，并实现点击某个图书进行删除操作

<body> <div id="app"> <h3>图书列表</h3> <ul> <li v-for="item in booksList" :key="item.id"> <div class="item"> {{item.id}}.{{item.name}} {{item.price}}<button @click="del(item.id)">删除</button> </div> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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> </body>

v-if中的key:

语法：key属性 = "唯一标识"

作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用

v-for的默认行为会尝试原地修改元素(就地复用)

1.key的值只能是字符串或数字类型

2.key的值必须具有唯一性

3.推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)

三.v-model

作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容

数据变化-------视图自动更新

视图变化-------数据自动更新

语法：v-model = '变量'

<body> <div id="app"> 账户：<input type="text" v-model="username"><br><br> 密码：<input type="password" v-model="password"><br><br> <button @click="login">登录</button> <button @click="reset">重置</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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 id="app"> <div class="header">记事本</div> <div class="input-area"> <input type="text" placeholder="请输入要记录的内容" v-model="input"> <button class="add-btn" @click="add">添加</button> </div> <ul class="list"> <li v-for="item in list" :key="item.id"> <span class="index">{{ item.id }}</span> <span class="text">{{ item.text }}</span> <button class="del-btn" @click="del(item.id)">×</button> </li> </ul> <div class="footer" v-show="list.length > 0"> <span>合计 {{ list.length }} 条</span> <button class="clear-btn" @click="clear">清空</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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> </body>

v-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 id="app"> <h3>个人简介</h3> 姓名： <input type="text" v-model="username"> <br><br> 是否单身： <input type="checkbox" v-model="isSingle"> <br><br> 性别： <input type="radio" v-model="gender" name="gender" value="0">男 <input type="radio" v-model="gender" name="gender" value="1">女 <br><br> 所在城市： <select v-model="city"> <option value="0">济南</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <br><br> 自我描述：<br> <textarea v-model="description" rows="4" cols="30"></textarea> <br> <button @click="submit">提交</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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 id="app"> <input type="text" v-model="username" @keyup="add"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { username: '' }, methods: { add(){ console.log(this.username); } } }) </script> </body>

<body> <div id="app"> <input type="text" v-model="username" @keyup.enter="add"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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 id="app"> <div class="box" :class="{ red:true, big:true }">落霞与孤鹜齐飞</div> <div class="box" :class="['red', 'big']">秋水共长天一色</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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 id="app"> <ul class="tab"> <li v-for="(item,index) in list" :key="item.id" @click="activeId = index"> <a href="#" :class="{'active':index === activeId}">{{item.name}}</a> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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 id="app"> <div class="box" :style="{'width':'250px','height':'250px','backgroundColor':'red'}"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.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 id="app"> <div class="progress"> <div class="inner" :style="{ width: progress + '%' }"> <span>{{ progress }}%</span> </div> </div> <button @click="progress = 25">设置25%</button> <button @click="progress = 50">设置50%</button> <button @click="progress = 75">设置75%</button> <button @click="progress = 100">设置100%</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { progress: 25 } }) </script> </body>