- 用Vue开发网页效果
- 获取元素,操纵他们
1.内容绑定,事件绑定
v-text
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容【{{}}这个是v-text的缩写】
- 内部支持写表达式
v-html
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
v-on基础
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
v-on补充
传递自定义参数,事件修饰符
- 事件绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter 可以限制触发的按键为回车
- 事件修饰符有多种
文档传送门:API — Vue.js
案例——计数器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单计数器</title> </head> <body> <!-- html结构 --> <div id="app"> <!-- 计数器功能区域 --> <div> <button @click="sub">-</button> <span>{{num}}</span> <button @click="add">+</button> </div> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 编码 --> <script> // 创建Vue实例 var app = new Vue({ el: "#app", data: { num: 1, }, methods: { //这里的方法要写methods不然会报错找不到这些方法 add: function () { console.log("add"); if (this.num < 10) { this.num++; } else { alert("不能再加啦!!") } }, sub: function () { console.log("sub"); if (this.num > 0) { this.num--; } else { alert("已经到最小值啦 :)") } } } }); </script> </body> </html>
2.显示切换,属性绑定
v-show:广告、遮罩层
操作标签
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
v-if
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,dom树中移除
- 频繁的切换v-show,反之使用v-if,前者的切换消耗小
操作DOM元素,反复操作消耗大。
v-bind:v-bind:属性名=表达式
- v-bind指令的作用是:为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind,只保留:属性名
- 隔要动态的增删class建议使用对象的方式
【v-bind是绑定标签的属性,可以改变其中的属性。如:input标签的title,img标签的src、height、width等等。】
案例——图片切换
1.定义图片数组 imgArr:[]
⒉.添加图片索引
3.绑定src属性 v-on
4.图片切换逻辑
5.显示状态切换 v-show
- 列表数据使用数组保存
- v-bind指令可以设置元素属性,,比如src
- v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片切换</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <!-- html结构 --> <div id="app"> <!-- 图片切换功能区域 --> <!-- 左箭头 --> <a href="#" @click="prev" v-show="index>0"><img src="./img/prev.png"></a> <!-- 右箭头 --> <a href="#" @click="next" v-show="index<imgArr.length-1"><img src="./img/next.png"></a> <!-- 图片 --> <img :src="imgArr[index]"> </div> <!-- 编码 --> <script> // 创建Vue实例 var app = new Vue({ el: "#app", data: { imgArr: [ "./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg" ], //1.定义图片数组 index: 0 //2.添加图片索引 }, methods: { //4.图片切换逻辑 prev() { this.index--; }, next() { this.index++; } } }); </script> </body> </html>
3.列表循环,表单元素绑定
v-for
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是( item,index ) in 数据【in是固定的,item和index可以更换。】
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
【v-for是遍历数据,如果要显示出来需要结合v-text使用/{{}}】
v-model
- 获取和设置表单元素的值(双向数据绑定)
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值 双向绑定
案例——记事本
- 列表结构可以通过v-for指令结合数据生成
- v-on结合事件修饰符可以对事件进行限制,比如.enter
- v-on在绑定事件时可以传递自定义参数
- 通过v-model可以快速的设置和获取表单元素的值基于数据的开发方式
新增
流程
- 生成列表结构(v-for 数组)
- 获取用户输入(v-model)
- 回车,新增数据(v-on .enter 添加数据)
运用
1.v-for指令的作用
2.v-model指令的作用
3.v-on指令,事件修饰符
4.通过审查元素快速定位
删除
流程
- 点击删除指定内容(v-on splice 索引)
运用
1.数据改变,和数据绑定的元素同步改变
2.事件的自定义参数
3.splice方法的作用
统计
流程
- 统计信息个数(v-text length)
运用
1.基于数据的开发方式
2. v-text指令的作用
清空
流程
- 点击清除所有信息(v-on 清空数组)
运用
- 基于数据的开发方式
隐藏
流程
- 没有数据时,隐藏元素(v-show v-if 数组非空)
运用