小白学习Vue(5)--实例选项介绍及例子（props | computed | watch | component等）

5. 实例选项/数据

就是vue实例的一些可选选项

 5.1. data:

vue实例的数据对象，实例创建后，可以通过vm.$data获取元素数据对象，data类型可以是object也可以是function函数

  5.1.1 data为object类型：

 内部的属性可以是String、Boolean、数值、数组、object等等
 但内部属性名不能以_或$命名开头（{如}_{n}ame、$name），可能会与vue内置的属性冲突

 在页面上可以通过{{}}插值表达式直接获取属性值，
 在浏览器控制台可以通过vm.$data获取data对象；通过vm.$data.nameh或vm.name来获取属性值（vm为vue实例对象名）

<div id="test-optionsData">
    <p>{{name}}-{{work}}-{{work.hobby}}</p>
    <!--  zhangsan-{ "id": 1, "name": "xxxx有限公司" }-  -->
</div>

<script>
    var workInfo = {
        id: 1,
        name: 'xxxx有限公司'
    };

    var vm = new Vue({
        el: '#test-optionsData',
        data: {
            name: 'zhangsan',
            age: 18,
            isVIP: false,
            hobby: ['唱', '跳', 'rap'],
            work: workInfo
        }
    });
</script>

  5.1.2 data为function类型：

 当组件被定义时，data必须声明为返回一个初始数据对象的函数，这样能保证每次创建都是新的vue实例，不会共享同一份数据

<div id="test-globalComponent">
    <button-counter title-name="helllo"></button-counter>
    <button-counter title-name="helllo"></button-counter>
    <!-- 不会公用同一个count -->
</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>

 5.2. props:

 props可以时数组或对象，用于接收来自父组件的数据，上述5.1.2的[‘titleName’]即为数组形式

 采用对象形式，还可以对父组件传给子组件的参数进行类型验证，还可以通过validator进行自定义验证
 如果验证不通过，页面控制台或报错

<div id="test-optionsProps">
    <button-props title-name="helllo" title-class="a"></button-props>
    <button-props title-name="Hi"></button-props>
</div>

<script>
    Vue.component('button-props', {
        props: {
            //检测类型
            titleName: String,
            //检测类型+其他验证
            titleClass: {
                type: String,
                default: 'div',
                required: false,
                validator: function (value) {
                    return ['div', 'button', 'a'].indexOf(value) !== -1
                }
            }
        },
        template: '<button >{{titleName}} </button>'
    });

    new Vue({el: '#test-optionsProps'});
</script>

 5.3. propsData:

 new创建实例时传递props，主要作用是方便测试（这个好像没太明白它用处）

<div id="test-optionsPropsData"></div>

<script>
    var userInfo = Vue.extend({
        props: ['name', 'age', 'sex'],
        template: '<div v-bind:title="name">悬浮一会儿显示{{name}}</div>'
    });

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

 5.4. methods:

 实例函数方法，方法中的this自动绑定为本vue实例

<div id="test-optionsMethods">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script>
    new Vue({
        el: '#test-optionsMethods',
        data: {
            message: 'Hello'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });
</script>

 5.5. computed:

 计算属性，被computed包裹的都是计算属性，可以通过{{}}获取计算属性结果；计算属性结果会被缓存（这是与methods的区别）

<div id="test-optionsComputed">
    <p>{{ message }}</p>
    <p>{{reverseMessage}}</p>
</div>

<script>
    new Vue({
        el: '#test-optionsComputed',
        data: {
            message: 'Hello'
        },
        computed: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });
</script>

 5.6. watch:

 可以对属性进行简单的监听，当属性值发生改变时，触发相应的回调函数，watch有两个选项：deep、immediate

deep：   true时；监控的属性发生改变时调用回调函数，不论其被嵌套多深
immediate：true时，该回调函数将会在监听开始之后被立即调用

<div id="test-optionsWatch">
    <p>name:{{name}}</p>
    <p>position:{{ work.position }}</p>
    <button v-on:click="changePosition">ClickMe</button>
</div>

<script>
    new Vue({
        el: '#test-optionsWatch',
        data: {
            name: 'zhangsan',
            age: 18,
            work: {
                position: 'HR',
                company: {
                    id: 1,
                    address: 'xxxx'
                }
            }
        },
        methods: {
            changePosition: function () {
                var temp = Math.floor(Math.random() * (10 - 1 + 1) + 1);
                Vue.set(this.work, 'position', "HR" + temp);
                Vue.set(this._data, 'name', "zhangsan" + temp);
            }
        },
        watch: {
            name: function (val, oldVal) {
                console.log('newWork:%s,oldWork:%s', val, oldVal);
            },
            work: {
                handler: function (val, oldVal) {
                    console.log('newWork:%s,oldWork:%s', val, oldVal);
                },
                // work 改变时被调用，不论其被嵌套多深，如果不添加，当work.position发生改变时，不会触发handle函数回调
                deep: true,
                // 该回调将会在监听开始之后被立即调用
                immediate: true
            },

            'work.position'(newVal, oldVal) {
                console.log('newVla:', newVal);
                console.log('oldVla:', oldVal);
            }
        }
    });
</script>

 5.7. directives:

 使用上各Vue.directive类似（不熟悉可以参考：全局Api），选项实例中使用就是局部注册

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

<script>
    new Vue({
        el: '#test-instanceDirectives',
        directives: {
            focus: {
                inserted: function (el, binding) {
                    el.focus();
                    console.log("binging-name: " + binding.name);
                    console.log("binging-value: " + binding.value);
                    console.log("binging-oldValue: " + binding.oldValue);
                }
            }
        }
    });
</script>

 5.8. filters:

 使用上各Vue.filters类似（不熟悉可以参考：全局Api），选项实例中使用就是局部注册

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

<script>
    new Vue({
        el: '#test-instanceFilters',
        data: {
            message: '',
            count: 20
        },
        filters: {
            checkValue: function (value) {
                if (value > 10) return value;
            },

            defaultValue: function (value) {
                if (!value) return 'defaultValue'
            }
        }
    });
</script>

 5.9. component:

 使用上各Vue.component类似（不熟悉可以参考：全局Api），选项实例中使用就是局部注册

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

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

  5.9.1 props动态绑定：

<div id="test-instanceComponent-dynamics">
    <button-dynamics v-for="post in posts" v-bind:key="post.id" v-bind:title-name="post.title"></button-dynamics>
</div>

<script>
    new Vue({
        el: '#test-instanceComponent-dynamics',
        data: {
            posts: [
                {id: 1, title: "title-one"},
                {id: 2, title: "title-two"},
                {id: 3, title: "title-three"},
            ]
        },
        components: {
            "button-dynamics": {
                props: ['titleName'],
                data: function () {
                    return {
                        count: 0
                    }
                },
                template: '<button v-on:click="count++">You clicked me {{count}} times. {{titleName}} </button>'
            }
        }
    });
</script>

 5.10. extends:

 允许声明扩展另一个组件（可以是一个简单的选项对象或构造函数），可以使用继承组件的方法和属性等

<div id="test-instanceExtends">
    <p>name: {{name}}</p>               <!--zhaosi-->
    <p>extendName: {{extendName}}</p>   <!--lisi-->
    <p>num: {{num}}</p>
    <button v-on:click="add">ChangeMe</button>
</div>

<script>
    var extendObject = {
        data: {
            name: 'zhangsan',
            extendName: 'lisi'
        },
        methods: {
            add() {
                console.log("扩展对象的方法")
            }
        }
    };

    new Vue({
        el: '#test-instanceExtends',
        data: {
            name: 'zhaosi',
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        extends: extendObject
    });
</script>

 就和java的继承一样，子类没有的属性和方法，再调用时调用的时父类的；子类插值，就调子类的

 5.11. model:

 在自定义组件中，通过model，来实现表单双向绑定，可以参考：model选项的使用

此外还有其他一些别的属性，但是感觉不常用，可以参考vue官网Api