整理了下最近的一些零零碎碎

设置VSCode字体

设置VSCode为JetBrains Mono字体
先下载并安装JetBrains Mono该字体,并打开首选项>设置的配置文件编辑setting.json加上如下配置:

    "editor.fontFamily": "JetBrains Mono",
    "editor.fontLigatures": true,

VSCode人性化设置

{
"editor.formatOnSave": true, //保存时自动格式化
"files.autoSave": "onFocusChange", //失去焦点时自动保存
"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true //保存ESLint自动修复
    }
}

利用脚本一次性打开常用网站

思路: shell + Alfred 实现
shell脚本如下:

#!/bin/bash
function openURL() {
    open -a "/Applications/Safari.app" $1
}

URLArr=(
    "https://wwww.baidu.com"
    "https://www.github.com"
    "https://www.google.com"
) 

for url in ${URLArr[@]}
do
    openURL url
done

配置好URLArr,调用Alfred 执行脚本即可.

Vue的watch用法

类似于iOS的KVO键值观察监听机制

• 监听data里的属性,监听属性变化
• 监听props父组件对子组件传值的变化
• 对象的监听,需要加个deep深度监听,对象某个属性则需要监听计算属性 (数组的监听不需要设置deep)
• handler(newVal,oldVal) 监听处理方法
• immediate一般设置该属性为true,字面意思是快速的即时的,大概是实时监听的意思吧

Vue自己的组件如何实现v-model双向绑定

子组件MyChild:

<template>
  <div class="child-container">
    <div class="demo">
      <h5>{{ value }}</h5>
      <button @click="clickButton">按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyChild",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  model: {
    // 属性绑定事件 该事件外部可以不用监听 value内部更新 外部一样可以获取到改变
    props: "value",
    event: "bindEvent",
  },
  methods: {
    clickButton() {
      // 双向绑定 外层父组件的v-model绑定的属性 这里传值可以不用传this.value 可以hook搞别的数据也行 反正最终都会绑定到this.value
      this.$emit("bindEvent", this.value);
    },
  },
};
</script>

父组件InputData调用:

<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <h3>{{ input }}</h3>
    <!-- 对于仅仅只是做双向绑定, @bindEvent="changeValue" 这句代码写不写无所谓 只是看父组件调用方是否需要这个事件进行处理而已 -->
    <MyChild v-model="input" @bindEvent="changeValue"></MyChild>
  </div>
</template>

<script>
import MyChild from "@/components/MyChild";
export default {
  name: "InputData",
  components: {
    MyChild,
  },
  data() {
    return {
      input: "",
    };
  },
  methods: {
    changeValue(val) {
      console.log(val);
    },
  },
};
</script>

效果如图:

CSS样式作用域

vue文件内的css样式一般会加一个scoped,这是作用在局部的,但是有一些第三方组件样式,需要强制修改就得加穿透/deep/或者去掉scoped才能生效,一般的css要修改已有样式,加权重加!important就完事儿了,反正谁在最后,谁的权重最大就听谁的~

Vue脚手架以及node基本操作

Vue-cli官方文档
vue-cli是快速搭建vue项目的脚手架

• 全局安装

npm install -g @vue/cli

• 创建项目
  一般都配置babel+ESLint+Less+Vuex+Router

vue create hello-world

• 也可使用GUI工具创建,其实是一样的,哪个方便哪个来

vue ui

• 运行项目

# 开发环境
npm run dev 
# 生成环境
npm run serve

• 打包

npm run build

• 添加开发插件

npm install --save-dev plugin-xxx

• 添加第三方库

npm i element-ui -S

Vue导入组件/注册使用

//全局引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

//按需引入
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */