配置 | 曦暮流年

data - 数据

javascript

data: {
    message: 'hello vue',
    // 键 : 对象
    user: {
        name: '张三',
        age: 18
    },
    // 键 : 数组
    users: [
        {
            name: '李四',
            age: 20
        },
        {
            name: '王五',
            age: 21
        }
    ],
    hello: () => {
        console.log("hello world");
    }
}

调用方式（对象）：{{user.name}}，{{user.age}}

调用方式（数组）：{{users[0].name}}，{{users[0].age}}

调用方式（函数）：{{hello}}

数据里面是可以一直嵌套的，只要写在data中书写的属性都可以被调用

函数

html

<div id="app"></div>
<script>
    const vm = new Vue({
        el: "#app",
        // data可以是一个函数，函数的返回值必须是一个对象
        data() {
            return {
                name: "张三"
            }
        }
    })
</script>

computed - 计算属性

通过计算Vue的原有属性（data内属性）得到一个全新的属性，全新的属性和data没有关系它有自己的值和名，这个属性就是就是计算属性

这个计算属性和 methods 有些相似，不过计算属性的值会走缓存

html

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="content">
    {{con}}
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "计算属性",
            content: "",
        },
        computed: {
            // 完整写法
            con: {
                get() {
                    // 反转字符串
                    return this.content.split("").reverse().join("");
                },
                // 一般set方法很少使用
                set(val) {
					this.content = val.split("").reverse().join("");
                }
            },
            // 简写（不需要set）
            con_j() {
                return this.content.split("").reverse().join("");
            }
        }
    })
</script>

get/set调用时机：

get：有两种调用时机，第一种是第一次访问这个方法的时候进行调用；第二次是绑定的原有属性的值发生改变会再次调用
set：当修改计算属性的值的时候，调用set方法

当使用简写形式的时候，在插值语法中只需要写属性名，不需要带括号，因为他是属性不是方法

计算属性中的 this 是 vm 实例，箭头函数中的 this 是 windows，{{}} 插值语法中可以使用Vue实例所管理的属性，包括计算属性

watch - 侦听属性

可以侦听原有属性和计算属性，作用为：当侦听的属性发生改变的时候进行一些操作

html

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="content">
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "侦听属性",
            content: "",
            con: {
                c: ""
            }
        },
        watch: {
            content: {
                immediate: true,
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            },
            'con.c': {
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            },
            // 当只有handler的时候可以写成以下形式
            content(newVal, oldVal) {
                console.log(newVal, oldVal);
            }
        }
    })
</script>

属性键为被监听的属性，如果监听的属性是多级结构，加上 '' 即可

immediate：初始化的时候调用一次handler

handler 方法包括里面的值是固定死的，每次侦听的值发生变化会调用这个方法

newVal：这个是属性更改后的值

oldVal：这个是属性更改前的值

深度监视

如果被侦听的数据是多级的，而业务需要监听全部内容，可以使用 deep 属性来进行深度监视，属性默认关闭

html

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="content.a">
    <input type="text" v-model="content.b">
    <input type="text" v-model="content.c.d">
    <input type="text" v-model="content.c.f">
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "侦听属性",
            content: {
                a: "",
                b: "",
                c: {
                    d: "",
                    e: ""
                }
            },
        },
        watch: {
            content: {
                // 开启深度监视
                deep: true,
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            }
        }
    })
</script>

后期添加

在需要达成某种条件的时候进行添加监听

html

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="content">
</div>
<script>
    const vm = new Vue({...})
    
    // 后期添加监听
    vm.$watch("content", {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal);
        }
    })
    
    // 简写形式
    vm.$watch("content", function(newVal, oldVal) {
        console.log(newVal, oldVal);
    })
</script>

filters - 过滤器

一般用于处理简单的逻辑，比如后端传过来的时间戳转成正常的年月日格式等等

过滤器有局部过滤器和全局过滤器；过滤器只可以使用在插值语法和单向绑定（v-bind）中

使用方式：{{xxx | 过滤器 | ...}}

第一个时需要过滤的参数，后面的全部都是过滤器，可以有多个，第二个过滤器的参数是第一个过滤器过滤出来的值；可以往过滤器中手动传值，但过滤器的第一个参数永远是前一个的值

局部

html

<div id="app">
    <input type="text" v-model="keyWord" placeholder="请输入数据">
    {{ keyWord | filter1 | filter2("数据") }}
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            keyWord: "",
        },
        filters: {
            filter1(val) {
                return val.toUpperCase();
            },
            filter2(val, data) {
                return val + data;
            }
        }
    })
</script>

全局

javascript

Vue.filter("filter", function (val) {
    return val.toUpperCase();
});

参数跟局部一样

directives - 自定义指令

官方文档：自定义指令 — Vue.js

指令的名字不需要写 v- ，名字建议全部小写对于多个单词来说中间使用 - 进行分割

在自定义指令中，会传两个参数，第一个是真实的dom，第二个是标签与指令绑定关系的对象

执行时机：标签和指令第一次绑定的时候；模板重新编译的时候

有两种写法：函数式和对象式

局部

html

<div id="app">
    <div v-test-demo2="msg"></div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "hello world"
        },
        directives: {
            // 函数式
            'test-demo1': function (element, binding) {
                element.innerText = binding.value;
            },
            // 对象式
            'test-demo2': {
                // 元素与指令初次绑定的时候调用
                bind(element, binding) { },
                // 元素被插入到页面后自动调用
                inserted(element, binding) { },
                // 当模板被重新解析的时后自动调用
                update(element, binding) { }
            }
        }
    })
</script>

全局

javascript

// 函数式
Vue.directives("test-demo1", function (element, binding) {
    element.innerText = binding.value;
});

// 对象式
Vue.directives("test-demo2", {
    // 元素与指令初次绑定的时候调用
    bind(element, binding) { },
    // 元素被插入到页面后自动调用
    inserted(element, binding) { },
    // 当模板被重新解析的时后自动调用
    update(element, binding) { }
})

props - 数据

这个用来做数据传递，当在组件标签上书写对应的属性，这些属性就会通过 props 配置映射到对应组件中的数据中，实现组件之间的通信

样例：<User name="张三" sex="男" :age="18"></User>

如果添加上类型显示，传输数值型数据时需要使用单向绑定，因为直接使用 "" 传过去的是字符串

vue

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ sex }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  // 简单配置
  props: ["name", "sex", "age"],

  // 完整配置 - 加上数据类型验证
  props: {
    name: String,
    sex: String,
    age: Number,
  },

  // 完整默认配置 - 加上数据类型验证、是否是必要属性、默认值
  props: {
    name: { type: String, require: true, default: "王五" },
    sex: { type: String, require: true, default: "男" },
    age: { type: Number, require: true, default: 18 },
  }
};
</script>

以上三种配置选择其中一种即可

ref 属性

被 ref 标记的标签可以通过 this.$refs.标记名 获取所有内容：

如果对html标签标记会获得该标签的DOM元素
如果对Vue组件标签标记会获取该组件的信息

vue

<h1 ref="h1">hello world</h1>
<User name="张三" sex="男" :age="12" ref="user"></User>

// 获取标记h1的内容
this.$refs.h1
// 获取标记user的内容
this.$refs.user

mixins - 混入

Mixin（混入）是一种机制，允许在多个组件之间共享可重用的代码。可以将一组属性、方法或生命周期钩子等内容从一个地方定义，然后混入到一个或多个组件中，以实现代码的重用和组合，混入允许在不同组件之间共享相同的逻辑，避免重复编写相似的代码

一般为在src目录下创建一个 mixins.js 的文件里面存放混入的代码

javascript

export const 混入名1 = {
    data() { ... },
    methods: { ... },
}
export const 混入名1 = { ... }

混入是通过引用相对的混入名来达到混入指定的内容

javascript

import { 混入名1 } from "../mixins.js";
export default {
  mixins: [混入名1,混入名2],
};

混入的内容是可以直接使用的

如果组件中有同名的方法，会优先调用自身的方法，可以理解为Java子继父中的重写

在混入中有局部混入和全局混入；局部混入是在组件内引入；全局是在 main.js 文件中引入并通过 Vue.mixin(xx) 进行引入（一次一个）

javascript

// 引入混入js文件 
import { mix1, mix2 } from "./mixins.js";

// 全局混入
Vue.mixin(mix1)
Vue.mixin(mix2)

插件

目的是给Vue做功能增强的，定义的时候需要遵守一定的限制，一般插件在一个 plugins.js 文件中定义

javascript

export const plugins1 = {
    install(vue, d1, d2) { ... }
}

export const plugins2 = { ... }

在定义插件的时候必须要有一个 install 方法，到时候会自己调用，参数有两部分：第一部分是vue的构造参数；第二部分是自定义的参数（可以有多个）

在 main.js 文件中引入，插件的使用通常放在vue实例之前

javascript

// 引入插件
import { plugins1, plugins2 } from './plugins.js'

// 插入插件
Vue.use(plugins1, 1, 2)
Vue.use(plugins2)

IndexedDB

RabbitMQ

Spring

SpringBoot

SpringMVC

data - 数据

函数

computed - 计算属性

watch - 侦听属性

深度监视

后期添加

filters - 过滤器

局部

全局

directives - 自定义指令

局部

全局

props - 数据

ref 属性

mixins - 混入

插件

data - 数据 ​

函数 ​

computed - 计算属性 ​

watch - 侦听属性 ​

深度监视 ​

后期添加 ​

filters - 过滤器 ​

局部 ​

全局 ​

directives - 自定义指令 ​

局部 ​

全局 ​

props - 数据 ​

ref 属性 ​

mixins - 混入 ​

插件 ​

data - 数据

函数

computed - 计算属性

watch - 侦听属性

深度监视

后期添加

filters - 过滤器

局部

全局

directives - 自定义指令

局部

全局

props - 数据

ref 属性

mixins - 混入

插件