118、ref引用
【1】JQuery里面的$("#app")。vue mv vm
【2】在vue中，程序员不需要操作dom。程序员只需要维护好数据即可（数据驱动视图）。所以在vue下，强烈不建议使用jquery！！！
【3】假设在vue项目中需要操作dom，怎么办呢，vue提供了ref，在不依赖jquery的情况下获取dom。
<!--第1部分-->
<template><div><h1 ref="ref_h1">App.vue父组件---{{countFromSon}}</h1> <!--！！！！！！！！！！！！！！！！！！！！！！--><button @click="showThis">打印this</button></div>
</template><!--第2部分-->
<script>// 导入需要使用的组件/* import Left from "@/components/Left";import Right from "@/components/Right";*/export default {/*  components: {Left,Right},*/data() {return {// 定义从子组件传值的属性countFromSon: 0}},methods: {showThis() {// console.log(this)this.$refs.ref_h1.style.color = "black" // ！！！！！！！！！！！！！！！！！！！！！！！！！！}}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>

****************************************************************************************************************************************************************************

119、使用ref引用组件实例
【1】感觉这种方式也可以用于父子兄弟传值呀.... 卧槽！！！！！！！！这个方案最简单的呀，from老师的透露！！！！！！！！！
【2】Left.vue
<template><div>我是Left.vue子组件---{{count}}<br/><button @click="count=count+1">点击+1</button><button @click="count=0">重置</button></div>
</template><script>import eventBus from "@/components/eventBus";export default {name: "Left",data() {return {count: 0}},methods: {sendMsg() {// 通过eventBus发送数据eventBus.$emit("sendMsgToBrotherRight", this.msg)}}}
</script><style scoped>.box {background-color: yellow;}
</style>
【3】App.vue
<!--第1部分-->
<template><div><h1>App.vue父组件</h1><button @click="showThis">打印this</button><button @click="reset">重置Left组件的count</button><Left ref="refLeft"></Left></div>
</template><!--第2部分-->
<script>// 导入需要使用的组件import Left from "@/components/Left";import Right from "@/components/Right";export default {components: {Left,Right},data() {return {name: '陈翔'}},methods: {showThis() {console.log(this)},reset() {this.$refs.refLeft.count = 0}}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>

****************************************************************************************************************************************************************************

120、初步实现按钮与文本框依次展示
【1】实现切换
<!--第1部分-->
<template><div><h1>App.vue父组件</h1><hr/><input type="text" v-if="visFlag" @blur="showButton"/><button @click="showInput" v-else>展示输入框</button></div></template><!--第2部分-->
<script>// 导入需要使用的组件import Left from "@/components/Left";import Right from "@/components/Right";export default {components: {Left,Right},data() {return {// 控制输入框与按钮展示切换visFlag: false}},methods: {showThis() {console.log(this)},reset() {this.$refs.refLeft.count = 0},showInput() {this.visFlag = true},showButton() {this.visFlag = false}}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>
【2】解决input不自动获取焦点问题。updated不行因为当隐藏input的时候，refInput还是未定义，会报错。感觉也可以使用v-show，我真是个天才呀。
<!--第1部分-->
<template><div><h1>App.vue父组件</h1><hr/><input type="text" v-if="visFlag" @blur="showButton" ref="refInput"/><button @click="showInput" v-else>展示输入框</button></div></template><!--第2部分-->
<script>// 导入需要使用的组件import Left from "@/components/Left";import Right from "@/components/Right";export default {components: {Left,Right},data() {return {// 控制输入框与按钮展示切换visFlag: false}},methods: {showThis() {console.log(this)},reset() {this.$refs.refLeft.count = 0},showInput() {this.visFlag = true// Cannot read properties of undefined (reading 'focus')" 报错是因为还没有updated完毕/* console.log(this.$refs.refInput)this.$refs.refInput.focus()*/// 用到了延迟cb调用this.$nextTick(() => {  // 需要dom渲染完毕后 执行  就是延迟执行。this.$refs.refInput.focus() // ！！！！！！！！！！！！！！！！！！})},showButton() {this.visFlag = false}}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>

****************************************************************************************************************************************************************************

123、购物车案例-some循环
【1】主要是解决forEach的全部循环问题
<!--第1部分-->
<template><div><h1>App.vue父组件</h1></div></template><!--第2部分-->
<script>// 导入需要使用的组件export default {name: "App",data() {return {// 控制输入框与按钮展示切换myArray: ['小红', '倪大红', '苏大强', '宝贝']}},created() {/* this.myArray.forEach((item, index) => {console.log('OK')  // 打印4次，说明性能浪费，一直执行，return没用 。一旦开始 无法在中间停止if (item == '小红') {console.log("找到的索引位置为：" + index)return}})*/this.myArray.some((item, index) => {console.log('OK')if (item == '小红') {console.log("找到的索引位置为：" + index)return true // 通过return true 可以终止循环 固定写法}})},methods: {}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>

****************************************************************************************************************************************************************************

124、every循环
【1】都是true就返回true，有一项是false则返回false
<!--第1部分-->
<template><div><h1>App.vue父组件</h1></div></template><!--第2部分-->
<script>// 导入需要使用的组件export default {name: "App",data() {return {// 控制输入框与按钮展示切换myArray: [{id: 1, name: '西瓜', state: true},{id: 2, name: '橙子', state: true},{id: 3, name: '操作', state: false}]}},created() {const res = this.myArray.every(item => item.state)console.log(res)},methods: {}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>

****************************************************************************************************************************************************************************

125、reduce方法的使用
【1】普通用法
<!--第1部分-->
<template><div><h1>App.vue父组件</h1></div></template><!--第2部分-->
<script>// 导入需要使用的组件export default {name: "App",data() {return {// 控制输入框与按钮展示切换myArray: [{id: 1, name: '西瓜', state: true, price: 10, count: 1},{id: 2, name: '橙子', state: true, price: 20, count: 2},{id: 3, name: '操作', state: false, price: 30, count: 3}]}},created() {let totalPrice = 0; // 总价this.myArray.filter(item => item.state).forEach(item => {totalPrice = totalPrice + item.price * item.count})console.log(totalPrice)},methods: {}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>
【2】高级用法created() {// let totalPrice = 0; // 总价const res = this.myArray.filter(item => item.state).reduce((totalPrice, item) => {return totalPrice = totalPrice + item.price * item.count}, 0)console.log(res)}

****************************************************************************************************************************************************************************

126、reduce的简化写法
【1】缩写版const res = this.myArray.filter(item => item.state).reduce((totalPrice, item) => totalPrice = totalPrice + item.price * item.count, 0)console.log(res)

****************************************************************************************************************************************************************************

127、购入车案例
【1】git ee网址可以下载优秀的项目，天下武功唯快不破。想让自己厉害，现在厉害的项目做起。

****************************************************************************************************************************************************************************

128、发起axios请求
【1】async function(){...await}
【2】在created调用initCartList方法created() {this.initCartList();console.log('========')}

****************************************************************************************************************************************************************************

129、请求回来的数据存到data里面去
【1】请求数据在页面要用的，必须转存到data中。
【2】此list数据就是转存到data里定义的list数据。

****************************************************************************************************************************************************************************

130、渲染Goods列表
【1】在App里面引用Goods，然后使用v-for="item in list"循环展示

****************************************************************************************************************************************************************************

131、为Goods组件封装属性
【1】:goodsName="item.goods_name"，把App拿到的item属性，传递给Goods组件使用。
【2】思路：父组件向子组件传值。包括名称、图片、价格等属性

****************************************************************************************************************************************************************************

132、Goods组件封装
【1】状态的封装

****************************************************************************************************************************************************************************

133、分析封装props
【1】:goods="item"  ====> 这是面向对象的思想，厉害 厉害  厉害goods: {type: Object,default: {}}
【2】假如有个商品列表页面{id,title,price,image}、促销商品列表页面{id,title,x_price,x_image}。如果用面向对象的思想，在Goods.vue就不能做兼容处理了
【3】所以，还是需要分开接受属性，我的哥哥呀。还得是老师分开的对。解决了是用goods.price还是goods.x_price呢，所以还是得分开写。提升了复用性。

****************************************************************************************************************************************************************************

134、如何修改商品
【1】@change 只要复选框勾选状态发生变化，会自动触发change函数  @change="sonStateChange"/*勾选框状态改变触发的函数* 注意e 就是子组件通过$emit传递到父组件中的数据，格式为{id,value}*/sonStateChange(e) {const newState = e.target.checked; // 拿到最新状态this.$emit("son-fatherStateChange", {  // 以此名称为准id: this.id,value: newState,});},
【2】<Goods @son-fatherStateChange="fatherStateChange"></Goods>
fatherStateChange(e) {this.list.some((item) => {if (item.id === e.id) {item.goods_state = e.value;return true;}});},

****************************************************************************************************************************************************************************

136、修改对应商品的状态
【1】使用some即可fatherStateChange(e) {/*根据子组件传的id value修改list里面的数据*/this.list.some((item) => {if (item.id === e.id) {item.goods_state = e.value;return true;}});},

****************************************************************************************************************************************************************************

137、定义fullState
【1】使用every即可// 动态计算全选状态fullState() {return this.list.every((item) => item.goods_state);},
【2】自学能力、调试BUG能力、学习分析解决问题的能力。
【3】state是true还是false就决定是否全选了。
<!--底部组件  state就是全选的标记--><Footer:state="fullState"@isFull="getState":amount="totalAmount":totalPrice="totalPrice"></Footer>
【4】又是一轮子传父 Footer.vue---App.vue
<input type="checkbox" id="allCheck" :checked="state" @change="getState"/>
********************************************************************************************getState(e) {this.$emit('sonFatherIsFull', e.target.checked)}
********************************************************************************************/*全选按钮的切换*/getState(val) {this.list.forEach((item) => {item.goods_state = val;});},
【5】父传子---子传父

****************************************************************************************************************************************************************************

140、总数量、价格的计算
【1】App的computed计算属性里面/*已勾选商品的数量*/totalAmount() {return this.list.filter((item) => item.goods_state).reduce((amount, item) => (amount += item.goods_count), 0);},
***************************************************************先指令后函数绑定
<Footer:state="fullState":amount="totalAmount":totalPrice="totalPrice"@sonFatherIsFull="getState"></Footer>
【2】也是App的computed计算属性里面
【3】父传子---子再传子...

****************************************************************************************************************************************************************************

142、发送给App.vue
【1】发现一个问题Counter---Goods---App传两次太麻烦了...不如都在App.vue中引用，这样最多就是父子关系对吧。App.vue是所有的父，其他的都是子。<Goodsv-for="item in list":key="item.id":goodsName="item.goods_name":goodsPrice="item.goods_price":imgUrl="item.goods_img":goodsState="item.goods_state":id="item.id"@son-fatherStateChange="fatherStateChange"><!--商品的数量--><Counter:counter_goodsCount="item.goods_count"@amount-change="getNewAmount(item, $event)"></Counter></Goods>
*********************************************************************************/*最新商品数量*/getNewAmount(item, e) {console.log(e)item.goods_count = e;},
【2】学好Vue先给用组件名_变量名的形式规范定义变量。难度将会大大降低！！！！！！！！！！！！！！！！！！改完后看着舒服多了。
<template><div id="app"><Header></Header><!--循环渲染Goods--><Goodsv-for="item in list":key="item.id":Goods_goodsName="item.goods_name":Goods_goodsPrice="item.goods_price":Goods_imgUrl="item.goods_img":Goods_goodsState="item.goods_state":Goods_id="item.id"@Goods_sonFatherStateChange="Goods_sonFatherStateChange"><!--商品的数量--><Counter:Counter_goodsCount="item.goods_count"@amount-change="getNewAmount(item, $event)"></Counter></Goods><!--底部组件  state就是全选的标记--><Footer:Footer_state="fullState":Footer_amount="totalAmount":Footer_totalPrice="totalPrice"@Footer_sonFatherIsFull="Footer_sonFatherIsFull"></Footer></div>
</template><script>import Header from "@/components/Header";import Goods from "@/components/Goods";import Footer from "@/components/Footer";import axios from "axios";import Counter from "@/components/Counter";export default {name: "App",data() {return {list: [],};},components: {Header,Goods,Counter,Footer,},methods: {// 封装请求列表数据方法async initCartList() {// 结构data后重命名为resconst {data: res} = await axios.get("https://www.escook.cn/api/cart");if (res.status === 200) {this.list = res.list;console.log(res.list);}},Goods_sonFatherStateChange(e) {/*根据子组件传的id value修改list里面的数据*/this.list.some((item) => {if (item.id === e.id) {item.goods_state = e.value;return true;}});},/*全选按钮的切换*/Footer_sonFatherIsFull(val) {this.list.forEach((item) => {item.goods_state = val;});},/*最新商品数量*/getNewAmount(item, e) {console.log(JSON.stringify(item) + "============" + e)item.goods_count = e;},},created() {this.initCartList();console.log('========')},computed: {// 动态计算全选状态fullState() {return this.list.every((item) => item.goods_state);},/*已勾选商品的价格*/totalAmount() {return this.list.filter((item) => item.goods_state).reduce((amount, item) => (amount += item.goods_count), 0);},totalPrice() {return this.list.filter((item) => item.goods_state).reduce((totalPrice, item) =>(totalPrice += item.goods_count * item.goods_price),0);},},};
</script><style lang="less">
</style>

****************************************************************************************************************************************************************************

144、动态计算已勾选的商品
【1】越看越知道规范命名的重要性，一是规范命名，二是命名能起到区分的作用才最重要的。
【2】南朝四百八十寺，多少楼台烟雨中？

****************************************************************************************************************************************************************************

145、课程概述
【1】动态组件、插槽、自定义指令（没必要吧）

****************************************************************************************************************************************************************************

146、动态组件
【1】控制多个组件的隐藏与展示
【2】<component>组件，专门实现动态组件的渲染
【3】is属性的值就是渲染组件的名字。:is='comName' 动态绑定属性的值。
<template><div><h1>App根组件</h1><!--动态组件渲染--><component :is="comName"></component></div>
</template><script>import Left from "@/components/Left";import Right from "@/components/Right";export default {name: "App",data() {return {comName: 'Left'};},components: {Left,Right},methods: {}};
</script><style>
</style>

****************************************************************************************************************************************************************************

147、动态切换组件的展示
【1】动态修改属性的值而已
<template><div><h1>App根组件</h1><button @click="comName='Left'">展示 Left</button><button @click="comName='Right'">展示 Right</button><!--动态组件渲染--><component :is="comName"></component></div>
</template><script>import Left from "@/components/Left";import Right from "@/components/Right";export default {name: "App",data() {return {comName: 'Left'};},components: {Left,Right},methods: {}};
</script><style>
</style>

****************************************************************************************************************************************************************************

148、keep-alive的使用
【1】如果Left组件有个自增函数，但当切换Right后再切回Left会发现，left组件重新初始化了，值也变为了0。
<h3>Left组件---{{count}}</h3>
<button @click="count=count+1">点击+1</button>
*********************************************************************
<template><div><h3>Left组件---{{count}}</h3><button @click="count=count+1">点击+1</button></div>
</template><script>export default {name: "Left",data() {return {count: 0}},created() {console.log("Left创建")},destroyed() {console.log("Left销毁")}}
</script><style scoped>.box {background-color: yellow;}
</style>
【2】让离开时不被销毁，包一层<keep-alive>即可。可以把内部的组件进行缓存，而不是销毁。<!--动态组件渲染--><keep-alive><component :is="comName"></component></keep-alive>

****************************************************************************************************************************************************************************

149、keep-alive组件指定
【1】include属性，通过include="Left,Another"只会缓存Left与Another，多个用逗号间隔。<!--动态组件渲染--><keep-alive include="Left,Another"><component :is="comName"></component></keep-alive>
【2】exclude代表排除组件。但是不能与include同时使用。

****************************************************************************************************************************************************************************

150、组件注册名称
【1】如果在声明组件时，没有为组件指定name名称，则组件名称默认就是注册时名称。
【2】默认的都是使用默认与组件名一样的名称。

****************************************************************************************************************************************************************************

151、插槽
【1】是vue为组件封装者提供的能力，一般开发用不到。
【2】<slot></slot>占位标签。小霸王游戏机的插槽来插卡，插什么样的卡，就是什么样的游戏
<template><div><h3>Left组件---{{count}}</h3><!--声明一个插槽--><slot></slot></div>
</template><script>export default {name: "Left",data() {return {count: 0}},created() {console.log("Left创建")},destroyed() {console.log("Left销毁")}}
</script><style scoped>.box {background-color: yellow;}
</style>
***********************************************************
<template><div><h1>App根组件</h1><Left>这是用来填充Left插槽的...</Left></div>
</template><script>import Left from "@/components/Left";import Right from "@/components/Right";export default {name: "App",data() {return {comName: 'Left'};},components: {Left,Right},methods: {}};
</script><style>
</style>

****************************************************************************************************************************************************************************

152、v-slot指令
【1】<slot></slot>默认的name="default"
<slot name="default"></slot>
【2】指定插槽的名称，放置内容。template只起到包裹作用，不是真正的标签。<Left><template v-slot:default> // ！！！！！！！！！！！！！！<span>这是用来填充Left插槽的...</span></template></Left>
【3】 v-slot:default必须用在template标签上，不能用在普通元素标签上。

****************************************************************************************************************************************************************************

153、v-slot的简写形式
【1】v-slot:简写是#
【2】插槽的默认内容指定
<template><div class="box"><h3>Left组件---{{count}}</h3><!--声明一个插槽--><slot name="default">这是名字为default的slot ...默认的</slot></div>
</template>

****************************************************************************************************************************************************************************

154、具名插槽的定义与使用
【1】Vant组件库。插槽的一一定义，与对应的一一使用。
<template><div><!--标题--><div><slot name="title"></slot></div><!--内容--><div><slot name="content"></slot></div><!--作者--><div><slot name="author"></slot></div></div>
</template><script>export default {name: "Article"}
</script><style scoped>.article-container {> div {min-height: 150px;}.header-box {background-color: pink;}.content-box {background-color: lightblue;}.footer-box {background-color: lightcoral;}}
</style>
【2】使用时一一对应
<template><div><h1>App根组件</h1><Article><template #title><span>一首诗</span></template><template #content><span>琴瑟无端五十铉，一年一柱思华年</span></template><template #author><span>李商隐</span></template></Article></div>
</template><script>import Left from "@/components/Left";import Right from "@/components/Right";import Article from "@/components/Article";export default {name: "App",data() {return {comName: 'Left'};},components: {Left,Right,Article},methods: {}};
</script><style>
</style>

****************************************************************************************************************************************************************************

155、作用域插槽的基本用法
【1】插槽里定义数据。加了属性的插槽就变成了作用域插槽。<!--内容--><div class="content-box"><slot name="content" msg="Hello Vue"></slot></div>
【2】父组件接收使用的是{}对象，.属性就可以使用了。<template #content="object"><span>琴瑟无端五十铉，一年一柱思华年</span>{{object.msg}}
</template>

****************************************************************************************************************************************************************************

156、作用域插槽解构赋值
【1】作用域插槽
<template><div><!--标题--><div><slot name="title"></slot></div><!--内容--><div><slot name="content" msg="Hello Vue" :user="user"></slot></div><!--作者--><div><slot name="author"></slot></div></div>
</template><script>export default {name: "Article",data() {return {user: {name: "陈翔",age: 20}};},}
</script><style scoped>.article-container {> div {min-height: 150px;}.header-box {background-color: pink;}.content-box {background-color: lightblue;}.footer-box {background-color: lightcoral;}}
</style>
【2】解构msg<template #content="{msg}"><span>琴瑟无端五十铉，一年一柱思华年</span><br/>{{msg}}
</template>
【3】解构user<template #content="{user}"><span>琴瑟无端五十铉，一年一柱思华年</span><br/>{{user}}
</template>
【4】同时结构
<template #content="{msg,user}"><span>琴瑟无端五十铉，一年一柱思华年</span><br/>{{msg}} {{user}}
</template>

****************************************************************************************************************************************************************************

157、基于slot插槽购物车重构
【1】功能一定好好测试，确实容易漏问题，人非圣贤，孰能无过。定义插槽<div class="goods_pa"><div class="price">￥{{ Goods_goodsPrice }}</div><slot></slot></div>
【2】使用插槽。<Counter:Counter_goodsCount="item.goods_count"@amount-change="getNewAmount(item, $event)">
</Counter>

****************************************************************************************************************************************************************************

160、私有自定义指令
【1】定义名字为color的指令，指向一个配置对象<h1 v-color>App根组件</h1>*************************************directives: {color: {}},
*******************************************<h1>哪个元素绑定，哪个元素变红！！！
<template><div><h1 v-color>App根组件</h1><Article><template #title><span>一首诗</span></template><template #content="{msg,user}"><span>琴瑟无端五十铉，一年一柱思华年</span><br/>{{msg}} {{user}}</template><template #author><span>李商隐</span></template></Article></div>
</template><script>import Left from "@/components/Left";import Right from "@/components/Right";import Article from "@/components/Article";export default {name: "App",components: {Left,Right,Article},directives: {color: {/*当指令第一次被绑定到元素上的时候，会立即触发bind函数*/bind(el) {console.log("触发v-color的bind函数...")el.style.color = "red"}}},methods: {}};
</script><style>
</style>

****************************************************************************************************************************************************************************

161、使用binding.value的值
【1】动态绑定data属性值。
<h1 v-color="color">App根组件</h1>
**************************************************data() {return {color: 'green'}},directives: {color: {/*当指令第一次被绑定到元素上的时候，会立即触发bind函数*/bind(el, binding) {console.log("触发v-color的bind函数..." + JSON.stringify(binding))el.style.color = binding.value}}},
***********************************************************这种传字符串的用法也可以
<h2 v-color="'black'">App根组件</h2>

****************************************************************************************************************************************************************************

162、自定义指令-update函数
【1】bind函数只会调用一次。更新则不会被执行
【2】 <button @click="color='red'">改变 color 的颜色值</button>data() {return {color: 'green'}},directives: {color: {/*当指令第一次被绑定到元素上的时候，会立即触发bind函数*/bind(el, binding) {console.log("触发v-color的bind函数..." + JSON.stringify(binding))el.style.color = binding.value},/*定义update！！！！！！！！！！！！！！*/update(el, binding) {console.log("触发v-color的bind函数..." + JSON.stringify(binding))el.style.color = binding.value}}},

****************************************************************************************************************************************************************************

163、自定义指令的简写
【1】原来的 VS 简写
color: {/!*当指令第一次被绑定到元素上的时候，会立即触发bind函数*!/bind(el, binding) {console.log("触发v-color的bind函数..." + JSON.stringify(binding))el.style.color = binding.value},/!*定义update*!/update(el, binding) {console.log("触发v-color的bind函数..." + JSON.stringify(binding))el.style.color = binding.value}}
****************************************************************************color(el, binding) {el.style.color = binding.value}

****************************************************************************************************************************************************************************

164、全局自定义指令
【1】像定义全局过滤器一样。这样不管是App.vue还是Article.vue都能用了。
/*main.js*/
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'Vue.config.productionTip = false
// 全局自定义指令
Vue.directive('color', function (el, binding) {el.style.color = binding.value
})new Vue({render: h => h(App),
}).$mount('#app')

****************************************************************************************************************************************************************************

165、main.js的小提示
【1】Vue.config.productionTip = false /*控制台console能不能看到提示，没有什么实际意义*/

****************************************************************************************************************************************************************************

166、eslint概述与作用
【1】约定代码风格。结尾要不要分号、缩进几个空格，保证写出代码的风格几乎是完全一样的。一开始用会比较难。
【2】WebStorm设置File---Settings---Editor-code style --- javascript
【3】no-console... no-debugger
【4】常用的eslint的语法，名字后面少一个空格。/**/前后强制使用一样的间距。
【5】vscode配置eslint

****************************************************************************************************************************************************************************

172、axios 的基本用法
【1】npm i axios -S
<template><div><h3>Left组件---</h3><button @click="getInfo">发起GET请求</button></div>
</template><script>import axios from 'axios'export default {name: "Left",data() {return {count: 0}},methods: {async getInfo() {const {data} = await axios.get(`http://localhost:8002/login`);console.log(data)}}}
</script><style scoped>.left-container {background-color: orange;min-height: 200px;flex: 1;}
</style>
【2】发起post请求
<template><div><h3>Right组件</h3><button @click="postInfo">发起POST请求</button></div>
</template><script>import axios from 'axios'export default {name: "Right",methods: {async postInfo() {const {data} = await axios.post(`http://localhost:8002/login`)console.log(data)}}}
</script><style scoped>.right-container {background-color: lightblue;min-height: 200px;flex: 1;}
</style>

****************************************************************************************************************************************************************************

173、把axios挂载到vue
【1】挂载到Vue原型属性
/*main.js*/
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'Vue.config.productionTip = false /*控制台console能不能看到提示，没有什么实际意义*/
// 全局自定义指令
Vue.directive('color', function (el, binding) {el.style.color = binding.value
})
// 挂载axios
Vue.prototype.axios = axiosnew Vue({render: h => h(App),
}).$mount('#app')
【2】const {data} = await this.axios.get(`http://localhost:8002/login`);使用不需要import操作了。
【3】后端路径优化操作！！！！！！！！！！！！！！！还是挂原型。这个比青戈讲的透彻呀。
// 挂载axios
axios.defaults.baseURL = `http://localhost:8002`   // ！！！！！！！！！！！！！
Vue.prototype.axios = axios

****************************************************************************************************************************************************************************

174、axios不利于API接口的复用。
【1】它无法实现API接口的复用。每次调用都需要重新写请求方法与请求参数。
【2】所以还有优化的空间。

****************************************************************************************************************************************************************************

175、路由的概念
【1】英文router，就是对应关系。SPA单页面应用程序。
【2】前端里，路由就是Hash地址，就是页面与地址的对应关系。

****************************************************************************************************************************************************************************

176、路由的工作方式
【1】点击路由链接---导致URL地址栏中Hash值发生变化---前端路由监听变化---Hash地址对应组件渲染到浏览器中。

****************************************************************************************************************************************************************************

178、路由的基本用法
【1】vue-router路由包，只能在vue项目使用。注意看官方文档。
【2】使用
*********************************************安装vue-router包
npm i vue-router@3.5.2 -S
*********************************************创建路由模块.js文件
src/router/index.js
*********************************************导入挂载
/*index.js路由模块*/
// 导入
import Vue from "vue";
import VueRouter from "vue-router";
// 调用
Vue.use(VueRouter)
// 创建路由实例对象
const router = new VueRouter()
// 向外共享路由实例对象
export default router
*********************************************声明路由和占位符
/*main.js*/
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import myRouter from './router/index.js'  // 导入路由模块，拿到路由的实例对象Vue.config.productionTip = false /*控制台console能不能看到提示，没有什么实际意义*/
// 全局自定义指令
Vue.directive('color', function (el, binding) {el.style.color = binding.value
})
// 挂载axios
axios.defaults.baseURL = `http://localhost:8002`
Vue.prototype.axios = axiosnew Vue({render: h => h(App),router: myRouter
}).$mount('#app')

****************************************************************************************************************************************************************************

179、基本用法-注意点
【1】import myRouter from './router/index.js'  可以写成import myRouter from './router'
【2】说明，如果给定的是文件夹，则默认是文件夹下面的index.js文件

****************************************************************************************************************************************************************************

180、路由模块基本用法、
【1】App中使用
<template><div><h1>App组件</h1><hr/><a href="#/home">首页</a><a href="#/movie">电影</a><a href="#/about">关于</a><hr/><!--只要在main.js配置了vue-router，则·可以使用router-view--><router-view></router-view></div>
</template><script>export default {name: "App",};
</script><style scoped>.box {display: flex;}
</style>
【2】index.js定义Hash与页面的对应关系
/*路由模块*/
// 导入
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/components/Home";
import Move from "@/components/Movie";
import About from "@/components/About";// 调用
Vue.use(VueRouter)// 创建路由实例对象
const router = new VueRouter({// routers是一个数组，是来定义hash地址与组件间的对应关系的。routes: [ // ！！！！！！！！！！！！！注意不是routers{path: '/home', component: Home},{path: '/movie', component: Move},{path: '/about', component: About},]
})// 向外共享路由实例对象
export default router

****************************************************************************************************************************************************************************

181、路由基本用法
【1】下面的就是叫做“路由规则”routes: [{path: '/home', component: Home},{path: '/movie', component: Move},{path: '/about', component: About},]
【2】router-link就是用来替换a标签的
<!-- <a href="#/home">首页</a><a href="#/movie">电影</a><a href="#/about">关于</a>--><!--安装与配置了vue-router后可以用router-link来替换普通的链接了--><router-link to="/home">首页</router-link><router-link to="/movie">电影</router-link><router-link to="/about">关于</router-link>
【3】路由的重定向。解决访问localhost:8080能直接访问home页面，而不是空页面routes: [{path: '/', redirect: '/home'},/*重定向到home*/{path: '/home', component: Home},{path: '/movie', component: Move},{path: '/about', component: About},]

****************************************************************************************************************************************************************************

183、嵌套路由
【1】套娃{path: '/about',component: About,children: [{path: '/left', component: Left},{path: '/right', component: Right},]},
**********************************************************
<template><div class="about-container"><h3>About组件</h3><hr/><router-link to="/left">Left组件</router-link><router-link to="/right">Right组件</router-link><hr/><router-view></router-view></div>
</template>

****************************************************************************************************************************************************************************

185、嵌套路由-默认子路由
【1】子路由一般不写/
<router-link to="/about/left">Left组件</router-link>
<router-link to="/about/right">Right组件</router-link>
【2】子路由一般不写/{path: '/about',component: About,redirect: '/about/left', // 默认子路由页面children: [//需要注意的是：子路由规则不要以/开头{path: 'left', component: Left},{path: 'right', component: Right}]}
【3】完整路由
/*路由模块*/
// 导入
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/components/Home";
import Move from "@/components/Movie";
import About from "@/components/About";
import Left from "@/components/Left";
import Right from "@/components/Right";// 调用
Vue.use(VueRouter)// 创建路由实例对象
const router = new VueRouter({// routers是一个数组，是来定义hash地址与组件间的对应关系的。routes: [{path: '/', redirect: '/home'},/*重定向到home*/{path: '/home', component: Home},{path: '/movie', component: Move},{path: '/about',component: About,redirect: '/about/left',children: [//需要注意的是：子路由规则不要以/开头{path: 'left', component: Left},{path: 'right', component: Right}]},]
})// 向外共享路由实例对象
export default router

****************************************************************************************************************************************************************************

186、动态路由匹配
【1】/mv/1  /mv/2  /mv/3不同的短片mv，怎么定向？
【2】使用英文的冒号: 可以指定动态路由项目。{path: '/movie/:id', component: Move},
【3】这样电影1-5都能匹配到Move组件。
<router-link to="/home">首页</router-link>
<router-link to="/movie/1">电影1</router-link>
<router-link to="/movie/2">电影2</router-link>
<router-link to="/movie/3">电影3</router-link>
<router-link to="/movie/4">电影4</router-link>
<router-link to="/movie/5">电影5</router-link>
【4】需求，Move组件中需要根据id的值来展示对应电影的详情信息。还可以写成 <span>获取到的id的值为{{$route.params.id}}</span>
<template><div class="movie-container"><h3>Movie组件</h3><!--<button @click="printThis">打印</button>--><span>获取到的id的值为{{this.$route.params.id}}</span>  ！！！！！！！！！！！！！！！！！</div>
</template><script>export default {name: "Move"}
</script><style scoped></style>

****************************************************************************************************************************************************************************

187、动态路由-开启props
【1】this.$route是路由的参数对象。this.$router是路由的导航对象。
***************************************开启propsroutes: [{path: '/', redirect: '/home'},/*重定向到home*/{path: '/home', component: Home},{path: '/movie/:id', component: Move, props: true}, // ！！！！！！必须开启{path: '/about',component: About,redirect: '/about/left',children: [//需要注意的是：子路由规则不要以/开头{path: 'left', component: Left},{path: 'right', component: Right}]},]
***************************************接收export default {name: "Move",props: ['id']}
***************************************使用
<span>获取到的id的值为{{this.$route.params.id}}---{{id}}</span>
【2】props: true路由规则里有参数项，必须指定。如果没有参数的就无需指定了。

****************************************************************************************************************************************************************************

188、拓展query和fullPath
【1】/movie/2  斜线后面2这叫做路径参数。
*************************************************
$route.params.id通过这个来拿$route.params.xxx
【2】/movie/2?name=zs&age=20 这种叫做查询参数
*************************************************
问号后面的参数项，叫做查询参数
通过this.$route.query查询
*************************************************可以通过Movie.vue打印this查看
<template><div class="movie-container"><h3>Movie组件</h3><!--<button @click="printThis">打印</button>--><!--this.$route是路由的参数对象--><span>获取到的id的值为{{this.$route.params.id}}---{{id}}</span><button @click="showThis">打印this</button></div>
</template><script>export default {name: "Move",props: ['id'],methods: {showThis() {console.log(this);}}}
</script><style scoped></style>
【2】通过打印this可以看到path为/movie/2。而fullPath为/movie/2?name=zs。

****************************************************************************************************************************************************************************

189、编程式导航跳转-push、replace、go
【1】声明式导航（点击标签的形式）&编程式导航（js写代码实现的跳转）
【2】vue-router提供了编程式导航push、replace、go
*********************************都是this.$router（注意多个r）push 会增加一条历史记录
<template><div class="home-container"><h3>Home组件</h3><hr/><button @click="gotoMovie1">跳转到电影1页面</button></div>
</template><script>export default {name: "Home",methods: {gotoMovie1() {this.$router.push('/movie/1')}}}
</script><style scoped></style>
*********************************replace，跳转指定hash地址，并替换掉当前的历史记录
<template><div class="home-container"><h3>Home组件</h3><hr/><button @click="pushMovie1">push跳转到电影1页面</button><button @click="replaceMovie1">replace跳转到电影1页面</button></div>
</template><script>export default {name: "Home",methods: {pushMovie1() {this.$router.push('/movie/1')},replaceMovie1() {this.$router.replace('/movie/1')}}}
</script><style scoped></style>
******************************************************************go(数值n)
<template><div class="movie-container"><h3>Movie组件</h3><!--<button @click="printThis">打印</button>--><!--this.$route是路由的参数对象--><span>获取到的id的值为{{this.$route.params.id}}---{{id}}</span><button @click="showThis">打印this</button><button @click="goBack">回退</button></div>
</template><script>export default {name: "Move",props: ['id'],methods: {showThis() {console.log(this);},goBack() {this.$router.go(-1)}}}
</script><style scoped></style>
******************************************************************go的简洁用法
this.$router.back()
this.$router.forward()

****************************************************************************************************************************************************************************

190、导航守卫可以控制路由的访问权限
【1】比如需要token才能访问
Main—>导航守卫（检测是否登录）—>Login登录—>Main后台主页
【2】全局前置守卫
******************************************************************
每次发生路由的导航跳转时，都会触发全局前置守卫。因此全局前置守卫中，程序
员可以对每个路由进行访问权限控制。
【3】守卫方法的3个形参to、from、next
******************************************************************router-index.js
// 为router声明全局前置导航守卫
// 发生路由跳转，必然触发beforeEach指定的function回调
router.beforeEach(function (to, from, next) {// next() 不调用则所有的路由都被拦截，不调谁都不能访问
})
******************************************************************
// 为router声明全局前置导航守卫
// 发生路由跳转，必然触发beforeEach指定的function回调
router.beforeEach(function (to, from, next) {console.log(from) // 将要离开的console.log(to) // 将要访问的next()
})

****************************************************************************************************************************************************************************

191、导航守卫-next函数的三种调用方式
【1】如果有访问权限，next() 直接放行
【2】如果没有访问权限，强制用next('/Login')强制访问Login页面
【3】强制停留在当前页面next(false)

****************************************************************************************************************************************************************************

192、路由守卫-控制访问权限
【1】定义Login和Main的路由规则
*********************************************************************
// 创建路由实例对象
const router = new VueRouter({// routers是一个数组，是来定义hash地址与组件间的对应关系的。routes: [{path: '/', redirect: '/home'},/*重定向到home*/{path: '/home', component: Home},{path: '/movie/:id', component: Move, props: true},{path: '/about',component: About,redirect: '/about/left',children: [//需要注意的是：子路由规则不要以/开头{path: 'left', component: Left},{path: 'right', component: Right}]},{path: "/login", component: Login},{path: "/main", component: Main},]
})
*********************************************************************拦截判断
router.beforeEach(function (to, from, next) {// 拿到用户将要访问的hash地址，如果等于/main 证明页面是需要登录才能访问的if (to.path === '/main') {const token = localStorage.getItem('token')if (token) {next()} else {next('/login')}} else {next()}
})
*********************************************************************模拟登录
在LocalStorage下面的本地网址添加token 123然后再点击登录

****************************************************************************************************************************************************************************

193、VUE2.0实例-安装和配置路由
【1】npm i vue-router@3.5.2 -S
**********************************************************路由的配置
Vue.use(VueRouter);
**********************************************************
import Vue from 'vue'
import App from './App.vue'
import router from './router'// 导入样式
import './assets/css/bootstrap.css'
import './index.css'Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

****************************************************************************************************************************************************************************

194、基于路由渲染登录组件
【1】在router-index.js里配置路由跳转
********************************************************************//登录的路由规则，上面导入{path: "/login",component: Login,},
********************************************************************App.vue
<template><!-- 路由占位符 --><router-view></router-view>
</template>
********************************************************************根路径重定向{path: "/",redirect: "/login",},

****************************************************************************************************************************************************************************

195、模拟登录
【1】登录的判断逻辑admin 123456
<template><div><div><!-- 头像区域 --><div class="text-center avatar-box"><img src="../assets/logo.png" class="img-thumbnail avatar" alt=""/></div><!-- 表单区域 --><div class="form-login p-4"><!-- 登录名称 --><div class="form-group form-inline"><label for="username">登录名称</label><input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off"v-model.trim="username"/></div><!-- 登录密码 --><div class="form-group form-inline"><label for="password">登录密码</label><input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码"v-model.trim="password"/></div><!-- 登录和重置按钮 --><div class="form-group form-inline d-flex justify-content-end"><button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button><button type="button" class="btn btn-primary" @click="login">登录</button></div></div></div></div>
</template><script>export default {name: 'MyLogin',data() {return {username: '',password: ''}},methods: {reset() { //！！！！！！！！！！！！！this.username = ''this.password = ''},login() { //！！！！！！！！！！！！！if (this.username === 'admin' && this.password === '123456') {//存储tokenlocalStorage.setItem('token', 'kong xxx')//跳转 到后台主页this.$router.push('/home')} else {//登录失败localStorage.removeItem('token')}}}}
</script><style scoped>.login-container {background-color: #35495e;height: 100%;.login-box {width: 400px;height: 250px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);.form-login {position: absolute;bottom: 0;left: 0;width: 100%;box-sizing: border-box;}}}.form-control {flex: 1;}.avatar-box {position: absolute;width: 100%;top: -65px;left: 0;.avatar {width: 120px;height: 120px;border-radius: 50% !important;box-shadow: 0 0 6px #efefef;}}
</style>

****************************************************************************************************************************************************************************

196、说明Token
【1】前缀带不带取决于后端服务器

****************************************************************************************************************************************************************************

197、实现后台主页的基础布局
【1】Home.vue
**************************************************************
<template><div><!-- 头部区域 --><MyHeader></MyHeader><!-- 页面主体区域 --><div><!-- 左侧边栏 --><MyAside></MyAside><!-- 右侧内容主体区 --><div><!-- 路由占位符 --><router-view></router-view></div></div></div>
</template>
【2】Header.vue
<template><div class="layout-header-container d-flex justify-content-between align-items-center p-3"><!-- 左侧 logo 和 标题区域 --><div class="layout-header-left d-flex align-items-center user-select-none"><!-- logo --><img src="../../assets/heima.png" alt=""><!-- 标题 --><h4 class="layout-header-left-title ml-3">黑马后台管理系统</h4></div><!-- 右侧按钮区域 --><div><button type="button" class="btn btn-light" @click="logout">退出登录</button></div></div>
</template><script>export default {name: 'MyHeader',methods: {logout() {//清空tokenlocalStorage.removeItem('token')//跳转回登录页面this.$router.push('/login')}}}
</script><style scoped>.layout-header-container {height: 60px;border-bottom: 1px solid #eaeaea;}.layout-header-left-img {height: 50px;}
</style>
【3】Aside.vue
<template><div><!-- 左侧边栏列表 --><ul class="user-select-none menu"><li><!-- 子路由链接要以/开头 --><router-link to="/home/users">用户管理</router-link></li><li><router-link to="/home/rights">权限管理</router-link></li><li><router-link to="/home/goods">商品管理</router-link></li><li><router-link to="/home/orders">订单管理</router-link></li><li><router-link to="/home/settings">系统设置</router-link></li></ul></div>
</template><script>export default {name: 'MyAside'}
</script><style scoped>.layout-aside-container {width: 250px;height: 100%;border-right: 1px solid #eaeaea;}.menu {list-style-type: none;padding: 0;.menu-item {line-height: 50px;font-weight: bold;font-size: 14px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;&:hover {background-color: #efefef;cursor: pointer;}a {display: block;color: black;padding-left: 30px;&:hover {text-decoration: none;}}}}// 设置路由高亮效果.router-link-active {background-color: #efefef;box-sizing: border-box;position: relative;// 伪元素实现路由高亮效果&::before {content: ' ';display: block;width: 4px;height: 100%;position: absolute;left: 0;top: 0;background-color: #42b983;}}
</style>

****************************************************************************************************************************************************************************

199、实现子路由的嵌套展示
【1】具体的路由嵌套。
routes: [{path: "/",redirect: "/login",},//登录的路由规则，上面导入{path: "/login",component: Login,},//后台主页的路由规则{path: "/Home",component: Home,redirect: '/home/users',children: [//在router-link中需要写全/，在子路由规则中，子路由 / 不需要再写{path: 'users', component: Users},{path: 'rights', component: Rights},{path: 'goods', component: Goods},{path: 'orders', component: Orders},{path: 'settings', component: Settings},//用户详情页的路由规则 (只有在路由规则中可以出现冒号：){path: 'userinfo/:id', component: UserDetail},//第2+1种方式：users{path:'users/:id',component:UserDetail},// 在userdetail中获取路径中的id值信息（第二种方式）//{path:'userinfo/:id',component:UserDetail,props:true},]

****************************************************************************************************************************************************************************

200、点击进入用户详情页
【1】用户列表页面
<template><div><!-- 标题 --><h4>用户管理</h4><!-- 用户列表 --><table class="table table-bordered table-striped table-hover"><thead><tr><th>#</th><th>姓名</th><th>年龄</th><th>头衔</th><th>操作</th></tr></thead><tbody><tr v-for="item in userlist" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.position}}</td><td><a href="#" @click.prevent="gotoDeatail(item.id)">详情</a><!-- 第2+1种方式 --><!-- <router-link :to="'/home/users/' + item.id">详情</router-link> --></td></tr></tbody></table></div>
</template><script>export default {name: 'MyUser',data() {return {// 用户列表数据userlist: [{id: 1, name: '嬴政', age: 18, position: '始皇帝'},{id: 2, name: '李斯', age: 35, position: '丞相'},{id: 3, name: '吕不韦', age: 50, position: '商人'},{id: 4, name: '赵姬', age: 48, position: '王太后'}]}},methods: {gotoDeatail(id) {this.$router.push('/home/userinfo/' + id)}}}
</script><style scoped></style>
【2】用户详情页面
<template><div><button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button><!-- 使用this.$route.params.id 获取路径中的id值信息（第一种方式）--><h4>用户详情 --- {{this.$route.params.id}}</h4><!-- （第二种方式）使用下面props属性赋值，并在路由规则中props:true，就可以直接使用id --><!-- <h4>用户详情 --- {{id}}</h4> --></div>
</template><script>export default {name: 'MyUserDetail',props: ['id']}
</script><style scoped></style>

****************************************************************************************************************************************************************************

201、升级用户详情页的路由
【1】动态写id传递id参数gotoDetail(id) {this.$router.push('/home/userinfo/' + id)
}
【2】详情页拿到id{{this.$route.params.id}}

****************************************************************************************************************************************************************************

202、路由path的注意点
【1】路由重定向{path: "/Home",component: Home,redirect: '/home/users',children: [//在router-link中需要写全/，在子路由规则中，子路由 / 不需要再写{path: 'users', component: Users},{path: 'rights', component: Rights},{path: 'goods', component: Goods},{path: 'orders', component: Orders},{path: 'settings', component: Settings},//用户详情页的路由规则 (只有在路由规则中可以出现冒号：){path: 'userinfo/:id', component: UserDetail},//第2+1种方式：users{path:'users/:id',component:UserDetail},// 在userdetail中获取路径中的id值信息（第二种方式）//{path:'userinfo/:id',component:UserDetail,props:true},]},【2】path后面不要跟大写字母，这是约定

****************************************************************************************************************************************************************************

203、如何控制页面的权限
【1】判断不需要权限的菜单集合
const pathArray=['/home','/home/users'];
if(pathArray.indexOf(to.path)!==-1){走token判断
}else{不走token判断
}

****************************************************************************************************************************************************************************

204、黑白头条项目结构
【1】vue-router的版本很重要
npm i vue-router@3.5.2 -S
******************************************************************
import Vue from 'vue'
import VueRouter from 'vue-router'// 1、把VueRouter安装为Vue的插件
Vue.use(VueRouter)// 2、路由规则数组
const routeArray = []// 3、创建路由实例对象
const router = new VueRouter({routes: routeArray
})//  4、导出路由实例对象
export default router
******************************************************************
import Vue from 'vue'
import App from './App.vue'
import router from "@/router"Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')
【2】说明从0敲才能学得会

****************************************************************************************************************************************************************************

205、安装配置Vant组件库
【1】现成的组件库
npm i vant@latest-v2
*********************************************************************
import Vue from 'vue'
import App from './App.vue'
import router from "@/router"
// 导入并安装vant插件
import Vant from 'vant'
import 'vant/lib/index.css'Vue.use(Vant)Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')
*********************************************************************<van-button type="primary">主要按钮</van-button><van-button type="success">成功按钮</van-button><van-button type="default">默认按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button>

****************************************************************************************************************************************************************************

206、初始化-使用Tabbar组件
【1】开启路由模式的tabBar
<template><div id="app"><!--路由占位符--><!--tabBar--><van-tabbar route><van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item><van-tabbar-item replace to="/user" icon="user-0">我的</van-tabbar-item></van-tabbar></div>
</template><script>export default {name: "App"}
</script><style scoped>
</style>

****************************************************************************************************************************************************************************

207、通过路由展示对应页面
【1】你只管努力，生活会给你惊喜！！！！！！！！！！
<template><div id="app"><!--路由占位符--><router-view></router-view><!--tabBar--><van-tabbar route><van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item><van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item></van-tabbar></div>
</template><script>export default {name: "App"}
</script><style scoped>
</style>
************************************************************************************
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home/Home";
import User from "@/views/User/User";// 1、把VueRouter安装为Vue的插件
Vue.use(VueRouter)// 2、路由规则数组
const routeArray = [// 首页路由规则{path: '/', component: Home},{path: '/user', component: User}
]// 3、创建路由实例对象
const router = new VueRouter({routes: routeArray
})//  4、导出路由实例对象
export default router

****************************************************************************************************************************************************************************

208、使用NavBar组件
【1】初步体验标题固定+内容展示
<template><div><!--头部区域--><van-nav-bar title="标题" fixed/><h3>aaa</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>zzz</h3></div>
</template><script>export default {name: "Home"}
</script><style scoped>.home-container {padding: 46px 0 50px 0;}
</style>

****************************************************************************************************************************************************************************

209、覆盖NavBar的默认样式
【1】会用到类选择器的知识
<template><div><!--头部区域--><van-nav-bar title="黑马头条" fixed/><h3>aaa</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3><h3>xxx</h3></div>
</template><script>export default {name: "Home"}
</script><style scoped>.home-container {padding: 46px 0 50px 0;.van-nav-bar {background-color: #007bff;}/deep/ .van-nav-bar__title {color: white;}}
</style>

****************************************************************************************************************************************************************************

210、获取列表数据
【1】主要是API接口返回json数据结构概述

****************************************************************************************************************************************************************************

211、封装utils目录下的方法
【1】配置axios
********************************************************************安装
npm i axios -S
********************************************************************src下创建utils
/*req.js*/
import axios from "axios";// 创建req即为小的axios
const req = axios.create({//  指定请求的根路径baseURL: 'https://www.escook.cn'
})export default req

****************************************************************************************************************************************************************************

212、在Home组件封装方法
【1】async...await
*********************************************************注意get请求的传参created() {this.initList();},methods: {// 获取文章列表数据的方法async initList() {const {data: res} = await req.get(`/articles`, {// 请求参数params: {_page: this.page,_limit: this.limit}})console.log(res);}}

****************************************************************************************************************************************************************************

213、封装articleAPI模块
【1】主要是每次拿数据的复用
/*文章相关的API都放在这个下面*/// 向外按需导出一个API函数
import req from "@/utils/req";export const getArticleListAPI = function (_page, _limit) {// 返回了一个promise对象return req.get(`/articles`, {// 请求参数params: {_page: _page,_limit: _limit}})
}
【2】Home User多方调用import {getArticleListAPI} from '@/api/articleAPI.js'// 获取文章列表数据的方法async initList() {const {data: res} = await getArticleListAPI(this.page, this.limit);console.log(res);}
***************************************************************************************import {getArticleListAPI} from '@/api/articleAPI.js'// 获取文章列表数据的方法async initList() {const {data: res} = await getArticleListAPI(this.page, this.limit);console.log(res);}
【3】这才是axios的真正的用法，法拉利开出法拉利的速度！！！！！！！！！

****************************************************************************************************************************************************************************

214、封装ArticleInfo组件
【1】如果不是直接被路由到的组件，就放到components文件夹下面
<template><div>ArticleInfo组件</div>
</template><script>export default {name: "ArticleInfo"}
</script><style scoped></style>
************************************************************************************<!--导入 注册 并使用ArticleInfo 组件--><ArticleInfo v-for="item in articleList" :key="item.id"></ArticleInfo>
************************************************************************************components: { //注册组件ArticleInfo},

****************************************************************************************************************************************************************************

215、升级ArticleInfo
【1】自定义属性。props: { // 自定义属性// 标题title: {type: String, default: ''},// 作者author: {type: String, default: ''},// 评论数  类型指向数组，包含可能的类型即可。commentNum: {type: [Number, String], default: 0},time: {type: String, default: ''}}
【2】父组件传值
<!--导入 注册 并使用ArticleInfo 组件--><ArticleInfo v-for="item in articleList" :key="item.id":title="item.title":author="item.aut_name":commentNum="item.comm_count":time="item.pubdate"></ArticleInfo>
【3】大写的可以改成连字符（建议，不使用也没关系）

****************************************************************************************************************************************************************************

226、图片
【1】自定义图片对象属性// 图片cover: {type: Object, default: function () {return {cover: 0}}}
【2】v-if来展示1张还是3张图片<img :src="cover.images[0]" v-if="cover.type===1"><div v-if="cover.type===3"><img :src="cover.images[0]"><img :src="cover.images[1]"><img :src="cover.images[2]"></div>

****************************************************************************************************************************************************************************

227、上拉加载更多，了解List组件
【1】List组件通过loading和finised两个变量控制加载状态
*****************************************************触发load把loading改为true
为true的时候，不会反复调用load事件，防止用户非法操作。
拿到数据后，把loading的值改为false
*****************************************************finised用来标记是否还有更多数据

****************************************************************************************************************************************************************************

218、使用List组件
【1】真牛批，大成若缺！！！
<template><div><!--头部区域--><van-nav-bar title="黑马头条" fixed/><!--导入 注册 并使用ArticleInfo 组件--><van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><ArticleInfo v-for="item in articleList" :key="item.id":title="item.title":author="item.aut_name":commentNum="item.comm_count":time="item.pubdate":cover="item.cover"></ArticleInfo></van-list></div>
</template><script>import {getArticleListAPI} from '@/api/articleAPI.js';import ArticleInfo from "@/components/Article/ArticleInfo";export default {name: "Home",components: { //注册组件ArticleInfo},data() {return {page: 1,limit: 10,articleList: [],loading: true, // 是否正在加载下一页finished: false // 所有数据是否加载完毕}},created() {this.initList();},methods: {// 获取文章列表数据的方法async initList() {const {data: res} = await getArticleListAPI(this.page, this.limit);// console.log(res);this.articleList = [...this.articleList, ...res]; // 旧数据在前，新数据在后this.loading = false;if (res.length === 0) { // 如果res为空 表示数据加载完毕this.finished = true;}},onLoad() {console.log("触发load事件")// 页码值甲乙this.page++;// 重新调用方法this.initList();}}}
</script><style scoped>.home-container {padding: 46px 0 50px 0;.van-nav-bar {background-color: #007bff;}/deep/ .van-nav-bar__title {color: white;}}
</style>

****************************************************************************************************************************************************************************

220、实现下拉刷新功能
【1】下拉刷新，牛批！！！！！！！！！！！！！！！！！！！<van-pull-refresh v-model="refreshing" @refresh="onRefresh">***************************************************************************<template><div><!--头部区域--><van-nav-bar title="黑马头条" fixed/><!--导入 注册 并使用ArticleInfo 组件--><van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished"><!-- :disabled="finished"控制加载完毕后的无效刷新--><van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><ArticleInfo v-for="item in articleList" :key="item.id":title="item.title":author="item.aut_name":commentNum="item.comm_count":time="item.pubdate":cover="item.cover"></ArticleInfo></van-list></van-pull-refresh></div>
</template><script>import {getArticleListAPI} from '@/api/articleAPI.js';import ArticleInfo from "@/components/Article/ArticleInfo";export default {name: "Home",components: { //注册组件ArticleInfo},data() {return {page: 1,limit: 10,articleList: [],loading: true, // 是否正在加载下一页finished: false, // 所有数据是否加载完毕refreshing: false}},created() {this.initList();},methods: {// 获取文章列表数据的方法async initList(refreshFlag) { // 封装的思想const {data: res} = await getArticleListAPI(this.page, this.limit);// console.log(res);if (refreshFlag) { // 下拉刷新this.articleList = [...res, ...this.articleList]; // 新在前this.refreshing = false;} else {this.articleList = [...this.articleList, ...res]; // 旧数据在前，新数据在后this.loading = false;}if (res.length === 0) { // 如果res为空 表示数据加载完毕this.finished = true;}},onLoad() {console.log("触发load事件")// 页码值加一this.page++;// 重新调用方法this.initList(false);},onRefresh() { // 下拉刷新的处理函数console.log("触发了下拉刷新")this.page++;// 头部拼接this.initList(true);}}}
</script><style scoped>.home-container {padding: 46px 0 50px 0;.van-nav-bar {background-color: #007bff;}/deep/ .van-nav-bar__title {color: white;}}
</style>

****************************************************************************************************************************************************************************

221、Vant定制主题
【1】为了覆盖默认的less变量，在main.js引入import 'vant/lib/index.less'

****************************************************************************************************************************************************************************

222、覆盖主题变量
【1】修改样式变量，但是每次都重启，开发中不用这个。
// vue.config.js
module.exports = {css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。lessOptions: {modifyVars: {// 直接覆盖变量'nav-bar-background-color': 'orange',// 或者可以通过 less 文件覆盖（文件路径为绝对路径）// hack: `true; @import "your-less-file-path.less";`,},},},},},
};
【2】less是可编程的样式语言。

****************************************************************************************************************************************************************************

224、通过theme.less指定
【1】less文件
/*
theme.less
*/
@blue: #007bff;
// 覆盖NavBar的less样式
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: white;
【2】less文件绝对路径指定
// vue.config.js
// webpack在进行打包的时候，底层用到了node.js   因此在vue.config.js配置文件中，可以导入并使用node.js中的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')module.exports = {css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。lessOptions: {modifyVars: {// 直接覆盖变量// 'nav-bar-background-color': 'orange',// 或者可以通过 less 文件覆盖（文件路径为绝对路径） 这个修改就不用重启服务器！！！！！！！！！！！！！！！！！！！！！！！！！hack: `true; @import "${themePath}";`,},},},},},
};

****************************************************************************************************************************************************************************

225、最后
【1】在前后端分离的情况下。而在开发过程中，我们常常需要在window系统下使用
Nginx作为Web服务器。
【2】安装完毕后，启动后在html下面放dist就完事了

****************************************************************************************************************************************************************************

226、总结
【1】vue-cli创建与开发工程化的vue项目
【2】组件化的开发思想
【3】指令、插槽、侦听器、声明周期、通讯函数来完成开发
【4】axios封装请求API接口
【5】vue-router实现单页面应用程序开发
【6】使用Vant与Element UI
【7】vue-devtools调试自己的vue项目