vue使用中的随笔

在vue中vue-router配置的路径默认有“#”号，虽然无伤大雅，但是很多客户都不想看到，所以在初始配置路由的时候加上下面一句代码就可以了

mode:'history',

路径配好后，如果是在界面上点击某元素跳转

<router-link :to="{ path:'/xxx' }">某元素</router-link>

或者给某元素添加点击事件，执行
this.$router.push('/xxx')

全局函数的定义
1.在main.js中定义

Vue.prototype.changeData = function (){
  alert('执行成功');
}

　调用时直接this.changeData()就可以了

2.在自定义js中定义，在自定义js中的代码

exports.install = function (Vue, options) {
  Vue.prototype.updateData= function (){
    alert('修改成功');
  };
  Vue.prototype.delData = function (){
    alert('删除成功');
  };
};

　　在main.js中，引入

import 名称 from '自定义js路径'
Vue.use(名称)

　　然后直接像上面一样调用

全局指令的定义

//定义一个全局指令,随机背景颜色
Vue.directive('color',
  function (el) {
    var color = Math.floor((Math.random())*1000000);
    el.style.background = '#' + color
})

　　使用的时候直接在元素上加上  v-color  就可以了

全局过滤器的定义

//定义一个全局过滤器
Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
  return parseInt(value) + 10;
});

　　

  data () {
    return {
      on: '1',
    }
  },

　　界面代码

{{on | sum}}

　　界面输出