Vue笔记(二)

Vue(一):Vue笔记(一)-CSDN博客


目录

综合案例:水果购物车

 生命周期

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

2.生命周期函数(钩子函数【8个】)

3.生命周期两个案例

初始化渲染

自动获取焦点

综合案例:小黑记账清单

工程化开发入门

1.工程化开发和脚手架

搭建教程

脚手架目录

注意点

更改镜像源

 node权限

修改服务器端口号

2.项目运行流程

main.js入口文件的作用

​编辑

3.组件化开发&根组件

App.vue的样式支持less

4.普通组件注册

组件注册的两种方式

局部注册

 案例演示

全局注册

案例演示

综合案例:小兔鲜首页

项目准备

组件注册

工程化进阶

组件的三大组成部分

组件的样式冲突scoped

scoped原理

​编辑

data必须是一个函数

组件通信

什么是组件通信

通信流程图

组件通信解决方案

父传子(props)

​编辑

子传父($emit)

非父子(event bus事件总线)

注意点

进阶语法

v-model原理

模版中获取形参

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

简化代码

sync修饰符

ref 和 $refs获取组件dom

Vue异步更新、$nextTick


综合案例:水果购物车

项目功能:

视频链接: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>

下一篇:Vue笔记(三)-CSDN博客

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

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

相关文章

Node.js和npm的安装及配置

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞 I/O 的模型。 npm&#xff08;node package manager&#xff09;是一个 Node.js 包管理和分发工具&#xff0c;也是整个 Node.js 社区最流行、支持第三方模块最多的包管理器。使…

2024.6.14 作业 xyt

使用手动连接&#xff0c;将登录框中的取消按钮使用第二中连接方式&#xff0c;右击转到槽&#xff0c;在该槽函数中&#xff0c;调用关闭函数 将登录按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c…

Unity2D计算两个物体的距离

1.首先新建一个场景并添加2个物体 2.创建一个脚本并编写代码 using UnityEngine;public class text2: MonoBehaviour {public GameObject gameObject1; // 第一个物体public GameObject gameObject2; // 第二个物体void Update(){// 计算两个物体之间的距离float distance Vec…

学习笔记——网络管理与运维——SNMP(SNMP架构)

三、SNMP架构 1、SNMP结构概述 SNMP被设计为工作在TCP/IP协议族上&#xff0c;基于TCP/IP协议工作&#xff0c;对网络中支持SNMP协议的设备进行管理。所有支持SNMP协议的设备都提供SNMP这个统一界面&#xff0c;使得管理员可以使用统一的操作进行管理&#xff0c;而不必理会设…

课设--学生成绩管理系统(一)

欢迎来到 Papicatch的博客 文章目录 &#x1f349;技术核心 &#x1f349;引言 &#x1f348;标识 &#x1f348;背景 &#x1f348;项目概述 &#x1f348; 文档概述 &#x1f349;可行性分析的前提 &#x1f348;项目的要求 &#x1f348;项目的目标 &#x1f348;…

高才通通过后,香港身份证办理

高才通通过后&#xff0c;到香港前需要准备 身份证办理预约&#xff08;流程见下面&#xff09;办理好D签&#xff1a;在入境前&#xff0c;根据入境处给的签证&#xff0c;下载签证并办理港澳通行证D签&#xff08;逗留签&#xff09;携带的文书&#xff1a;港澳通行证&#…

九、BGP路由属性和选路

目录 一、属性分类 1.1、公认属性 1.2、可选属性 二、选路原则 0、丢弃不可达 取值越大越优 1、Preferred-Value 2、Local_Preference 取值越小越优 3、路由优先级 4、AS_Path 5、Origin 6、MED 7、路由来源 8、Next_Hop的IGP度量值 BGP路由等价负载分担&#…

音频处理软件adobe audition使用教程

教程1笔记 基本操作 点击文件-》新建-》多轨会话&#xff1a; 编辑-》首选项&#xff0c;设置自动保存时间&#xff1a; 导入素材&#xff0c;文件-》导入素材&#xff0c;或者直接拖动进来文件&#xff01; 导出多轨混音&#xff1a; 更改为需要导出的格式wav,mp3等格式&am…

探索开源世界:2024年值得关注的热门开源项目推荐

文章目录 每日一句正能量前言GitCode成立背景如何使用GitCode如何把你现有的项目迁移至 GitCode&#xff1f;热门开源项目推荐actions-poetry - 管理 Python 依赖项的 GitLab CI/CD 工具项目概述技术分析应用场景特点项目地址 Spider - 网络爬虫框架项目简介技术分析应用场景项…

餐厅点餐系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;商品管理&#xff0c;用户管理&#xff0c;店家管理&#xff0c;广告管理 店家账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;商品管理&#xff0c;广告管…

机器学习:GANs网络在图像和视频技术中的应用前景

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

Qt creator day2练习

使用手动连接&#xff0c;将登录框中的取消按钮使用第二种方式&#xff0c;右击转到槽&#xff0c;在该函数中&#xff0c;调用关闭函数&#xff0c;将登录按钮使用Qt4版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为“admin”&#xff0c;密…

Swift 是 C++ 的最佳继任者

苹果称 Swift 是 C 的最佳继任者 Swift 是苹果公司在 2014 年推出的&#xff0c;一款旨在替代 Objective-C 的编程语言。但苹果语言和运行时总监 Ted Kremenek 在 WWDC24 的主题演讲中表示&#xff0c;Swift 也将取代 C。 “Swift 的安全性、速度和易用性&#xff0c;加上内…

mongodb 集群安装

1. 配置域名 Server1&#xff1a; OS version: CentOS Linux release 8.5.2111 hostnamectl --static set-hostname mongo01 vi /etc/sysconfig/network # Created by anaconda hostnamemong01 echo "192.168.88.20 mong1 mongo01.com mongo02.com" >> /…

阿里云OSS对象存储服务使用

阿里云OSS对象存储服务使用 1、点击产品&#xff0c;然后找到并点击对象存储OSS 2、然后点击立即开通&#xff0c;如果只是为了学习&#xff0c;简单的使用还是可以的&#xff0c;不需要购买 3、开通后进入OSS管理控制台界面,点击进入Bucket列表&#xff0c;然后创建一个Bucket…

Python基础教程(二十一):多线程

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

521. 最长特殊序列 Ⅰ(Rust单百解法-脑筋急转弯)

题目 给你两个字符串 a 和 b&#xff0c;请返回 这两个字符串中 最长的特殊序列 的长度。如果不存在&#xff0c;则返回 -1 。 「最长特殊序列」 定义如下&#xff1a;该序列为 某字符串独有的最长 子序列 &#xff08;即不能是其他字符串的子序列&#xff09; 。 字符串 s …

redis源码编译安装

源码下载地址http://download.redis.io/releases/ 1 环境准备 安装编译环境 sudo yum install gcc -y gcc -v 查看版本 sudo yum -y install centos-release-scl sudo yum -y install devtoolset-10-gcc devtoolset-10-gcc-c devtoolset-10-binutils scl enable devtool…

C语言之main函数的返回值(在linux中执行shell脚本并且获取返回值)

一&#xff1a;函数为什么要返回值 &#xff08;1&#xff09;函数 在设计的时候是设计了参数和返回值&#xff0c;参数是函数的输入&#xff0c;返回值是函数的输出 &#xff08;2&#xff09;因为函数需要对外输出数据&#xff08;实际上是函数运行的一些结果值&#xff09;…

如何区分人工智能生成的图像与真实照片(下)

4 功能上的不合理性 AI 生成的图像往往会因为缺乏对现实世界物体结构和相互作用的了解&#xff0c;而产生各种功能不合理之处。这些不合理之处主要表现在以下几个方面&#xff1a; 4.1 构图不合理 物体关系不合逻辑: AI 生成的图像中&#xff0c;物体和人物之间的关系可能不符…