Vue的学习

一、vue组件

　　1、实现点击事件@click.native="事件名称"，.native为监听组件根元素的原生事件

　　2、所有的组件都有一个属性$el，用于获取组件中的元素，如：

      <tab-control :titles="['流行', '新款', '精选']" @tabClick="tabClick" ref="tabControl2"/>

　　使用this.$refs.tabControl2.$el即可获取组件里面的元素

二、容器高度设置

　　当移动端开发需要把一个标签高度设置为整个屏幕撑满，一般把该元素的高度设置为:height:100vn;（vh=>viweport height）

 

 

　　计算一个移动端的标签元素需要滚动的高度：height:calc(100%-标签外的元素高度)；

三、 ref

1. ref如果是绑定在组件中的，那么通过this.$refs.refname获取到的是一个组件对象
2. ref如果是绑定在普通元素中，那么通过this.$refs.refname获取到的是要给元素对象

四、让页面不要随意销毁掉

　　使用<keep-alive></keep-alive>包裹router-view，如果是在App.vue中设置的keep-alive，则它针对的是整个项目，如果想要对于某个页面不要keep-alive，需要在keep-alive标签上添加一个exclude属性，如：<keep-alive exclude=“home”></keep-alive>,表示文件为home.vue的这个页面会被重新刷新

五、$nextTick()使用

　　this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
      }
    },
    mounted() {
      console.log(333);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(444);
        console.log(this.$refs['hello']);
      });
    },
    created() {
      console.log(111);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(222);
        console.log(this.$refs['hello']);
      });
    }
  }
</script>

 六、vue移动端使用fastClick减少点击延迟

　　1、npm install fastClick --save

　　2、在main.js引入：import FastClick from 'fastClick'

　　3、调用attach函数：FastClick.attach(document.body);

 七、vue使用vue-lazyload图片懒加载

　　1、安装：npm install vue-lazyload --S

　　3、在main.js引入：import VueLazyLoad from 'vue-lazyload'

　　2、引用：Vue.use(VueLazyLoad ); 如果想要放一张占位图，则在后面传一个对象：

Vue.use(VueLazyLoad ,{loading:require('图片地址')});

　　4、使用：<img v-lazy="图片地址">

八、vue响应式原理图

　　

 

九、 把px单位转为vw，自适应窗口大小

　　1.在vscode上搜索px-to-vw

　　2.选中px值按住alt+z快捷键

　　

十、解决异步执行的方法（把异步执行转为同步执行）

 

 

 在函数前加上async  在发送请求的时候用用await并用一个变量接收，打印结果如下

十一、路由模块

　　1.1、路由导航守卫（一般作用与用户登录，登录之后获取对应token）

　　在router.js上加上以下代码

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
//  to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数，标识放行
// next() 放行  next('/login')  强制跳转
    if(to.path === '/login') return next();
    // 获取token
    let token = window.sessionStorage.getItem('token');
    if(!token) return next('/login');
    next();
})

如果你只是针对与某一页面才需要进行路由导航守卫，则需要在routers数组中的地址对应对象加上一个属性（我是用meta）

const routes = [
  {
    path: '/',
    component: Register
  },
  {
    path: '/register',
    component: Register
  },
  {
    path: '/login',
    component: Login
  }, {
    path: '/userinfo',
    component: UserInfo,
    meta:{
      isToken:true
    }
  },
]

//对应的导航守卫代码在判断是否存在token时在加上 to.meta.isToken是否为true，如果为true则证明改页面需要登录之后才能跳转

router.beforeEach((to, from, next) => {

  if (to.path === '/login') return next();

  let token = localStorage.getItem('token');

  if (!token && to.meta.isToken) return next('/login');

  next();

})

 十二、父子相关关系

1.子组件获取父组件data数据和方法可通过this.$parent.方法/变量

十三、watch

1.immediate代表是否页面加载既执行watch里面对应配置

十四、vue的h5移动端自适应

1.安装

npm i amfe-flexible -S 

npm i postcss-pxtorem -S

2.在main.js上引入import 'amfe-flexible';

3.新建postcss.config.js文件

module.exports = {

    "plugins": {

        'postcss-pxtorem': {

            rootValue: 37.5,

            propList: ['*']

        }

    }

}