项目四遇到的知识点总结

<h2 id="一vue组件之间传值">一、Vue组件之间传值
<h3 id="一父组件向子组件传递数据">（一）、父组件向子组件传递数据

• 1.父组件调用子组件的时候绑定动态属性
• 2.在子组件里面通过props接收父组件传过来的数据

        this.$refs.header.属性
        this.$refs.header.方法

    this.$parent.数据
    this.$parent.方法

• 架起一个沟通的桥梁，是数据能够传递

    event.js
    import Vue from 'vue';
    var Event = new Vue();
    export default Event;

        import Event from './event.js'

    Event.$on('名称',function(){})

• 安装在所在项目中

    npm install vue-lazyload --save

import Lazyload from 'vue-lazyload'
Vue.use(Lazyload,{
    error: './static/images/default.png',loading: './static/images/default.png'
});

• 图片懒加载的简单效果已经实现

• 之前为了加载快把所有的图片做成懒加载
• 同一个接口渲染列表的时候图片出现问题，取消懒加载就可以了。

npm install vue-photo-preview --save

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

//在img标签添加preview属性 preview值相同即表示为同一组

var options = {}

• $changeData名字随便定义，加$是为了区分其他函数，可以不加。

    Vue.prototype.$changeData = function() {
        alert('我是全局函数')
    }

this.$changeData();

• components.js(名字随便定义)

components.js

export default(Vue) => {
    //格式化手机号码,手机号中间4位加*号
    Vue.prototype.$formatePhone = (phone) => {
        if(!isNaN(phone)) {
            return phone.substr(0,3) + '****' + phone.substr(7);
        } else {
            return '***********';
        }
    }
}

• 手机号中间4位加*号
• var str='1366668888';
• var str2 = str.substr(0,3)+"****"+str.substr(7);
• 这样写只能在当前位置使用

import Components from './component'
Vue.use(Components)

$formatePhone(12345678945)

• 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
• 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中

• include:字符串或正则表达式。只有匹配的组件会被缓存
• exclude:字符串或正则表达式。任何匹配的组件都不会被缓存

//组件
export default {
    name: 'test-keep-alive',data() {
        return {
            includedComponents: "test-keep-alive"
        }
    }
}

``

 
    


    


<keep-alive :include="/a|b/">



<keep-alive :include="includedComponents">


<keep-alive exclude="test-keep-alive">
    
<component></component>

项目中遇到缓存问题

• 之前把:include="includedComponents放在最外层的app.vue是不生效的，里面还有一个index.vue

    
    
    data:() =>{
        return {
            //缓存界面name值列表
                'new','new-detail'
        }
    }

• 使用$router.meta的keepAlive属性：

• 需要在router中设置router的元信息meta:

    //router.js
    export default new Router({
      routes:[
        {
          path: '/home',name: 'Hello',component: Hello,meta: {
            keepAlive: false //不需要缓存
          }
        },{
          path: '/page1',name: 'Page1',component: Page1,meta: {
            keepAlive: true //不需要缓存
          }
        }
  ]
  })

• 以上面router的代码为例

``

• 进入Page1页面，并输入‘说点什么’

• 跳转到Hello

• 进入Page1页面，输入框数据会被保留

• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等。

  

• 路由对象表示当前活动路由的状态。它包含当前URL的解析信息以及URL匹配的路由记录。
• 路由对象是不可改变的。每次成功导航都会产生一个新的路线对象
• 路径对象可以在多个位置找到：
• 1.内部组件为this.$route
• 2.内部$route观察者回调
• 3.作为调用的返回值router.match(location)

• 内部导航守卫作为前两个参数

    router.beforeEach((to,from,next) => {
      // `to` and `from` are both route objects
    })

• scrollBehavior函数内部作为前两个参数

    const router = new VueRouter({
      scrollBehavior (to,savedPosition) {
        // `to` and `from` are both route objects
      }
    })

1. $route.path:  对应当前路径的字符串，始终解析为绝对路径。例如'/trust'.
2. $route.params: 一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
3. $route.query:  一个key/value对象，表示URL查询参数。
例如，对于路径/trust?id=1,则有$route.query.id == 1,如果没有查询参数，则是个空对象
4. $route.hash: 当前路由的哈希值(#如果有)。如果没有哈希值，则为空字符串。
5. $route.fullPath: 完成解析后的URL，包含查询参数和hash的完整路径。
6. $route.matched: 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象
7. $route.name: 当前路径名字
8. $route.meta: 路由元信息

• router是VueRouter的一个对象，通过Vue.use(VueROuter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，它包含所有的路由包含了许多关键的对象和属性

• router.app: router注入的根Vue实例
• router.mode: 路由器正在使用的模式
• router.currentRoute： 当前路由表示为路由对象

• this.$router.push()
• this.$router.replace()
• this.$router.go()
• this.$router.back()
• this.$router.forward()

• 父级，任意父级，非body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染。

• 不能给父级设置overflow:hidden，怎么办呢？

    .bar {
        position: fixed;
        z-index: 99;
        /* 以毒攻毒 */
        transform: translateZ(100px);
    }

• top是div的class类，fixed固定位置

    $(window).scroll(function(){
        var winHeight = $(window).height();
        var top = $(this).scrollTop();
        var isVisible = top >= winHeight;
        if(isVisible){
            $('.top').addClass('fixed');
        }else{
            $('.top').removeClass('fixed');
        }
    });

var that = this;
document.onmousemove = function () {

window.lastMove = new Date().getTime();

}

window.lastMove = new Date().getTime();

window.setInterval(function() {

var now = new Date().getTime();

if(now - lastMove > 60000 ){

alert('超过一分钟我出现了')

}

},1000)

需求在首页出现弹框，其他页不出现，用vue写的项目

    export default {
          name: 'home',data: ()=>{
            return {
                      lastMoveTimer: null
            }
      },mounted() {
                  var that = this;
                  //监听鼠标，鼠标没有移动超过1分钟，弹销售扫码。
                  document.onmousemove = function () {
                        window.lastMove = new Date().getTime();
                  }
                  window.lastMove = new Date().getTime();
                  that.lastMoveTimer = setInterval(function() {
                   var now = new Date().getTime();
                   if(now - lastMove > 120000){
                        //两分钟后出现弹框
               }
      },1000)

  },// 生命周期销毁
  beforeDestroy:function(){
        clearInterval(this.lastMoveTimer);
        this.lastMove = null;
  }
}

<h3 id="路由跳转新窗口">路由跳转新窗口

• home 详情页

    let routeData = this.$router.resolve({ path: '/home/'+item.id});
        window.open(routeData.href,'_blank');

• 点击按钮打开邮箱的代码

        点击按钮打开邮箱：

• 解决input获得焦点时边框没有border-radius

• -webkit-appearance —— webkit外观样式属性

    input {
        border-radius: 8px;
        outline: 0;
        -webkit-transition:.2s border-color;//属性渐变
        -webkit-appearance: none;//来移除原生控件样式
    }
    input:focus {
        border-color: #20a0ff;
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!