小白学习Vue(3)--全局Api（Vue.set | Vue.directive | Vue.component等）

3. 全局Api：

全局：任何地方都可以使用

 3-1. Vue.set()&&Vue.delete()

Vue.set( target, propertyName/index, value )
Vue.delete( target, propertyName/index )

Vue.set给目标target的属性设置值，注意target不能是Vue实例（即this），或Vue实例的root数据对象
Vue.delete删除目标target的属性，  注意target不能是Vue实例（即this），或Vue实例的root数据对象

<div id="test-globalSet">
    <p>position: {{work.position}}</p>
    <button v-on:click="changePosition">ChangePosition</button>
    <button v-on:click="deletePosition">DeletePosition</button>
</div>

<script>
    new Vue({
        el: '#test-globalSet',
        data: {
            name: 'zhangsan',
            work: {
                position: 'HR',
                company: {
                    id: 1,
                    address: 'xxxx'
                }
            }
        },
        methods: {
            changePosition: function () {
//                this.work.position = "HR" + Math.floor(Math.random() * (10 - 1 + 1) + 1);
                var temp = Math.floor(Math.random() * (10 - 1 + 1) + 1);
                Vue.set(this.work, 'position', "HR" + temp);
                Vue.set(this.work, 'age', temp);
            },
            deletePosition: function () {
                console.log("beforeDelete: " + this.work.position);
                Vue.delete(this.work, 'position');
                console.log("afterDelete: " + this.work.position);
            }
        }
    });
</script>

 3-2. Vue.directive( id, [definition] )

用于自定义指令，id为指令名称（如自定义v-focus指令，此id为focus）；definition为支持的钩子选项

<div id="test-globalDirective">
    <input type="text" v-focus/>
</div>

<script>
    //注册一个全局自定义指令"v-focus"
    Vue.directive('focus', {
//        bind: function () {
//            // 只调用一次，指令第一次绑定到元素是调用
//        },

        // 以下三个我觉得不太会用，就不管了
//        update: function () {},
//        componentUpdated: function () {},
//        unbind: function () {},

        // 当绑定的元素插入到DOM中时调用
        inserted: function (el, binding) {
            el.focus(); // 聚焦元素
            console.log("binging-name: " + binding.name);
            console.log("binging-value: " + binding.value);
            console.log("binging-oldValue: " + binding.oldValue);
        }
    });
    new Vue({el: '#test-globalDirective'});
</script>

此处用了inserted钩子函数，语义是：被绑定的元素插入父节点（dom）时调用；此外还可以使用bind等钩子

钩子函数参数：
 el：指令锁绑定的元素，可以用来直接操作DOM。
 binding：一个对象，包含以下property属性：
  | name：指令名，不包括"v-"前缀。
  | value：指令的绑定值，如v-focus=“1”，此值为1
  | oldValue：指令的绑定的前一个值，仅在update和componentUpdate钩子可用
  | 此外还有expression、arg、modifiers属性

 3-3. Vue.filter( id, [definition] )

自定义过滤器，可以用于一些常见的文本格式化
过滤器可以用在插值{}}和v-bind表达式；格式： 参数名|过滤器id… …

<div id="test-globalFilter">
    <p>{{message | defaultValue}}</p>
    <div v-bind:title="count | checkValue">悬停一会儿查看title</div>
</div>

<script>
    Vue.filter('checkValue', function (value) {
        if (value > 10) return value;
    });

    Vue.filter('defaultValue', function (value) {
        if (!value) return "defaultValue";
    });

    new Vue({
        el: '#test-globalFilter',
        data: {
            message: '',
            count: 20
        }
    })
</script>

 3-4. Vue.component( id, [definition] )

Vue.component用来定义新组件，id为新组件名称，

<div id="test-globalComponent">
    <button-counter title-name="helllo"></button-counter>
</div>

<script>
    Vue.component('button-counter', {
        props: ['titleName'],
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{count}} times. {{titleName}} </button>'
    });
    new Vue({
        el: '#test-globalComponent'
    });
</script>

任意地方使用会自动渲染模板template到dom，其中使用的参数count需要在data中声明，data只能使用函数形式
当点击按钮时，每个组件都会各自独立维护它的count。因为每用一次组件，就会有一个新的vue实例创建

props用来向子组件传递参数，这里自定义的组件就是子组件，即将"title1"传递给titleName,则在模板中可以获取值
【注意】：js中参数名要驼峰的形式，则html中对应参数名要写成kebab-case形式

 3-5. Vue.extend( options )

使用基础Vue构造器，创建一个"子类"
extend创建的是一个组件构造器，而不是一个具体组件实例，还需要通过new子类来挂载dom

<div id="test-globalExtend"></div>
<script>
    var userInfo = Vue.extend({
        props: ['name', 'age', 'sex'],
        template: '<div>{{name}}</div>'
    });

    var vm = new userInfo({
        el: '#test-globalExtend',
        propsData: {
            name: 'zhangsan',
            age: 18,
            sex: '0'
        }
    })；
</script>

 3-6. Vue.use( plugin )

用来安装插件，如果插件是一个对象，必须提供install方法
到时候用到再来补充

此外还有其他的全局api，但是感觉不常用，如Vue.version、Vue.observable等等。可以参考官网：vue官网