SOURCE

Vue.component('component-name', {  
    data: function() {
        return {
            name: 'component-test',
            content: '啦啦啦啦啦',
            count: 20,
        };
    },
    template: '<div class="test-component">测试组件{{ count }} {{name}}</div>',
});

var ComponentA = {
    data: function() {
        return {
            name: 'component-a'
        };
    },
    template: '<div>局部注册组件{{name}}</div>',
};

var AgreeComponent = {
    template: '<div :class="{\'agree-default\': agree_default, \'agree-on\': agreed}" @click="agreeAdd">点赞{{ totalAgree}}</div>',
    data: function() {
        return {
            totalAgree: 10,
            agreed: false,
            agree_default: true,
        };
    },
    methods: {
        agreeAdd: function() {
            if (!this.agreed) {
                this.totalAgree++;
            } else {
                this.totalAgree--;
            }

            this.agreed = !this.agreed;
        }
    }
};

var ChildComponent = {
    template: '<div><button @click="show_money">显示余额</button><div>父组件通过自定义属性向下传递的prop{{distance}}</div></div>',
    props: ['distance'],
    methods: {
        show_money: function() {
            this.$emit('show-money', {a: 1, b: 2});
        }
    },
};

var ParentComponent = {
    template: '<div class="parent"><child-component @show-money="showMoney" :distance="parentDistance"></child-component><div>余额为{{money}}</div></div>',
    data: function() {
        return {
            money: undefined,
            parentDistance: "60km",
        };
    },
    methods: {
        showMoney: function(data) {
            this.money = 50;
            console.log('子组件给父组件通过事件传递的数据', data);
        }
    },
    components: {
        'child-component': ChildComponent,
    },
};

var BrotherAComponent = {
    template: '<div>我说： <input @keyup="on_change" v-model="i_said"/></div>',
    data: function() {
        return {
            i_said: '',
        };
    },
    methods: {
        on_change: function() {
            console.log('on_change');

            Event.$emit('brother-a-said', this.i_said);
        },
    },
};

var BrotherBComponent = {
    template: '<div>brotherA said: {{brotherASaid}}</div>',
    data: function() {
        return {
            brotherASaid: '',
        };
    },
    mounted: function() {
        var _this = this;

        Event.$on('brother-a-said', function(data) {
            console.log('event on callback', data);
            _this.brotherASaid = data;
        });
    }
};

var mixObj = {
    data: function() {
        return {
            saidSomething: 'test mixins ',
            commonData: 'some common data',
        };
    },
    methods: {
        showTips: function() {
            alert(this.saidSomething);
        },
    },
};

var MinComponentA = {
    template: '<div @click="showTips">{{ saidSomething }} <div>{{ commonData }}</div></div>',
    data: function() {
        return {
            saidSomething: 'hhahah',
        };
    },
    /*methods: {
        showTips: function() {
            alert(this.saidSomething);
        }
    },*/
    mixins: [mixObj],
};

var MinComponentB = {
    template: '<div @click="showTips">{{ saidSomething }} <div> {{ commonData }} </div></div>',
    data: function() {
        return {
            saidSomething: 'showErrorInfo',
        };
    },
    /*methods: {
        showTips: function() {
            alert(this.saidSomething);
        }
    },*/
    mixins: [mixObj],
};

var SlotComponentA = {
    template: `
        <div class="slot-component">
            <div>
                introduction: blabalalllllllllllll
            </div>

            <slot :user="user">{{ slotDefaultContent }}</slot>

            <div>
                address: **市**区**街道**小区**楼**门牌号
            </div>

            <slot name="phone"></slot>
        </div>
    `,
    data: function() {
        return {
            slotDefaultContent: '插槽默认的内容',
            user: {
                name: 'testName',
                school: 'testSchool',
            },
        };
    },
};

Vue.filter('testFilter', function(val) {
    return val + 'RMB'
});

// 格式化日期的过滤器
Vue.filter('formatDate', function(date) {
    console.log('date', date);
    let now = Date.now();
    let oldDate = new Date(date);
    let timeGap = now - oldDate;

    timeGap = timeGap / (60 * 60 * 60);

    console.log('timeGap', timeGap);

    if (timeGap > 1 && timeGap < 6) {
        return '1小时前';
    } else if (timeGap >= 6 && timeGap < 24) {
        return '6小时前'
    } else if (timeGap >= 24 && timeGap < 72) {
        return '1天前';
    }

    return '很久之前';
});

Vue.directive('pin', {
    update: function(el, binding, vnode, oldVnode) {
        console.log('当前指令绑定的元素', el);
        console.log('当前关于该指令的所有信息，name，value等', binding.value, binding.modifiers, binding.arg);
        
        var modifiers = binding.modifiers,
            background = binding.arg;

        if (binding.value) {
            el.style.position = 'fixed';
            // el.style.top = '10px';
            //el.style.left = '10px';
        } else {
            el.style.position = 'relative';
        }

        for (var key in modifiers) {
            if (modifiers[key]) {
                el.style[key] = '10px';
            }
        }

        el.style.backgroundColor = background;
    }
})

var Event = new Vue();

//自定义元素上使用model
Vue.component('base-checkbox', {
    model: {
        prop: 'checked',
        event: 'switch',
    },
    props: {
        checked: Boolean,
    },
    template: `
        <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('switch', $event.target.checked)">
    `
});


// test computed & watch
var TestComputedAndWatch = {
    template: `
        <div @click="onclick"> {{ a }} </div>
    `,
    data: function() {
        return {
            a: 1,        
        }
    },
    computed: {
         testComputed: function() {
            console.log('testComputed:', this.a + 1);
            return this.a + 1;
         }
    },
    watch: {
        a: function() {
            console.log('watch a', this.a + 2);
        }
    },
    methods: {
        onclick: function() {
            this.a = 2;
            console.log('click change the a', this.a);
            console.log('testComputed', testComputed);
        },

    }

};

var app = new Vue({
    el: '#root',
    data: {
        name: '超超',
        age: '18',
        sex: 10,
        foodList: [
            {
                name: 'foodA',
                price: 6,
                count: 4,
            },
            {
                name: 'foodB',
                price: 8,
                count: 1,
            },
            {
                name: 'foodC',
                price: 9,
            },
        ],
        testBind__url: 'https://www.baidu.com',
        testClassjs: 'testBind',
        testIfElse: false,
        price: 90,
        card1: {
            pin: true,
        },
        pinbackground: 'yellow',
        testArray: [0, 1, 2],
        checkBoxTest: false,
        date: '2021-05-11 18:00',
    },
    methods: {
        btnClick: function() {
            console.log('btnClick');
        },
        eventParam: function(message, event) {
            console.log('传过来的参数和事件对象', message, event, event.target);
        },
        divClick: function(e) {
            console.log('divClicked');
            console.log('传入的事件对象', e);
        },
        onEnter: function() {
            console.log('mouse enter');
        },
        testShortName: function() {
            console.log('缩写形式');
        },
        testStopParent: function() {
            console.log('父元素的点击事件');
        },
        testStop: function() {
            console.log('测试stop修饰符的子元素的点击事件');
        },
        changePin: function() {
            console.log('clicked pin');

            this.card1.pin = !this.card1.pin;
        },
       testArrayElem1: function() {
           console.log(this.testArray[0]);
           this.testArray[0] = 8;

           console.log('更改数组中的第一个元素的值', this.testArray[0]);
       },
    },
    computed: {
        num: function() {
            return 15;
        }
    },
    components: {
        'component-a': ComponentA,
        'agree-component': AgreeComponent,
        'parent-component': ParentComponent,
        'brother-a-component': BrotherAComponent,
        'brother-b-component': BrotherBComponent,
        'min-component-a': MinComponentA,
        'min-component-b': MinComponentB,
        'slot-component-a': SlotComponentA,
        'test-computed-and-watch': TestComputedAndWatch,
    },
});

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="root">
    哈哈哈哈
    {{name}}
    <p>{{1 + 1}}</p>
    <p>你的年龄：{{age}}</p>

    <div class="test-input">
        <input type="text" v-model="name">
        <span>你的名字：{{name}}</span>
    </div>

    <div class="test-input">
        <input type='text' v-model="age">
        <span>你的年龄：{{age}}</span>
    </div>

    <div class="test-input">
        <input type="text" v-model="sex">
        <span v-show="sex">你的性别是：{{sex}}</span>
    </div>

    <ul>
        <li v-for="food in foodList">
            <p> 食品名称: <span>{{food.name}}</span></p>
            <p> 食品单价： <span>{{food.price}}</span></p>
            <p v-if="food.count"> 食品总价：<span>{{food.price * food.count}}</span></p>
        </li>
    </ul>

    <div class="test-bind">
        <a :class="testClassjs" :href="testBind__url">点击跳转</a>
    </div>

    <div class="testOn" @click="testStopParent">
        <button v-on:click="btnClick">基本用法</button>

        <div class="testEventParam" v-on:click="eventParam('some message', $event)">测试事件监听处理函数的传参</div>

        <div class="testMoreThanOneEvent" v-on="{click: divClick, mouseenter: onEnter}">同时注册多个事件监听处理函数</div>
        
        <div class="testShortName" @click="testShortName">测试v-on指令的缩写形式</div>

        <div class="testxiushifu" @click.stop="testStop">测试修饰符</div>
    </div>

    <div class="testIfElse">
        <div class="test-if" v-if="testIfElse">当要展示的时候就展示，背景色为绿色</div>
        <div class="test-else" v-else>否则不展示，背景色为红色</div>

        <div class="test-if" v-if="num > 0 && num < 10">if</div>
        <div class="test-else-if" v-else-if="num >= 10 && num < 20">else if </div>
        <div class="test-else" v-else>else</div>
    </div>

    <component-name></component-name>
    <component-a></component-a>
    <agree-component></agree-component>
    <parent-component></parent-component>
    <brother-a-component></brother-a-component>
    <brother-b-component></brother-b-component>

    <div class="test-filter">{{ price | testFilter}}</div>

    <div class="test-directives" v-pin:[pinbackground].top.right="card1.pin" @click="changePin">卡片一</div>

    <min-component-a></min-component-a>
    <min-component-b></min-component-b>

    <slot-component-a>
        <template v-slot="slotProps">
            <div> 用户名：{{slotProps.user.name}} </div>
            <div> 用户学校： {{slotProps.user.school}}</div>
        </template>

        <template v-slot:phone>
            <div>用户手机号码： 13******8*</div>
        </template>
    </slot-component-a>


    <div class="testArray" @click="testArrayElem1">{{testArray[0]}}</div>

    <base-checkbox v-model="checkBoxTest"></base-checkbox>
    <div>{{checkBoxTest}}</div>

    <div class="test-format-date">{{date | formatDate}}</div>

    <test-computed-and-watch></test-computed-and-watch>
</div>

.testBind {
    background-color: red;
}

.testEventParam,
.testMoreThanOneEvent,
.testShortName,
.testxiushifu {
    margin-top: 20px;
    /* width: 60px; */
    /* height: 60px; */
    border: 2px solid green;
}

.test-if {
    margin-top: 20px;
    /* width: 50px; */
    /*height: 50px; */
    background-color: green;
}

.test-else {
    margin-top: 20px;
    /* width: 50px; */
    /* height: 50px; */
    background-color: red;
}

.test-else-if {
    margin-top: 20px;
    /* width: 50px; */
    /* height: 50px; */
    background-color: yellow;
}

.agree-default {
    background-color: pink;
}

.agree-on {
    background-color: blue;
}

.test-filter,
.test-directives {
    width: 100%;
    height: 100px;
    border: 2px solid yellow;
}

.slot-component {
    height: 200px;
    background-color: pink;
}