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