vue 实战方法

一：字符串去空格

let str = " ab ab ab "
// 去掉首尾空格 
str.trim(); // 结果 'de de de'
// 去掉所有空格，包括首尾、中间 
str.replaceAll(" ", ""); // 结果 'dedede'
str.replace(/\s*/g,"");  // 结果 'dedede'
str.replace(/\ +/g, ""); // 结果 'dedede'

二：vue中directives的用法 参考文档

directives 做权限按钮的功能

// 路由配置：
path: '/permission',
component: Layout,
name: '权限测试',
meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
children: [
  {
      path: 'supper',
      component: _import('system/supper'),
      name: '权限测试页',
      meta: { btnPermissions: ['admin','supper'] } //页面需要的权限
  },
  {
      path: 'normal',
      component: _import('system/normal'),
      name: '权限测试页',
      meta: { btnPermissions: ['admin'] } //页面需要的权限
  }
    
// 自定义指令：
import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 获取按钮权限
  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
  if (!Vue.prototype.$_has(btnPermissions)) {
   el.parentNode.removeChild(el);
  }
 }
});

// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (value.indexOf(btnPermissionsStr) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}

/*然后在main.js文件引入文件*/
import has from './public/js/btnPermissions.js';

/*页面中按钮只需加v-has即可*/
<el-button @click='editClick' type="primary" v-has>编辑</el-button>

vue实现点击按钮输入框聚焦 v-focusAA=“focusState”, 修改input边框颜色 v-local-test

<template>
  <div class="hello">
    <!-- 这里只能使用v-show,不能使用v-if  -->
    <input
      type="text"
      @blur="focusState = false"
      v-focusAA="focusState"
      v-local-test
      v-model="testInput"
      style="width: 100%"
      data-name="自定义绑定数据"
    />
    <div @click="focusClick">按钮</div>
  </div>
</template>
<script>
export default {
  name: "ceShi",
  data() {
    return {
      testInput:'某某某',
      focusState: false,
    };
  },
  methods: {
    focusClick() {
      this.focusState = true;
    },
  },
  directives: {
    focusAA: {
      // 根据focusState的状态改变是否聚焦focus
      update: (el, value) => {
        //第二个参数传进来的是个json
        if (value) {
          el.focus();
        }
      },
    },
    "local-test": (el, binding, vnode) => {
      /** el 可以获取当前dom节点，并且进行编译，也可以操作事件 **/
      /** binding指的是一个对象，一般不用 **/
      /** vnode 是 Vue 编译生成的虚拟节点 **/
      el.style.border = "1px solid red"; //操作style所有样式
      console.log(el.value); // 获取v-model的值   结果：某某某
      console.log(el.dataset.name); //data-name绑定的值，需要el.dataset来获取 结果：自定义绑定数据
      console.log(vnode.context.$route); //获取当前路由信息
    },
  },
};
</script>

三：部分手机图片变形，动态计算设置高度

<template>
  <div class="hello">
  	<img :src="imgSrc" :height="imgHeight"/>
  </div>
</template>
<script>
export default {
  name: "ceShi",
  data() {
    return {
      imgSrc:'',
      imgHeight:0
    };
  },
  created(){
  	this.init()
  },
  methods: {
    init() {
      _this = this;
      this.imgSrc = "https://img-home.csdnimg.cn/images/20201124032511.png"
      let img = new Image();
      img.src = this.imgSrc
      img.onload = function(){
      	_this.imgHeight = (window.innerWidth / img.width * img.height) + 'px'
      }
    },
  },
};
</script>