【生活札记】代码还是很神奇的吧，加油，Vue！

最近因为两个牛皮的主管，还有一个自己离职，最后搞得我自己要离职的员工（现在升职，加薪），而要好好学习，好好准备，再次找工作而很烦恼。自己也在疯狂刷技术视频。看了vue，写了一个组件间的传值，哈哈，一下子没报什么错误，就直接写出来了，哈哈，开心！自己还是有些开发的天赋的吧！加油吧，兴趣真的很重要，环境也很重要，祝找工作顺利~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <br/><br/><hr/>
        <chat-room></chat-room>
    </div>
    <script>
        Vue.component('chat-room',{
            data:function(){
                return{
                    userName1:'小明',
                    userName2:'小号',
                    list:[]
                }
            },
            methods:{
                rcvMsg:function(msg){
                    this.list.push(msg);
                    console.log("接收到的数据1",msg);
                },
            },
            template:`
               <div>
                <ul><li v-for='item in list'>{{item}}</li></ul>
                <br/><hr/>
                <my-input :uName="userName1" @customEvent="rcvMsg"></my-input>
                <my-input :uName="userName2" @customEvent="rcvMsg"></my-input>
               </div>
            `
        });

        Vue.component('my-input',{
            data:function(){
                return{
                    xModel:''
                }
            },
            methods:{
                clBt: function () {
                    var msg = this.uName + " : " + this.xModel;
                    this.$emit('customEvent',msg);
                }
            },
            props:['uName'],
            template:`
               <p>{{uName}} <input type='text' v-model='xModel'/><button @click='clBt'>发送</button></p>
            `
        });

        new Vue({
            el:'#app',
            data:{
                msg:'hello Vue'
            }
        })
    </script>
</body>
</html>

加油，加油！愿你，被生活善待~

【生活札记】代码还是很神奇的吧，加油，Vue！

相关推荐