Vue 的一些用法

关于Vue

vue.js视频课程

关于父子兄弟控件的传值

写在最前

如果是需要共享的数据，最好使用vuex来store

Vuex官网
Vuex 课程

不同插件传值

控件-处理边界情况

v-mode

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为有效的数字
• .trim - 输入首尾空格过滤

对于单选按钮、勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）。所以常见有以下错误

<el-input v-model="num" type="number" placeholder></el-input>

data() {
    return {
      num: 1,
    };
  }

当你定义num为number类型后，如果在input里面给num复制后，你会惊奇的发现num 变成string类型。
解决办法：加上.number后缀 <el-input v-model.number="num" type="number" placeholder></el-input>

---

在某些场景下，我们会使用 {} 来存储某类对象的映射关系，例如车主和车子的映射关系可记为：

{
    'Alice': new Car(),
    'Bob': new Car()
}

而在 TypeScript 中声明这种对象的类型时遇到了问题：该对象的属性名是未知的，不过所有属性名对应的值的类型是确定的。这种情况下可以借助 Indexable Types 解决，以上述的例子为例：

interface CarOwners {
    [key: string]: Car;
}

const carOwners: CarOwners = {
    'Alice': new Car(),
    'Bob': new Car()
}

参考：

• Type annotation for object with unknown properties but known property types?

关于TS检查

在写代码时候有提示有些变量没有使用得错误no-unused-vars,这种有时候很烦人，解决办法是在package.json文件里面eslintConfig->rules下面配置：

 "no-unused-vars": [0, {
                "vars": "local",
                "args": "none"
            }]

其他相关规则检查也可以加到里面

单页面如何更改title

需要用到自定义指令-directive

1.定义自定义指令
directive.ts

export default {
    webTitle: {
        inserted(el:any, binding:any) {
            const { value } = binding;
            if (!!value == true) { // 方式2，指令传参
                document.title = value
            }
        },
        update(el:any, binding:any, vnode:any, oldVnode:any) {
            const { value } = binding
            if (!!value == true) { // 方式2，指令传参
                document.title = value
            }
        }
    }
}

2.注册到vue
main.js

import directive from './lib/directive'

Vue.directive("webTitle",directive.webTitle)

3.在vue-router路由中定义title

  meta: {
                title: '用户管理',
            }

4.注册
在组件任意元素上注册 v-web-title="$route.meta.title"

注意格式v-web-title,与webTitle相对应。