对于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绝对应。