vue的知识点

加菲猫的鳄鱼
465 阅读2分钟

使用全局的filters过滤

1、建立一个js文件


//对邮件详情中进行切分（只包含邮箱）
const mailAfter = function (data) {
    if (data) {
        let nowTitle = data
        let index = data.indexOf("<")
        if (index != -1) {
            nowTitle = data
            nowTitle = data.substring(index + 1, data.length - 1)
        }
        return nowTitle
    }
}
export { mailAfter }

2、在main.js中引用

import * as filters from '@/lib/data_filter' //这是当前所写文件的路径
//全局过滤器
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

3、在.vue文件中引用

<span>{{elem | mailAfter }}</span>

建立全局的公用函数

1、创建一个js文件

//用户填写的信息，去除前后空格
const replaceBlank = (value) => {
  let returnVlaue = ''
  if (value !== undefined && value !== null) {
    if (typeof value == 'string') {
      returnVlaue = value.replace(/^\s*|\s*$/g, '')
    } else if (typeof value == 'number') {
      returnVlaue = value.toString().replace(/^\s*|\s*$/g, '')
    }
  }
  return returnVlaue
}
export default {
    replaceBlank
}

2、在main.js中引用

import commonJs from '@/js/common/index.js' // 全局的js
Vue.prototype.commonJs = commonJs

3、在.vue文件中使用

    this.commonJs.replaceBlank('  hellow ')

vue如何禁止弹窗后面的滚动条滚动？

methods : {
   //禁止滚动
   stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    /***取消滑动限制***/
    move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }
}

vue-router

完整的 vue-router 导航解析流程

  • 1、导航被触发。
  • 2、在失活的组件里调用离开守卫。
  • 3、调用全局的 beforeEach 守卫。
  • 4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 5、在路由配置里调用 beforeEnter。
  • 6、解析异步路由组件。
  • 7、在被激活的组件里调用 beforeRouteEnter。
  • 8、调用全局的 beforeResole 守卫 (2.5+)。
  • 9、导航被确认。
  • 10、调用全局的 afterEach 钩子。
  • 11、触发 DOM 更新。
  • 12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

vue-router有哪几种导航钩子（ 导航守卫 ）？

  • 1、全局守卫： router.beforeEach
  • 2、全局解析守卫： router.beforeResolve
  • 3、全局后置钩子： router.afterEach
  • 4、路由独享的守卫： beforeEnter
  • 5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

vue-router的几种实例方法以及参数传递

使用方式说明
this.$router.push(location, onComplete?, onAbort?)这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。并且点击 等同于调用 router.push(...)。
this.$router.replace(location, onComplete?, onAbort?)这个方法不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录，所以，当用户点击浏览器后退按钮时，并不会回到之前的 URL。
this.$router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

参数传递方式：

this.$route.params

this.$route.query

this.$route.meta

route 和 router 的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

组件如何通信

组件间数据相互传递：

  • 可以通过props向子组件中传值
  • 可以通过v-model语法糖进行向子组件传值，子组件调用父组件的方法
  • 可以通过.sync修饰符，进行父子组件间数据的相互传递
  • 可以通过v-bind="$attrs"，将父组件的值传递到孙组件中

组件间方法相互调用：

  • 可以通过v-on监听方法，进行子组件调用父组件的方法
  • 可以通过v-on="$listeners"，进行孙组件调用父组件的方法

组件间属性相互查询：

  • 可以通过ref属性，父组件查询子组件的方法
  • 可以通过this.$parennt属性，子组件查询父组件
  • 可以通过this.$children属性，父组件查询子组件

父子组件通信

利用bus总线

  • 1：在mounted生命周期里通过this.Emit.$on()监听。
  • 2：在destroyed生命周期里面通过this.Emit.$off()解除绑定。一定要解除绑定事件！！！

vue中css的使用

 <i :style="styles">{{index+1}}</i>
 
   computed: {
    //判断当前圆圈的颜色
    styles () {
      return {
        'backgroundColor': this.rankListInfo.bgColor//通过变量修改样式
      }
    }
  },

项目的创建

vue ui

vue如何清空页面数据

Object.assign(this.$data, this.$options.data.call(this))
avatar
文章
阅读
粉丝