回顾
- vue是一个渐进式框架
- vue-cli脚手架-辅助开发
- vue create 项目名称(小写)
- 目录结构- src-main.js(入口)- App.vue
- 单文件组件-一个.vue就是一个组件-
<a name="ltUCE"></a> ## 2. 条件渲染 v-if-v-show > vue中显示隐藏都可以使用 v-if/v-show - v-if="表达式" 表达式 => 布尔值 => true 显示 => false => 隐藏 - v-show="表达式" 表达式 => 布尔值 => true 显示 => false => 隐藏 v-if- true渲染元素- false- 移除元素<br />v-show- 都会渲染元素- true ->正常显示 => false => display: none - v-if 不需要频繁切换的时候-可以使用v-if - v-show 如果需要频繁切换就可以使用v-show ```vue <template> <div id="app"> <button @click="showImg = !showImg">显示/隐藏</button> <p> <!-- v-if 和 v-show --> <img v-if="showImg" style="width: 300px; height: 300px" :src="girlImg" alt="" /> <img v-show="showImg" style="width: 300px; height: 300px" :src="girlImg" alt="" /> </p> <!-- v-if 和 v-else 和 v-else-if --> <p v-if="age >= 0 && age < 8">儿童</p> <p v-else-if="age >= 8 && age < 16">少年</p> <p v-else-if="age >= 16 && age < 22">青年</p> <p v-else-if="age >= 22 && age < 35">壮年</p> <p v-else-if="age >= 35 && age <= 50">中年</p> <p v-else>老年</p> </div> </template> <script> import girlImg from "./assets/a.png"; export default { name: "App", components: {}, data() { return { girlImg, showImg: true, // 控制图片显示 age: 30, // 0-8 儿童 8-16少年 16-22青年 22-35壮年 35-50 中年 50-老年 }; }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>3.v-for
循环任意的对象数组-v-for指令
循环生成谁 就在谁的标签上写v-for ```html
- // item是所循环的每一个项 // index是循环项的索引下标
代码实例 ```vue <template> <div id="app"> <ul> <!--v-for= (item, index) in arr --> <li v-for="(item, index) in list" :key="index"> <span>{{ item.id }}</span> -- <span>{{ item.name }}</span> </li> </ul> <!-- 第二种语法 省略小括号 --> <!-- key主要保证在数组中独一无二即可 --> <ul> <li :key="item.id" v-for="item in list"> <span>{{ item.id }}</span> -- <span>{{ item.name }}</span> </li> </ul> </div> </template> <script> import girlImg from "./assets/a.png"; export default { name: "App", components: {}, data() { return { list: [ { id: 1, name: "小米" }, { id: 2, name: "华为" }, { id: 3, name: "oppo" }, { id: 4, name: "vivo" }, ], }; }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>(item, index) in list
item in list要保证给标签一个key属性，而且必须在当前数组是唯一的
splice(删除-插入) slice(截取) split(字符串-分割成数组)
4.数组的监测
需要使用上述的这些方法对原数组进行操作，就可以实现数组的更新-导致页面的刷新直接赋值新数组
this.list = [...this.list, value]强制更新
this.list[0] = value // 不会造成更新 this.$forceUpdate() // 强制数据更新实例代码 ```vue
{{ item }}
<a name="HdsQt"></a> ## 5. v-for的更新机制 - 虚拟dom-存于内存 - 根据-模板 - 新的虚拟dom- 旧的虚拟dom- 比较（diff算法）找不同- patch方法增量更新到页面 > 有一辆车换空调滤芯-传统模式-全拆了，重新组装起来，把空调滤芯带上 > vue-找到要更新的位置，直接换掉即可。 <a name="GeSnE"></a> ## 6.diff算法 - diff只做同级比较 > 算法复杂度-会将On3 -On 第一级只根第一级比较-如果元素相同-属性变化-只需要更新属性<br />更新- patch更新即可 > Vue-React-小程序 v-for -虚拟dom-就是一个js的对象，用来标识dom，js的执行效率更高，更快<br />diff算法-只做同级比较 <a name="BfW8Z"></a> ## 7.v-for中的key的作用 - 没有key, 或者key使用索引下标 > 更新的时候就会采用"就地更新"的做法 - 最大化的复用元素-元素的错位 > key的要求- 唯一的数字或者字符串， 不能是对象 - 有key，diff 会使用key进行比较 > 虚拟dom-js对象用来描述dom结构 > diff 同级比较- key > 更新的时候拥有优秀的性能。 <a name="NK1XD"></a> ## 8.class类名的动态绑定 - 语法 :class="{ 类名: 布尔值 }" > 布尔值true 类名显示 布尔值false 类名失效 ```vue <template> <div id="app"> <!-- :class="{ 类名: 布尔值 }" --> <div :class="{ name: showName }">我爱北京天安门</div> <button @click="showName = !showName">切换样式</button> <ul> <!-- 高亮- 点谁谁亮 --> <li @click="clickItem(item.id)" :class="{ name: item.id === selectId }" v-for="item in list" :key="item.id" > {{ item.name }} </li> </ul> </div> </template> <script> export default { name: "App", components: {}, data() { return { showName: true, list: [ { id: 1, name: "张三" }, { id: 2, name: "李四" }, { id: 3, name: "王五" }, ], selectId: null, // 默认的id }; }, methods: { clickItem(id) { // 需要知道点了谁 // 需要记录当前的点击的id this.selectId = id; // 1 2 3 // 数据驱动视图 }, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .name { color: red; font-size: 40px; font-weight: bold; } </style>9.动态style的设置
语法： :style=”{ 属性名: 值 }”
font-size -> 小驼峰 FontSize 大驼峰 fontSize 小驼峰
<template> <div id="app"> <button @click="changeColor">改变颜色</button> <!-- :style="{color: 值}" --> <h1 :style="{ color: h1Color, fontSize: h1Size }"> 老高-讲的Vue真的-好琐碎啊 </h1> </div> </template> <script> export default { name: "App", components: {}, data() { return { colors: ["red", "blue", "pink", "yellow", "brown", "green"], sizes: ["12px", "24px", "36px", "48px", "56px"], h1Color: "", h1Size: "", }; }, methods: { changeColor() { // 随机的取 this.h1Color = this.colors[~~(Math.random() * this.colors.length)]; // 0 - 5 // 数据驱动视图 this.h1Size = this.sizes[~~(Math.random() * this.sizes.length)]; }, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .name { color: red; font-size: 40px; font-weight: bold; } </style>10.品牌的管理-铺设品牌页面
目标: 数据铺设
- 需求1: 把默认数据显示到表格上
- 需求2: 注意资产超过100的, 都用红色字体标记出来
细节:
① 先铺设静态页面 —- 去.md文档里, 复制数据和标签模板
② 此案例使用bootstrap, 需要下载, 并导入到工程main.js中
③ 用v-for配合默认数据, 把数据默认铺设到表格上显示
④ 直接在标签上, 大于100价格, 动态设置red类名
使用bootstrap的样式
$ npm i bootstrap在main.js引入bootstrap的样式
import "bootstrap/dist/css/bootstrap.css"使用模版写入内容 ```vue
品牌管理
编号 资产名称 价格 创建时间 操作 删除
最终代码 ```vue <template> <div id="app"> <div class="container"> <!-- 顶部框模块 --> <div class="form-group"> <div class="input-group"> <h4>品牌管理</h4> </div> </div> <!-- 数据表格 --> <table class="table table-bordered table-hover mt-2"> <thead> <tr> <th>编号</th> <th>资产名称</th> <th>价格</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <!-- 如果价格超过100，就有red这个类 --> <td :class="{ red: item.price > 100 }">{{ item.price }}</td> <td>{{ item.time }}</td> <td><a href="#">删除</a></td> </tr> </tbody> <!-- <tfoot > <tr> <td colspan="5" style="text-align: center">暂无数据</td> </tr> </tfoot> --> </table> <!-- 添加资产 --> <form class="form-inline"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="资产名称" /> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="价格" /> </div> </div> <div class="form-group" style="margin-top: 10px"> <div class="input-group"> <button class="btn btn-primary">添加资产</button> </div> </div> <!-- 阻止表单提交 --> </form> </div> </div> </template> <script> export default { data() { return { name: "", // 名称 price: 0, // 价格 list: [ { id: 100, name: "外套", price: 199, time: new Date("2010-08-12") }, { id: 101, name: "裤子", price: 34, time: new Date("2013-09-01") }, { id: 102, name: "鞋", price: 25.4, time: new Date("2018-11-22") }, { id: 103, name: "头发", price: 19900, time: new Date("2020-12-12") }, ], }; }, }; </script> <style > .red { color: red; } </style>11. 新增品牌管理
- 注册按钮点击事件
- 获取资产名称的值和价格的值
- 添加到数组中
清空原来的数据 ```vue
品牌管理
编号 资产名称 价格 创建时间 操作 {{ item.id }} {{ item.name }} {{ item.price }} {{ item.time }} 删除
<a name="PJqKn"></a> ## 12. 删除品牌处理  ```vue <template> <div id="app"> <div class="container"> <!-- 顶部框模块 --> <div class="form-group"> <div class="input-group"> <h4>品牌管理</h4> </div> </div> <!-- 数据表格 --> <table class="table table-bordered table-hover mt-2"> <thead> <tr> <th>编号</th> <th>资产名称</th> <th>价格</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <!-- 如果价格超过100，就有red这个类 --> <td :class="{ red: item.price > 100 }">{{ item.price }}</td> <td>{{ item.time }}</td> <td><a @click.prevent="delItem(item.id)" href="#">删除</a></td> </tr> </tbody> <!-- <tfoot > <tr> <td colspan="5" style="text-align: center">暂无数据</td> </tr> </tfoot> --> </table> <!-- 添加资产 --> <form class="form-inline"> <div class="form-group"> <div class="input-group"> <input v-model.trim="name" type="text" class="form-control" placeholder="资产名称" /> </div> </div> <div class="form-group"> <div class="input-group"> <input v-model.number="price" type="text" class="form-control" placeholder="价格" /> </div> </div> <div class="form-group" style="margin-top: 10px"> <div class="input-group"> <button @click.prevent="btnAdd" class="btn btn-primary"> 添加资产 </button> </div> </div> <!-- 阻止表单提交 --> </form> </div> </div> </template> <script> export default { data() { return { name: "", // 名称 price: 0, // 价格 list: [ { id: 100, name: "外套", price: 199, time: new Date("2010-08-12") }, { id: 101, name: "裤子", price: 34, time: new Date("2013-09-01") }, { id: 102, name: "鞋", price: 25.4, time: new Date("2018-11-22") }, { id: 103, name: "头发", price: 19900, time: new Date("2020-12-12") }, ], }; }, methods: { btnAdd() { // 获取数据 if (this.name && this.price) { const id = ~~(Math.random() * 1000); this.list.push({ id, name: this.name, price: this.price, time: new Date(), }); // 清空数据 this.name = ""; this.price = 0; } }, delItem(id) { if (id && confirm("确定删除吗")) { // 第一种写法 // 判断id是否存在 // splice 删除某个元素 // let index = this.list.findIndex((item) => item.id === id); // 找到数组中id匹配的选项的索引值 // 删除该索引值 // this.list.splice(index, 1); // 移除该选项 // 第二种写法 this.list = this.list.filter((item) => item.id !== id); // 新数组赋值给原来的数据 } }, }, }; </script> <style > .red { color: red; } </style>13. 过滤器的应用
过滤器- 处理一些值 返回处理的结果
打个比方- 数据库-个人的存款 10000块钱，但是库里会存的是10000， 但是展示的时候五花八门
10000 - 展示 10000元 10000米 10000块钱
再打个比方- 登录了某个网站-网站会记录你的登录时间-完整时间 2018-5-23 14:23:35 访问了某个知名网站，
2018-5-23 14:23:35 - 2018-5-23 下午- 2018-5-23 2点到三点之间- 过滤器的语法- 全局注册-局部注册
全局的意思是-只要注册了 任意位置均可使用
局部-只能在注册的组件上使用
过滤器只能用在 插值表达式或者v-bind的属性上
<a>{{ 表达式 ｜ 过滤器 ｜ 过滤器2 }}</a>过滤器可以串联使用， value的值 是管道符的前面的计算结果
Vue3已经移除了过滤器的API， 只存在Vue2中
品牌管理的过滤器
<template> <div id="app"> <div class="container"> <!-- 顶部框模块 --> <div class="form-group"> <div class="input-group"> <h4>品牌管理</h4> </div> </div> <!-- 数据表格 --> <table class="table table-bordered table-hover mt-2"> <thead> <tr> <th>编号</th> <th>资产名称</th> <th>价格</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <!-- 如果价格超过100，就有red这个类 --> <td :class="{ red: item.price > 100 }"> {{ item.price | priceFilter | prevPriceFilter }} </td> <td> {{ item.time | dateFilter }} </td> <td><a @click.prevent="delItem(item.id)" href="#">删除</a></td> </tr> </tbody> <!-- <tfoot > <tr> <td colspan="5" style="text-align: center">暂无数据</td> </tr> </tfoot> --> </table> <!-- 添加资产 --> <form class="form-inline"> <div class="form-group"> <div class="input-group"> <input v-model.trim="name" type="text" class="form-control" placeholder="资产名称" /> </div> </div> <div class="form-group"> <div class="input-group"> <input v-model.number="price" type="text" class="form-control" placeholder="价格" /> </div> </div> <div class="form-group" style="margin-top: 10px"> <div class="input-group"> <button @click.prevent="btnAdd" class="btn btn-primary"> 添加资产 </button> </div> </div> <!-- 阻止表单提交 --> </form> </div> </div> </template> <script> export default { data() { return { name: "", // 名称 price: 0, // 价格 list: [ { id: 100, name: "外套", price: 199, time: new Date("2010-08-12") }, { id: 101, name: "裤子", price: 34, time: new Date("2013-09-01") }, { id: 102, name: "鞋", price: 25.4, time: new Date("2018-11-22") }, { id: 103, name: "头发", price: 19900, time: new Date("2020-12-12") }, ], }; }, methods: { btnAdd() { // 获取数据 if (this.name && this.price) { const id = ~~(Math.random() * 1000); this.list.push({ id, name: this.name, price: this.price, time: new Date(), }); // 清空数据 this.name = ""; this.price = 0; } }, delItem(id) { if (id && confirm("确定删除吗")) { // 第一种写法 // 判断id是否存在 // splice 删除某个元素 // let index = this.list.findIndex((item) => item.id === id); // 找到数组中id匹配的选项的索引值 // 删除该索引值 // this.list.splice(index, 1); // 移除该选项 // 第二种写法 this.list = this.list.filter((item) => item.id !== id); // 新数组赋值给原来的数据 } }, }, // 多个过滤器的集合-局部过滤器 filters: { priceFilter: (value) => { // 返回处理的结果 return value + "¥"; }, prevPriceFilter: (value) => { return "惊爆价:" + value; }, dateFilter: (value) => { // moment-时间格式化 return value.toLocaleString(); }, }, }; </script> <style > .red { color: red; } </style>14. 计算属性
插值表达式 {{ 表达式 }}
- 计算属性
计算属性就是封装好的方法
<script> export default { data () { return { name: "张三" } }, methods: { }, filters: { }, computed: { "计算属性名(不能和data中的名字重复)": () => { // this 指向当前实例 return this.name.split("").reverse().join("") // 必须有return- 要返回计算的结果 } } } </script>使用计算属性的时候- 不要加小括号
<a>{{ 计算属性名 }}</a>- 计算缓存
- 先计算结果，放入缓存，以后再用计算属性会直接从缓存中获取
- 如果计算属性中依赖的data数据发生了变化，计算会再次计算，再次放入缓存
计算属性会缓存计算的结果-保证的数据的智能更新
<template> <div id="app"> <div class="container"> <!-- 顶部框模块 --> <div class="form-group"> <div class="input-group"> <h4>品牌管理</h4> </div> </div> <!-- 数据表格 --> <table class="table table-bordered table-hover mt-2"> <thead> <tr> <th>编号</th> <th>资产名称</th> <th>价格</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <!-- 如果价格超过100，就有red这个类 --> <td :class="{ red: item.price > 100 }"> {{ item.price | priceFilter | prevPriceFilter }} </td> <td> {{ item.time | dateFilter }} </td> <td><a @click.prevent="delItem(item.id)" href="#">删除</a></td> </tr> <tr style="background-color: #eee"> <td>统计:</td> <td colspan="2">总价钱为: {{ allPrice }}</td> <td colspan="2">平均价: {{ svgPrice }}</td> </tr> </tbody> <!-- <tfoot > <tr> <td colspan="5" style="text-align: center">暂无数据</td> </tr> </tfoot> --> </table> <!-- 添加资产 --> <form class="form-inline"> <div class="form-group"> <div class="input-group"> <input v-model.trim="name" type="text" class="form-control" placeholder="资产名称" /> </div> </div> <div class="form-group"> <div class="input-group"> <input v-model.number="price" type="text" class="form-control" placeholder="价格" /> </div> </div> <div class="form-group" style="margin-top: 10px"> <div class="input-group"> <button @click.prevent="btnAdd" class="btn btn-primary"> 添加资产 </button> </div> </div> <!-- 阻止表单提交 --> </form> </div> </div> </template> <script> export default { data() { return { message: "hello", name: "", // 名称 price: 0, // 价格 list: [ { id: 100, name: "外套", price: 199, time: new Date("2010-08-12") }, { id: 101, name: "裤子", price: 34, time: new Date("2013-09-01") }, { id: 102, name: "鞋", price: 25.4, time: new Date("2018-11-22") }, { id: 103, name: "头发", price: 19900, time: new Date("2020-12-12") }, ], }; }, methods: { btnAdd() { // 获取数据 if (this.name && this.price) { const id = ~~(Math.random() * 1000); this.list.push({ id, name: this.name, price: this.price, time: new Date(), }); // 清空数据 this.name = ""; this.price = 0; } }, delItem(id) { if (id && confirm("确定删除吗")) { // 第一种写法 // 判断id是否存在 // splice 删除某个元素 // let index = this.list.findIndex((item) => item.id === id); // 找到数组中id匹配的选项的索引值 // 删除该索引值 // this.list.splice(index, 1); // 移除该选项 // 第二种写法 this.list = this.list.filter((item) => item.id !== id); // 新数组赋值给原来的数据 } }, reMessage() { console.log(1); return this.message.split("").reverse().join(""); }, }, // 多个过滤器的集合-局部过滤器 filters: { priceFilter: (value) => { // 返回处理的结果 return value + "¥"; }, prevPriceFilter: (value) => { return "惊爆价:" + value; }, dateFilter: (value) => { // moment-时间格式化 return value.toLocaleString(); }, }, computed: { allPrice() { let price = 0; this.list.forEach((item) => { price += item.price; }); return price; }, svgPrice() { // this return this.allPrice / this.list.length; }, }, }; </script> <style > .red { color: red; } </style>- 计算属性-缓存
- 封装逻辑-实现复用
- 计算属性和方法的区别- 形式的区别 methods: {} computed: {} 方法需要写() 计算属性直接写名称
- 智能更新-计算一次就将结果放入缓存
- 计算属性中依赖的数据 this.list/ this.message- 计算属性会重新计算-计算一次
若有收获，就点个赞吧
0 人点赞
