关于vue.js: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 绝对应。