Vue笔记（二）

Vue（一）：Vue笔记（一）-CSDN博客

综合案例：水果购物车

项目功能：

视频链接：034-水果购物车-基本渲染_哔哩哔哩_bilibili

目录结构：

index.css

.app-container {padding-bottom: 300px;width: 800px;margin: 0 auto;
}
@media screen and (max-width: 800px) {.app-container {width: 600px;}
}
.app-container .banner-box {border-radius: 20px;overflow: hidden;margin-bottom: 10px;
}
.app-container .banner-box img {width: 100%;
}
.app-container .nav-box {background: #ddedec;height: 60px;border-radius: 10px;padding-left: 20px;display: flex;align-items: center;
}
.app-container .nav-box .my-nav {display: inline-block;background: #5fca71;border-radius: 5px;width: 90px;height: 35px;color: white;text-align: center;line-height: 35px;margin-right: 10px;
}.breadcrumb {font-size: 16px;color: gray;
}
.table {width: 100%;text-align: left;border-radius: 2px 2px 0 0;border-collapse: separate;border-spacing: 0;
}
.th {color: rgba(0, 0, 0, 0.85);font-weight: 500;text-align: left;background: #fafafa;border-bottom: 1px solid #f0f0f0;transition: background 0.3s ease;
}
.th.num-th {flex: 1.5;
}
.th {text-align: center;
}
.th:nth-child(4),
.th:nth-child(5),
.th:nth-child(6),
.th:nth-child(7) {text-align: center;
}
.th.th-pic {flex: 1.3;
}
.th:nth-child(6) {flex: 1.3;
}.th,
.td {position: relative;padding: 16px 16px;overflow-wrap: break-word;flex: 1;
}
.pick-td {font-size: 14px;
}
.main,
.empty {border: 1px solid #f0f0f0;margin-top: 10px;
}
.tr {display: flex;cursor: pointer;border-bottom: 1px solid #ebeef5;
}
.tr.active {background-color: #f5f7fa;
}
.td {display: flex;justify-content: center;align-items: center;
}.table img {width: 100px;height: 100px;
}button {outline: 0;box-shadow: none;color: #fff;background: #d9363e;border-color: #d9363e;color: #fff;background: #d9363e;border-color: #d9363e;line-height: 1.5715;position: relative;display: inline-block;font-weight: 400;white-space: nowrap;text-align: center;background-image: none;border: 1px solid transparent;box-shadow: 0 2px 0 rgb(0 0 0 / 2%);cursor: pointer;transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;touch-action: manipulation;height: 32px;padding: 4px 15px;font-size: 14px;border-radius: 2px;
}
button.pay {background-color: #3f85ed;margin-left: 20px;
}.bottom {height: 60px;display: flex;align-items: center;justify-content: space-between;padding-right: 20px;border: 1px solid #f0f0f0;border-top: none;padding-left: 20px;
}
.right-box {display: flex;align-items: center;
}
.check-all {cursor: pointer;
}
.price {color: hotpink;font-size: 30px;font-weight: 700;
}
.price-box {display: flex;align-items: center;
}
.empty {padding: 20px;text-align: center;font-size: 30px;color: #909399;
}
.my-input-number {display: flex;
}
.my-input-number button {height: 40px;color: #333;border: 1px solid #dcdfe6;background-color: #f5f7fa;
}
.my-input-number button:disabled {cursor: not-allowed!important;
}
.my-input-number .my-input__inner {height: 40px;width: 50px;padding: 0;border: none;border-top: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;
}

 inputnumber.css

.my-input-number {position: relative;display: inline-block;width: 140px;line-height: 38px;
}
.my-input-number span {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
}
.my-input-number .my-input {display: block;position: relative;font-size: 14px;width: 100%;
}
.my-input-number .my-input__inner {-webkit-appearance: none;background-color: #fff;background-image: none;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 40px;line-height: 40px;outline: none;padding: 0 15px;transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);width: 100%;padding-left: 50px;padding-right: 50px;text-align: center;
}
.my-input-number .my-input-number__decrease,
.my-input-number .my-input-number__increase {position: absolute;z-index: 1;top: 1px;width: 40px;height: auto;text-align: center;background: #f5f7fa;color: #606266;cursor: pointer;font-size: 13px;
}
.my-input-number .my-input-number__decrease {left: 1px;border-radius: 4px 0 0 4px;border-right: 1px solid #dcdfe6;
}
.my-input-number .my-input-number__increase {right: 1px;border-radius: 0 4px 4px 0;border-left: 1px solid #dcdfe6;
}
.my-input-number .my-input-number__decrease.is-disabled,
.my-input-number .my-input-number__increase.is-disabled {color: #c0c4cc;cursor: not-allowed;
}

index.html

<!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" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><title>购物车</title></head><body><div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div class="tr" v-for="(item, index) in fruitList" :key="item.id" :class="{ active: item.isChecked }"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="商品图片加载失败了喔" /></div><div class="td">{{item.price}}</div><div class="td"><div class="my-input-number"><button :disabled="item.num <= 1" class="decrease" @click="subtract(item.id)"> - </button><span class="my-input__inner">{{item.num}}</span><button class="increase" @click="addOne(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price}}</div><div class="td"><button @click="delOne(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="isAll"/>全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span><!-- 结算按钮 --><button class="pay">结算( {{totalCount}} )</button></div></div></div><!-- 空车 --><div v-show="fruitList.length === 0" class="empty">🛒空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const defaultList = [{id: 1,icon: './img/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: './img/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: './img/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: './img/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: './img/樱桃.png',isChecked: false,num: 20,price: 34,},];const app = new Vue({el: '#app',data: {fruitList: JSON.parse(localStorage.getItem('fruit-list')) || defaultList,//一般给的初始值是[]空数组},methods:{// 删除一条delOne(id){this.fruitList = this.fruitList.filter(function(item){return item.id !== id;});},//个数增加1addOne(id){this.fruitList[id-1].num++;},//个数减少1subtract(id){this.fruitList[id-1].num--;}},computed:{// 默认计算属性：只能获取不能设置，要设置需要写完整写法// isAll () {//   // 必须所有的小选框都选中，全选按钮才选中 → every//   return this.fruitList.every(item => item.isChecked)// }// 完整写法 = get + setisAll: {get () {//使用Array.every()方法 检测所有小单选按钮是否都选中了，有一个没选中则返回false，全选不选中return this.fruitList.every(function(item){if(item.isChecked){return true;};// 简写：item => item.isChecked;})},set (value) {// 基于拿到的布尔值，要让所有的小选框 同步状态this.fruitList.forEach(item => item.isChecked = value)}},// 计算选中数量totalCount(){return this.fruitList.reduce(function (x, y) {// 选中则累加if (y.isChecked === true){return x + y.num;// 否则返回上一次调用reduce的结果值}else{return x;}},0);},// 计算选中总价totalPrice(){return this.fruitList.reduce(function (x, y) {// 选中则累加if (y.isChecked === true){return x + y.price * y.num;// 否则返回上一次调用reduce的结果值}else{return x;}},0);}},watch:{// 对每次数据的改动做本地持久化，使用watch检测fruitList:{deep: true,handler(newValue,oldValue){// 需要将newValue存入本地，newValue是个复杂类型，转JSON格式存本地localStorage.setItem('fruit-list', JSON.stringify(newValue));// console.log(typeof newValue);// 类型：object// console.log(typeof localStorage.getItem('fruit-list'));// String JSON// console.log(typeof JSON.parse(localStorage.getItem('fruit-list')));// Object// console.log(typeof JSON.stringify(newValue));// String JSON }}}})</script></body>
</html>

 生命周期

1.生命周期&生命周期四个阶段

  1. 什么时候可以发送初始化渲染请求？（答：至少要等Vue实例创建出来,响应式数据准备好）
  2. 什么时候可以开始操作DOM？（答：至少DOM要渲染完成） 

2.生命周期函数（钩子函数【8个】）

共8个函数（4对，因为是成对出现）

  • beforeCreate() created()【成对出现】
  • beforeMount() mounted()
  • beforeUpdate() updated()
  • beforeDestroy() destroyed()

看到以下这个页面，就已经说明尽力了前两个阶段

①创建Vue实例，准备好了响应式数据

②渲染好了模板

<!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>Document</title>
</head><body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},beforeCreate(){console.log('beforeCreate 响应式数据准备好之前');},created(){console.log('create 响应式数据准备好之后');},beforeMount(){console.log('beforeMount 模板渲染之前');},mounted(){console.log('mounted 模板渲染完成之后');}})</script>
</body></html>

3.生命周期两个案例

初始化渲染

功能要求：一进入页面先渲染如下，越早越好，写在created()中

JSON数据 

{"message": "获取新闻列表成功","data": [{"id": 1,"title": "5G渗透率持续提升，创新业务快速成长","source": "新京报经济新闻","cmtcount": 58,"img": "http://ajax-api.itheima.net/images/0.webp","time": "2222-10-28 11:50:28"},{"id": 5,"title": "为什么说中美阶段性协议再近一步，读懂周末的这些关键信息","source": "澎湃新闻","cmtcount": 131,"img": "http://ajax-api.itheima.net/images/4.webp","time": "2222-10-24 09:08:34"},{"id": 6,"title": "阿根廷大选结果揭晓：反对派费尔南德斯有话要说","source": "海外网","cmtcount": 99,"img": "http://ajax-api.itheima.net/images/5.webp","time": "2222-10-23 17:41:15"},{"id": 8,"title": "LV母公司当年史上最大并购：报价145亿美元购Tiffany","source": "澎湃新闻","cmtcount": 119,"img": "http://ajax-api.itheima.net/images/7.webp","time": "2222-10-22 03:59:44"},{"id": 9,"title": "黄峥当年1350亿蝉联80后白手起家首富：1年中财富每天涨1个亿","source": "胡润百富","cmtcount": 676,"img": "http://ajax-api.itheima.net/images/8.webp","time": "2222-10-21 06:19:37"}]
}
<!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>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{item.title}}</div><div class="info"><span>{{item.source}}</span><span>{{item.time}}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list:[]},async created(){const res = await axios.get('http://hmajax.itheima.net/api/news');console.log(res);console.log( typeof res.data.data);this.list = res.data.data;}})</script>
</body>
</html>

 

自动获取焦点

功能实现：刷新页面自动获取焦点


<!DOCTYPE html>
<html lang="zh-CN"><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><!-- 初始化样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"><!-- 核心样式 --><style>html,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #ad2a27;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}</style>
</head><body>
<div class="container" id="app"><div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt="黑马倒闭了"><div class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {words: ''},mounted(){// 核心思路：// 1. 等input框渲染出来 mounted 钩子// 2. 让input框获取焦点 inp.focus()document.querySelector('#inp').focus();}})
</script></body></html><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

综合案例：小黑记账清单

JSON数据: https://applet-base-api-t.itheima.net/bill?creator=小黑

{"message": "ok","data": [{"id": 88664051,"name": "饼干","price": 666,"creator": "小黑"},{"id": 88664050,"name": "游戏","price": 499,"creator": "小黑"},{"id": 88664049,"name": "丝袜","price": 6000,"creator": "小黑"},{"id": 88664047,"name": "小喵咪","price": 5000,"creator": "小黑"},{"id": 88664041,"name": "手机","price": 1000,"creator": "小黑"},{"id": 88664040,"name": "电脑","price": 9999,"creator": "小黑"}]
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box  a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input type="text" class="form-control" v-model.trim="thingName" placeholder="消费名称" /><input type="text" class="form-control" v-model.number="thingPrice" placeholder="消费价格" /><button type="button" class="btn btn-primary" @click="addOne">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in list" :key="item.id"><td>{{index + 1}}</td><td>{{item.name}}</td><td :class="{ red: item.price >= 500}">{{item.price.toFixed(2)}}</td><td><a href="javascript:;" @click="delOne(item.id)">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{totalCount.toFixed(2)}}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app = new Vue({el: '#app',data: {// list: JSON.parse(localStorage.getItem('list')) || [],list: [],thingName: '',thingPrice: '',},created(){// 重新渲染一次this.getList();// const res = await axios({//   url: 'https://applet-base-api-t.itheima.net/bill',//   method: 'GET',//   params:{//     creator: '小黑'//   }// });// const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {//   params: {//     creator: '小黑'//   }// })// this.list = res.data.data;// console.log(res.data.data);},computed:{// 计算消费总价totalCount(){let sum = 0;this.list.forEach(function(item){return sum +=item.price;})return sum;// return this.list.reduce((sum, item) => sum + item.price, 0);}},mounted(){// 基于准备好的DOM，初始化echarts实例this.myChart = echarts.init(document.querySelector('#main'));// // 配置饼图的配置项和数据// let option = {//     // 大标题//   title: {//     text: '消费账单列表',//     left: 'center'//   },//   // 提示框//   tooltip: {//     trigger: 'item'//   },//   // 图例//   legend: {//     orient: 'vertical',//     left: 'left'//   },//   // 数据项//   series: [//     {//       name: '消费账单',//       type: 'pie',//       radius: '50%', // 半径//       data: [//         // { value: 1048, name: '球鞋' },//         // { value: 735, name: '防晒霜' }//       ],//       emphasis: {//         itemStyle: {//           shadowBlur: 10,//           shadowOffsetX: 0,//           shadowColor: 'rgba(0, 0, 0, 0.5)'//         }//       }//     }//   ]// };// // 使用刚指定的配置项和数据显示饼图// this.myChart.setOption(option);this.myChart.setOption({// 大标题title: {text: '消费账单列表',left: 'center'},// 提示框tooltip: {trigger: 'item'},// 图例legend: {orient: 'vertical',left: 'left'},// 数据项series: [{name: '消费账单',type: 'pie',radius: '50%', // 半径data: [// { value: 1048, name: '球鞋' },// { value: 735, name: '防晒霜' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});},methods:{async getList(){const res = await axios({url: 'https://applet-base-api-t.itheima.net/bill',method: 'GET',params:{creator: '小黑',},});this.list = res.data.data;this.myChart.setOption({// 数据项series: [{// data: [//   { value: 1048, name: '球鞋' },//   { value: 735, name: '防晒霜' }// ]data: this.list.map(item => ({ value: item.price, name: item.name })),}]});console.log('重新绘图一次')},// 删除一条物品async delOne(id){// this.list = this.list.filter((item) => item.id !== id);const res = await axios({url: `https://applet-base-api-t.itheima.net/bill/${id}`,method: 'DELETE',});this.getList();},// 添加一条物品async addOne(){// 非空校验if(this.thingName === ''){alert('您未输入喔，请输入消费名称');return;}if(typeof this.thingPrice !== 'number'){alert('输入的必须是数字喔，请输入消费价格');return;}// 发送添加请求const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {creator: '小黑',name: this.thingName,price: this.thingPrice,})// const res = await({//   url: 'https://applet-base-api-t.itheima.net/bill',//   method: 'POST',//     creator: '小黑',//     name: this.thingName,//     price: this.thingPrice,// });// console.log('发送一次添加请求');// this.list.unshift({//   id: this.list[0].id + 1,//   name: this.thingName,//   price: this.thingPrice,// });// 重新渲染一次this.getList();// console.log('添加成功后，重新渲染一次');this.thingName = '';this.thingPrice = '';// console.log('执行一次添加功能');}},// watch:{//   fruitList:{//     handler(newValue){//       localStorage.setItem('list', JSON.stringify(newValue));//     }//   }// }})</script></body>
</html><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

工程化开发入门

Vue CLI v5.0.8

1.工程化开发和脚手架

安装教程亲测可用：Vue脚手架的安装（保姆级教程）_vscode安装vue脚手架-CSDN博客

脚手架Vue CLI 是Vue官方提供的一个全局命令工具，基于Node.js

搭建教程

脚手架目录

注意点
更改镜像源
npm config set registry https://registry.npmmirror.com
 node权限

一般node安装在非C盘，就会权限不足，需要手动调整一下权限

修改服务器端口号

2.项目运行流程

使用脚手架的项目，不在容器里直接编写模板语法，而是在App.vue中提供结构渲染

main.js入口文件的作用
// 此入口文件的核心作用：导入App.vue，基于App.vue创建结构渲染index.html// 1.导入 Vue 核心包
import Vue from 'vue'// 2.导入 App.vue 根组件
import App from './App.vue'// 提示：当前处于什么环境（默认生产环境 / 开发环境）
Vue.config.productionTip = false// 3. Vue实例化，提供render方法 -> 基于App.vue创建结构渲染index.html
new Vue({// el: '#app' 的作用：和$mount('#app')作用一致，用于指定Vue所管理容器render: h => h(App),// render: (h) => { return h(App)} 基于App创建元素结构
}).$mount('#app')

3.组件化开发&根组件

App.vue的样式支持less
  • 安装依赖
npm i less less-loader -D
  • style标签添加lang

4.普通组件注册

上面了解了根组件，下面了解普通组件

组件注册的两种方式

局部注册
  • 生成骨架

 案例演示

  • 创建组件

  • 根组件配置

App.vue

<template><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter></div>
</template><script>
import HmHeader from "./components/HmHeader.vue"
import HmMain from "./components/HmMain.vue"
import HmFooter from "./components/HmFooter.vue"export default {components: {// '组件名': 组件对象 组件名建议驼峰命名HmHeader: HmHeader,HmMain: HmMain,HmFooter: HmFooter,}
}
</script><style>.App {width: 500px;height: 800px;background-color: rgb(129, 201, 239);margin: 0 auto;padding: 20px;}
</style>
  • 分别编写每个组件

HmHeader.vue

<template><div class="hm-header">我是hm-header</div></template><script>export default {}</script><style>.hm-header{height: 100px;line-height: 100px;text-align: center;background-color: #826AA4;color: white;}</style>

HmMain.vue

<template><div class="hm-main">我是hm-main</div>
</template><script>
export default {}
</script><style>.hm-main{height: 520px;line-height: 520px;text-align: center;background-color: #FF9A41;color: white;margin-bottom: 20px;margin-top: 20px;}
</style>

HmFooter.vue

<template><div class="hm-footer">我是hm-footer</div>
</template><script>
export default {}
</script><style>.hm-footer{height: 100px;line-height: 100px;text-align: center;background-color: #6A93C4;color: white;}
</style>

全局注册

案例演示

通用的组件不适合局部注册

  • 创建组件

<template><button class="hm-button">通用按钮</button>
</template><script>
export default {}
</script><style>.hm-button{height: 50px;line-height: 50px;text-align: center;background-color: #349D55;border-radius: 5px;}
</style>
  • 在main.js导入与注册组件

// 导入需要全局注册的组件
import HmButton from './components/HmButton.vue'// 调用Vue.component 进行全局注册
// Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)
  • 使用组件

综合案例：小兔鲜首页

老师：先都做成局部的，然后对通用的修改成全局的

项目准备

字体样式和图片都不展示了，下面是两个css文件

  • base.css
/* 去除常见标签默认的 margin 和 padding */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {font: 16px/1.5  "Microsoft Yahei","Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color: #333;
}/* 去除列表默认样式 */
ul,
ol {list-style: none;
}/* 去除默认的倾斜效果 */
em,
i {font-style: normal;
}/* 去除a标签默认下划线，并设置默认文字颜色 */
a {text-decoration: none;color: #333;
}/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {width: 100%;height: 100%;vertical-align: middle;
}/* 去除input默认样式 */
input {border: none;outline: none;color: #333;
}h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 400;
}/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {content: "";display: table;
}
.clearfix::after {clear: both;
}
  • common.css
/* 公共的全局样式 */
.wrapper {margin: 0 auto;width: 1240px;
}.title {display: flex;justify-content: space-between;margin-top: 40px;margin-bottom: 30px;height: 42px;
}
.title .left {display: flex;align-items: flex-end;
}
.title .left h3 {margin-right: 35px;font-size: 30px;
}
.title .left p {padding-bottom: 5px;color: #A1A1A1;
}
.title .right {line-height: 42px;
}
.title .right .more {color: #A1A1A1;
}
.title .right .iconfont {margin-left: 10px;
}

组件注册

使用局部注册

  • 新建组件

  • 引入与注册

  • App.vue 
<template><div class="App"><!-- 快捷链接 --><XtxShortCut></XtxShortCut><!-- 顶部导航 --><XtxHeaderNav></XtxHeaderNav><!-- 轮播区域 --><XtxBanner></XtxBanner><!-- 新鲜好物 --><XtxNewGoods></XtxNewGoods><!-- 热门品牌 --><XtxHotBrand></XtxHotBrand><!-- 最新专题 --><XtxTopic></XtxTopic><!-- 版权底部 --><XtxFooter></XtxFooter></div>
</template><script>
import XtxShortCut from './components/XtxShortCut.vue'
import XtxHeaderNav from './components/XtxHeaderNav.vue'
import XtxBanner from './components/XtxBanner.vue'
import XtxNewGoods from './components/XtxNewGoods.vue'
import XtxHotBrand from './components/XtxHotBrand.vue'
import XtxTopic from './components/XtxTopic.vue'
import XtxFooter from './components/XtxFooter.vue'
export default {components: { XtxShortCut,XtxHeaderNav, XtxBanner, XtxNewGoods, XtxHotBrand, XtxTopic, XtxFooter },}
</script><style></style>

工程化进阶

组件的三大组成部分

组件的样式冲突scoped

每个组件应该有着自己独立的样式，推荐加上scoped

scoped原理

data必须是一个函数

data从变量改成函数有什么好处？

出了格式有些不一样，其他用法与之前是一样的

data (){return {}
}
  • 之前的用法

  • 现在的用法

组件通信

什么是组件通信

通信流程图

不同 的组件关系，通信方案不一样的

组件通信解决方案

父传子（props）

props详解：【Vue2.x】props技术详解-CSDN博客

props可以理解为标签的自定义属性

子传父（$emit）

非父子（event bus事件总线）

  • 工具类utils / EventBus.js
import Vue from 'vue'// 创建一个空vue实例
const Bus  =  new Vue()
// 导出vue实例
export default Bus
  • BaseA.vue（接收方）

什么时候开始监听呢？因该是在dom操作之前，数据准备好之后，最好是在首次渲染之前，也就是created

  • BaseB.vue（发布方）

非父子（provide inject）

实现跨层级共享数据，不需要爷爷 -> 父亲 -> 孙子，而是直接 爷爷 -> 孙子

注意点

这种写法，简单类型数据是非响应式的，也就是数据不会随时变化

进阶语法

v-model原理

模版中获取形参

在行内拿形参不能写e，要写$event

v-model处理表单类组件封装

简化代码

图片里文字进行更改：方法名只能取input，prop属性名只能取value，不能随便取，否则不能简化

sync修饰符

上面使用v-model简写，虽然能实现父子组件双向绑定，但是简写方法的props属性名必须是value，明显不合适，无语义

与v-model效果相同，语法稍有不同

达到了v-model的效果，而且能自定义props属性名

ref 和 $refs获取组件dom

  • 比原生JS的querySelector好在哪？

querySelector是从整个页面查找，$refs是从当前组件查找

  • 要在模板渲染成功后再使用

  • 使用方法

Vue异步更新、$nextTick

Vue要先渲染结构，操作dom需要异步更新dom（提升性能），渲染完成才能操作

<template><div class="app"><div v-if="isShowEdit"><input type="text" v-model="editValue" ref="inp" /><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="editFn">编辑</button></div></div>
</template><script>
export default {data() {return {title: '大标题',isShowEdit: false,editValue: '',}},methods: {editFn() {// 1.显示文本框this.isShowEdit = true// 2.让文本框聚焦 （会等dom更新完之后 立马执行nextTick中的回调函数）// this.$nextTick(() => {//   console.log(this.$refs.inp)//   this.$refs.inp.focus()// })setTimeout(() => {this.$refs.inp.focus()}, 0)},},
}
</script><style>
</style>

下一篇：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/851334.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

已解决Error || RuntimeError: size mismatch, m1: [32 x 100], m2: [500 x 10]

已解决Error || RuntimeError: size mismatch, m1: [32 x 100], m2: [500 x 10]

已解决Error || RuntimeError: size mismatch, m1: [32 x 100], m2: [500 x 10] 原创作者&#xff1a; 猫头虎 作者微信号&#xff1a; Libin9iOak 作者公众号&#xff1a; 猫头虎技术团队 更新日期&#xff1a; 2024年6月6日 博主猫头虎的技术世界 &#x1f31f; 欢迎来…
阅读更多...
第十一篇——信息增量：信息压缩中的保守主义原则

第十一篇——信息增量：信息压缩中的保守主义原则

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 通过信息中的保守主义&#xff0c;我想到了现实中人的保守主义一样&#…
阅读更多...
汇编语言作业（五）

汇编语言作业（五）

目录 一、实验目的 二、实验内容 三、实验步骤以及结果 四、实验结果与分析 五、 实验总结 一、实验目的 1.熟悉掌握汇编语言的程序结构&#xff0c;能正确书写数据段、代码段等 2&#xff0c;利用debug功能&#xff0c;查看寄存器&#xff08;CS,IP,AX,DS..)及数据段的…
阅读更多...
基于AI大文本模型的智慧对话开发设计及C#源码实现，实现智能文本改写与智慧对话

基于AI大文本模型的智慧对话开发设计及C#源码实现，实现智能文本改写与智慧对话

文章目录 1.AI 大模型发展现状2.基于AI服务的智慧对话开发2.1 大模型API选择2.2 基于C#的聊天界面开发2.3 星火大模型API接入2.4 优化开发界面与显示逻辑 3.源码工程Demo及相关软件下载参考文献 1.AI 大模型发展现状 端午假期几天&#xff0c;关注到国内的AI大模型厂商近乎疯狂…
阅读更多...
计算机网络期末考试知识点（关键词：江中）

计算机网络期末考试知识点（关键词：江中）

目录 大家端午节快乐呀&#xff01;又到了一年两度的期末考试月了&#xff0c;这里给大家整理了一些复习知识点&#xff0c;大家可以边吃粽子边复习&#xff0c;事半功倍哈哈哈。祝各位期末过&#xff01;过&#xff01;过&#xff01;。 1 第一章 计算机网络体系结构 计算机…
阅读更多...
Kaggle -- Digit Recognizer 98.57%

Kaggle -- Digit Recognizer 98.57%

使用卷积神经网络进行模型构建&#xff0c;代码如下&#xff1a; import pandas as pd import numpy as np import torch import torch.nn as nn import torch.optim as optim import torch.nn.functional as F from torch.utils.data import DataLoader, Dataset, random_spl…
阅读更多...
【MySQL】聊聊唯一索引是如何加锁的

【MySQL】聊聊唯一索引是如何加锁的

首先我们要明确&#xff0c;加锁的对象是索引&#xff0c;加锁的基本单位是next-key lock&#xff0c;由记录锁和间隙锁组成。next-key是前开后闭区间&#xff0c;间隙锁是前开后开区间。根据不同的查询条件next-key 可能会退化成记录锁或间隙锁。 在能使用记录锁或者间隙锁就…
阅读更多...
电路防护-贴片陶瓷气体放电管

电路防护-贴片陶瓷气体放电管

贴片陶瓷气体放电管 GDT工作原理GDT主要特性参数典型电路压敏电阻与 TVS 管的区别 GDT工作原理 陶瓷气体放电管是一种电子器件&#xff0c;其工作原理基于气体放电现象。这种管子的内部填充了一种特定的气体&#xff0c;通常是氖气或氩气。当管子两端施加足够的电压时&#xf…
阅读更多...
vivado HW_ILA_DATA、HW_PROBE

vivado HW_ILA_DATA、HW_PROBE

HW_ILA_DATA 描述 硬件ILA数据对象是ILA调试核心上捕获的数据的存储库 编程到当前硬件设备上。upload_hw_ila_data命令 在从ila调试移动捕获的数据的过程中创建hw_ila_data对象 核心&#xff0c;hw_ila&#xff0c;在物理FPGA上&#xff0c;hw_device。 read_hw_ila_data命令还…
阅读更多...
nginx优化与防盗链【☆☆☆】

nginx优化与防盗链【☆☆☆】

目录 一、用户层面的优化 1、隐藏版本号 方法一&#xff1a;修改配置文件 方法二&#xff1a;修改源码文件&#xff0c;重新编译安装 2、修改nginx用户与组 3、配置nginx网页缓存时间 4、nginx的日志切割 5、配置nginx实现连接超时 6、更改nginx运行进程数 7、开启网…
阅读更多...
1 c++多线程创建和传参

1 c++多线程创建和传参

什么是进程&#xff1f; 系统资源分配的最小单位。 什么是线程&#xff1f; 操作系统调度的最小单位&#xff0c;即程序执行的最小单位。 为什么需要多线程&#xff1f; &#xff08;1&#xff09;加快程序执行速度和响应速度, 使得程序充分利用CPU资源。 &#xff08;2&…
阅读更多...
Python 全栈体系【四阶】（五十八）

Python 全栈体系【四阶】（五十八）

第五章 深度学习 十三、自然语言处理&#xff08;NLP&#xff09; 3. 文本表示 3.1 One-hot One-hot&#xff08;独热&#xff09;编码是一种最简单的文本表示方式。如果有一个大小为V的词表&#xff0c;对于第i个词 w i w_i wi​&#xff0c;可以用一个长度为V的向量来表示…
阅读更多...
npm install 的原理

npm install 的原理

1. 执行命令发生了什么 &#xff1f; 执行命令后&#xff0c;会将安装相关的依赖&#xff0c;依赖会存放在根目录的node_modules下&#xff0c;默认采用扁平化的方式安装&#xff0c;排序规则为&#xff1a;bin文件夹为第一个&#xff0c;然后是开头系列的文件夹&#xff0c;后…
阅读更多...
Linux网络诊断工具mtr命令详解

Linux网络诊断工具mtr命令详解

目录 一、mtr概述 二、mtr的特点 1、动态路由显示 2、数据包类型 3、显示延迟和丢包 4、过滤和日志 5、网络探测 三、基本用法 1、基本语法 2、帮助 3、常用选项 四、输出解释 1、常见mtr命令及其输出 2、输出解释 四、命令实例 1. 最基本的用法 2. 显示报告形式…
阅读更多...
SpringBoot 配置事务

SpringBoot 配置事务

SpringBoot 在启动时已经加载了事务管理器&#xff0c;所以只需要在需要添加事务的方法/类上添加Transactional即可生效&#xff0c;无需额外配置。 TransactionAutoConfiguration 事务的自动配置类解析&#xff1a; SpringBoot 启动时加载/META-INF/spring/org.springframewor…
阅读更多...
帕友的小贴士，锻炼

帕友的小贴士，锻炼

帕金森病作为一种慢性神经系统疾病&#xff0c;对患者的生活质量产生了深远的影响。虽然医学界对于帕金森病的治疗仍在不断探索&#xff0c;但合理的锻炼已经被证实是改善患者症状、提高生活质量的有效途径之一。本文旨在为帕金森病患者推荐一些适合的锻炼方法&#xff0c;帮助…
阅读更多...
c#未能加载基类System错误 这台计算机上缺少此项目引用的 NuGet 程序包

c#未能加载基类System错误 这台计算机上缺少此项目引用的 NuGet 程序包

拷贝代码到另一台计算机运行&#xff0c;打开Form1.cs报错 首先确认package的框架 如果是472&#xff0c;则更换472的框架 打开项目->xx属性&#xff0c;进行修改 如果框架正确&#xff0c;就是未识别到程序包 可以参考&#xff1a; https://www.cnblogs.com/txwtech/p/1…
阅读更多...
WPF真入门教程32--WPF数字大屏项目实干

WPF真入门教程32--WPF数字大屏项目实干

1、项目背景 WPF (Windows Presentation Foundation) 是微软的一个框架&#xff0c;用于构建桌面客户端应用程序&#xff0c;它支持富互联网应用程序&#xff08;RIA&#xff09;的开发。在数字大屏应用中&#xff0c;WPF可以用来构建复杂的用户界面&#xff0c;展示庞大的数据…
阅读更多...
day31贪心算法part01| 理论基础 455.分发饼干 376. 摆动序列 53. 最大子序和

day31贪心算法part01| 理论基础 455.分发饼干 376. 摆动序列 53. 最大子序和

**455.分发饼干 ** 视频讲解 | 力扣链接刚开始想到的&#xff0c;但是这样太暴力了&#xff0c;太笨了 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {// 胃口g 饼干尺寸sint result 0;sort(s.begin(), s.end());…
阅读更多...
后方碰撞预警系统技术规范（简化版）

后方碰撞预警系统技术规范（简化版）

后方碰撞预警系统技术规范（简化版） 1 系统概述2 预警区域3 预警目标4 功能需求功能条件5 显示需求6 指标需求1 系统概述 后方碰撞预警系统RCW（Rear Collision Warning）是在后方车辆即将与自车发生碰撞之前，激活危险警告灯以较高频率闪烁，从而吸引后方驾驶员的注意力，避免…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023