vue|vue学习总结笔记 vue|vue学习

vue学习总结

1.关于项目的布局
2.关于定位
3.向空数组传入值问题问题
4.div的传值
5.事件子传父
6.事件总线
7.组件的点击事件
8.导航浮动顶层
9.解决导航浮动顶层
10.路由操作
11.点击切换问题
12.路由发生变化修改页面title
13better-scroll
- 1.基本使用
- 2.动态监听滑动位置动态决定组件是否显示和隐藏
- 3.解决多次调用refresh
- 4.下拉更多
14.axios数据传递
15.打包项目问题

【vue|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