vue2总结一些小功能

2020-12-10

本篇文章收集一些vue2的API和功能，留着参考。

根据cookie直接跳第三方系统免登录

需要线上根据域名才能成功跳转本地没有实际效果

this.$post('WMA','getTokenOther',{
    projectCode:this.projectCode
}).then(res=>{
    document.cookie = 'Access-Token='+ res.access_token +'; path=/'
    window.open('http://11.111.11.111:8039','_blank');
});

一、keep-alive

实现router切换状态保留如果加载的数据ok 就不用重复加载了。代码示例

<template>
    <div class="tab">
      <router-link class="tab-item" to="/goods" tag="li" active-class="active">
        <a  href="javascript:;">商品</a>
      </router-link>
    </div>
    <div>
     <!--实现router切换状态保留 果加载的数据ok 就不用重复加载了-->
      <keep-alive>
        <!--:seller="seller" 向子组件传递数据-->
        <router-view :seller="seller"></router-view>
      </keep-alive>
    </div>
  </div>
</template>

路由打开新页面

const routerUrl = this.$router.resolve({
    path:'/carDetaile'
})
window.open(routerUrl.href, '_blank')

二、ref 引用指向 DOM节点

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
// 访组件实例
this.$refs.profile

获取屏幕高度和更改样式示例

<style scoped>
  @import "./main.css";
</style>
<template>
  <div class="main">
    <div class="header_" ref="header_"></div>
    <div class="leftAside" ref="leftAside">

    </div>
    <div class="content_" ref="content_"></div>
  </div>
</template>
<script>
  export default {
    data () {
      return {

      }
    },
    mounted() {
      // //浏览器高度
      let w = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      let wH = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      let topH = this.$refs.header_.offsetHeight;
      this.$refs.leftAside.style.height = (w - topH) +'px'
      let centreW = this.$refs.leftAside.offsetWidth;
      this.$refs.content_.style.width = (wH - centreW) +'px'
      this.$refs.content_.style.height = (w - topH) +'px'
    },
    methods: {

    }
  }
</script>

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，应当避免在模板或计算属性中使用 $refs。

三、Vue.nextTick( [callback, context] )

异步更新队列、为了在数据变化之后等待 Vue 完成更新 DOM可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

四、set 全局操作

当操作外部数据变化是，就是不在Vue构造器里里的data处声明如果能观察到需要用vue的一个接口 vue.set()

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
//你可以添加一个新的 age 属性到嵌套的 userProfile 对象或者更改：
Vue.set(vm.userProfile, 'age', 27);
Vue.set(vm.userProfile, 'name', 'tom');

有时你可能需要为已有对象赋予多个新属性，在这种情况下，应该用两个对象的属性创建一个新的对象

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

五、Vue.filter( id, [definition] )自定义过滤器 main全局调用

注册或获取全局过滤器。

// 注册
import filter from './utils/filter';

for (var key in filter) {
    Vue.filter(key, filter[key]);
}
time(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = (date.getMonth()+1).toString().padStart(2,"0");
        let day    = date.getDate().toString().padStart(2,"0");
        let hour   = date.getHours().toString().padStart(2,"0");
        let minute = date.getMinutes().toString().padStart(2,"0");
        let second = date.getSeconds().toString().padStart(2,"0");
        return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
},
{{val | time}}

六、Vue.directive( id, [definition] )自定义属性指令

详细用法 https://cn.vuejs.org/v2/guide/custom-directive.html

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

七、自定义插件 Vue.use( plugin )

import StarComponent from './star.vue'
const Star_ing = {
  install: function(Vue) {
    Vue.component('Star_', StarComponent)
  }
}
export default Star_ing
Vue.use(Star)//使用插件
//调用插件
<Star_></Star_>

八、使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。详细地址：https://cn.vuejs.org/v2/guide/components.html#Prop

//父组件
<router-view :seller="seller"></router-view>
//子组件
 export default {
        props: {
            seller: {
                type: Object
            }
        }
 }

另外props的写法

简写
props: ['demo-first', 'demo-second']
带类型
props: {
    'demo-first': Number,
    'demo-second': Number
}
带多种检查
props: {
    'demo-first': {
        type: Number,
        default: 0
    }
    ...
}

九、$emit 触发事件(注意父组件方法不要带括号否则传参undefinde)

$emit是触发当前实例上的事件。附加参数都会传给监听器回调。
详细地址https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件

非父子组件的通信 https://cn.vuejs.org/v2/guide/components.html#非父子组件的通信

//子组件
export default{
   methods:{
      click:function(){
      // 子组件通过 $emit触发父组件的add方法
        this.$emit('add', event.target);
      }
   }
}

//父组件
<cartcontrol  @add="addFood" :food="food"></cartcontrol>
export default{
   addFood(target) {
        this._drop(target);
   },
}

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

computed 计算属性

实时计算使用 Vue检测到数据发生变动时就会执行相对应数据有引用的函数

根据cookie直接跳第三方系统免登录

一 、keep-alive

路由打开新页面

二 、ref 引用指向 DOM节点

三、Vue.nextTick( [callback, context] )

四 、set 全局操作

五 、Vue.filter( id, [definition] )自定义过滤器 main全局调用

六 、Vue.directive( id, [definition] )自定义属性指令

七 、 自定义插件 Vue.use( plugin )

八 、使用 Prop 传递数据