vue教程

头部导航栏

先加载页面初始化数据，再写页面

1.安装axios

1. 项目目录hnpro执行安装

   cnpm install axios
   

   安装成功[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9jKA0u54-1654715263305)(C:\Users\lyf12\AppData\Roaming\Typora\typora-user-images\image-20220609010030679.png)]

2. 在main.js中导入组件

   import axios from 'axios'
   

3. 在当前的vue对象当中添加axios属性

   Vue.prototype.$axios = axios
   

   后续使用直接使用$axios

2.加载初始化数据

1. 在goodsView的js中添的methods添加获取数据方法getGoods(){}

   1. 参数1：methods：请求的方式为拿数据：GET

   2. 参数2：请求的地址：data.json(模拟的json数据)

      1. 将我们的data.json数据文件复制到public文件夹中

   3. 请求数据后

      1. 如果请求成功，进入.then(res => {})，(json数据会被完全封装在res这里)
         1. 打印console.log(res)
      2. 如果请求错误，进入catch(error => {})

      getGoods() { //通过axios发送请求
      	this.$axios({
      		methods: 'GET',
      		url: '../../data.json'
      	}).then(res => {
      		// 如果请求成功，走这里(json数据会被完全封装在res这里)
      		console.log(res)
      	}).catch(error => {
      		// 如果请求错误，走这里
      	})
      }
      

   4. 在methods前面创建生命周期函数created(){}

      1. 调用getGoods()方法，访问相关内容

      created() { //声明周期函数
      	this.getGoods()
      },
      methods: {}
      

   5. 数据请求成功，并且在控制台打印

3.拿取数据

1. 在data的return中声明要拿取得数据的名字及类型

   export default {
   	data() {
   		return {
   			goods: [],
   			seller: {}	
   		}
   	}
   }
   

2. 返回数据goods和seller

   getGoods() { //通过axios发送请求
   	this.$axios({
   		methods: 'GET',
   		url: '../../data.json'
   	}).then(res => {
   		// 如果请求成功，走这里(json数据会被完全封装在res这里)
   		console.log(res)
   		this.goods = res.data.goods
   		this.seller = res.data.seller			
   	}).catch(error => {
   	// 	// 如果请求错误，走这里
   	})
   }
   

   3.将子组件所需要的数据seller传递到子组件中

   1. 绑定一个seller，将seller数据传递到子组件HeadView中

      <HeaderView :seller="seller"></HeaderView>
      

   2. 在子组件中JS中用props方法，拿到全局数据的属性名和类型

      1. （props：父组件向子组件传参 通过属性传参）

      export default {
      	props: {
      		seller: Object
      	}
      }
      

   3. 在需要数据的模块，绑定相关数据 seller.avatar

      <img class="avatar" :src="seller.avatar" alt="">
      

   4. 获取其他所需数据，方法同上一致

头部菜单栏

1.头部子组件跳转到父组件

1. to=“/”：为主页面

   <router-link to="/">商品</router-link>
   <router-link to="/rating">评价</router-link>
   

2. 为新组件进行路由注册（例如：rating）

   1. 在router的index.js中添加引入

      import GoodsView from '../views/GoodsView.vue'
      import RatingView from '../views/RatingView.vue'
      

   2. 组件注册

      {
          path: '/rating',
          name: '/rating',
          component: RatingView
        }
      

2.点击改变字体颜色

1. 不常见CSS样式

   1. 每个元素中间距离相等，两边各为一半

      justify-content: space-around;
      

2. 绑定属性值，当满足点击条件，则执行对应样式

   1. 给每个页面添加唯一的标识符 (比如GoodsView页面为1，RatingView为2)

      return {
      	goods: [],
      	seller: {},
      	tabIndex: 1
      }
      

   2. 在组件GoodsView中将唯一标识tabIndex传给组件，通过绑定属性:tabIndex=“tabIndex”

      <HeaderView :seller="seller" :tabIndex="tabIndex"></HeaderView>
      

   3. 在接收的组件中接收其属性名和类型：tabIndex:Number

      props:{
      	seller: Object,
      	tabIndex:Number
      }
      

   4. 执行绑定属性，并加上相关样式

      <div class="tab-item" :class="tabIndex == 1 ? 'active' : '' ">
      	<router-link to="/">商品</router-link>				
      </div>
      
      .active a{
      	color: rgb(240,20,20);
      	text-decoration: none;
      }
      

左侧菜单栏

1.页面布局分析,拿取数据

1. 目录结构

   1. 菜单导航：menu-wrapper
      1. 菜单：menu
         1. 菜单的每个按钮：menu-item
            1. 每个菜单的文本：menu-text

   <div class="menu-wrapper" ref="menuWrapper">
   	<div class="menu">
   		<div class="menu-item" v-for="(item,index) in goods" :key="index" :class="currentIndex == index? 'current':''">
   			<span class="menu-text">{{item.name}}</span>
   		</div>
   	</div>
   </div>
   

2. 拿到每个menu-item值，需要循环从data.json拿取

   1. 在ment-item中用v-for循环拿取item，同时设置唯一一个key值index

      1. key值作用：优化循环遍历过程中dom渲染的效率

      <div class="menu-item" v-for="(item,index) in goods" :key="index" >
      

   2. 拿取name值

      <span class="menu-text">{{item.name}}</span>
      

2.滑动插件

1. 分析

   1. 条件：子盒子比父盒子高
      1. menu-wrapper：父盒子（设置属性值：overflow: hidden; //超出父盒子的部分隐藏）
      2. menu-item：子盒子

2. 在项目目录下安装插件

   1. cnpm install better-scroll --save
      

3. 在对应的地方声明插件

   1. 在GoodsView的JS中导入

      import MenuScroll from 'better-scroll'
      

4. 使用插件

   1. // 参数一:代表滚动的dom结点 document.geteLement

      // 通过$refs来获取dom结点

   2. 给要滚动的div添加 ref 属性

      <div class="menu-wrapper" ref="menuWrapper">
      

   3. // 参数二:滚动的基础配置项（此处暂时不做）

      initScroll(){
      	this.menuScroll =new MenuScroll(this.$refs.menuWrapper,{});
      }
      

      4.等页面的dom全部渲染完成以后执行以下代码

      1. 在axios获取数据后，写以下代码

         this.$nextTick(() => {
         	this.initScroll()
         })