vue学习总结笔记

1.关于项目的布局

src:这里是开发时的写代码目录
-assets:存储基本css和要用到的img
-common:
-components:公共组件
   -common:可以在其他项目使用的
   -content:不可以在其他项目使用的业务组件
-network:网络请求
   -request.js配置网络请求
   -要用到项目的js文件配置地址和方法
   npm install axios --save
-router:配置路由
   -index.js
   npm install router --save
-store:配置管理状态
   npm install vuex --save
-view:视图组件
   -放组件模块
-App.vue根组件
   -路由视图组件
   -导航
-main.js:主要调用App.vue,路由,状态各个功能组件
   new Vue({
     render: h => h(App),
     router
   }).$mount('#app')
   

2.关于定位

对于父组件:
position: relative;
对于子组件:
position: absolute;
top: 44px;
bottom: 49px;
left: 0;
right: 0;

3.向空数组传入值问题问题

newnums=[]
num1=[10,20,30]
newnums.push(...num1)

4.div的传值

通过ref在组件或者div上定义如ref="dome"
可以通过this.$refs.dome获取组件和div

5.事件子传父

子组件通过$emit('传出的事件名',传入的值)
父组件中通过@事件名="父组件的事件"

6.事件总线

监听不是父子关系的组件
在src下的main.js中添加原型$bus:
Vue.prototype.$bus=new Vue()
通过这个bus可以让home组件监听goodsitem组件的事件

在goodsitem中定义一个事件
在事件发送一个监听事件名
imgLoad(){
        this.$bus.$emit('itemImageLoad')
      }
这时在home组件就可以调用传过来的事件来监听那个组件了
通过回调函数,通过$refs来操作goodsitem组件的方法
this.$bus.$on('itemImageLoad',()=>{
        // console.log('调用了');
        this.$refs.scroll.imgRefresh()
      })

7.组件的点击事件

<组件 @click.native="btnClick">
可以通过methods编写方法

8.导航浮动顶层

position: sticky;
top: 44px;
top是滑动到哪个地方浮动

9.解决导航浮动顶层

1.先要获得这个组件的offsetTop属性
思路,监听图片是否加载完成,设置一个@Load="方法名"进行监听
设置一个属性记录在data中tabOffsetTop
通过子传父,把事件传入home中可以通过this.$refs.tabControl2.$el.offsetTop
获取当前的offsetTop
$el获取当前组件的div属性从而获取offsetTop
这会调用多次
那么需要设置一个数记录当前的状态为flase
当调用一次就设置为true,这样就调用一次了
2.得到offset属性后,可以通过动态监听scroll的方法中写入判断条件
先在data中定义一个状态属性当y的值>第一步求得的offsetTop时设置为true
<的话为false
3.copy一份导航代码,在购物街下面,设置相对定位和z-index使其固定在特定的位置
设置它的v-show为通过第二步设置的状态属性,这里就可以实现下拉浮动的功能了
4不过有一个问题,就是两个组件的index不统一
解决:通过使两个组件设置不同的refs值,在事件获取到一个组件的offsetTop,
在点击事件中,获取这两个组件设置他们的conIndex属性为当前点击的index

10.路由操作

/**
在路由后面添加路径path?iid=id值
可以通过这个实现点击携带商品的id
**/
this.$router.push({
          path:'/detail',
          query: {
            iid: this.goodsItem.iid
          }
        })

11.点击切换问题

通过v-for遍历数据带着index
设置组件一个数据记录状态conindex
根据idnex动态设置样式
如:
:class="{action:index===conindex"

12.路由发生变化修改页面title

在src下的main.js
最后添加以下代码
//初始化主页
 document.title = "首页"
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

13better-scroll

1.基本使用

content的div下面只能是一个元素
js调用
new BScroll(document.querySelector('.content'))

2.动态监听滑动位置动态决定组件是否显示和隐藏

//滚动组件
//这里作用限制组件使用
probeType:{
        type:Number,
        default:0
 }
在BScroll中写入 probeType:this.probeType
this.scroll.on('scroll',(position)=>{
        //发送
        this.$emit('scroll',position)
 })

//作用组件
//设置这个组件可以使用
:probe-type=3
@scroll="scroll"

v-show="isShowTop"设置显示和隐藏
定义isShowTop动态获取要不要显示
scroll(position){
    this.isShowTop= -position.y>1000
}

3.解决多次调用refresh

当图片每加载一次就调用一次refresh,会加大对服务器的压力
可以通过debounce函数来解决
通过传入运行的函数,一个时间
/**
防抖函数
 */
先初始化一个变量timer设置为空,
返回一个函数(...args)可以多个参数
如果timer不为空,则清除时间函数
然后执行时间函数并赋值给timer
这样还没有到达时间,时间函数还没有执行,就会被清空
直到时间结束或者是全部加载完后

4.下拉更多

滑动组件
定义一个属性来决定哪个组件可以使用
pullUpLoad:{
        type:Boolean,
        default: false
      }
this.scroll.on('pullingUp',()=>{
        //上拉加载更多
        this.$emit('pullUp')
 })
父组件
//定义这个组件管用
:pullUpLoad="true"
@pullUp="pullUp
定义一个方法
pullUp(){
    this.getHomeGoods('父组件存储的状态值')


注意:下拉刷新后要调用this.scroll.finishPullUp()

}

14.axios数据传递

1.先创立network文件夹,主要来设置网络请求
2.建立request.js,配置axios
安装
install axios --save
导入axios
import axios from 'axios'
以函数的形式导出
export function request(config) {
步骤1,2,3
}
//1.创建axios的实例
  const instance=axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout:10000
    })
//2.设置拦截器
  instance.interceptors.request.use(config=>{
    return config
  },error => {
    //console.log('request拦截失败请求');
    return error
  })

  instance.interceptors.response.use(response=>{
    //console.log('response拦截成功响应');
    return response.data
  },error => {
    //console.log('response拦截失败响应');
    return error
  })
//3.发送真正的请求
  return instance(config)


以上是对于axios的封装
如果组件要使用时,直接调用方法就行
导入方法
import{request} from "./request";
导出对于这个组件的方法数据
export function getHomeMultidata() {
  return request({
    url:'/api/v1/home/multidata?type=pop'
  })
}
在要用的主组件导入用到的方法
import {getHomeMultidata,getHomeGoods} from 'network/home'

在data定义默认数据,便于通过请求过来的数据进行赋值
在methods时定义方法,
getHomeMultidata(){
        getHomeMultidata().then(res=>{;
          this.banners=res.data.banner.list;
          this.recommends=res.data.recommend.list
        })
      },
然后在组件创建前调用这个方法请求
created() {
      //1.请求多个数据
      this.getHomeMultidata();
}

15.打包项目问题

1.在dist中建立server.js文件
添加代码:
var express = require('express');
var app = express();
const hostname = 'localhost';
const port = 8080;
app.use(express.static('./'));
app.listen(port, hostname, () => {
  // console.log('hello');
  console.log('http://'+hostname+':'+port);
});
2.cd到dist目录
运行代码 npm install express
直接运行 node server