vue demo

最新推荐文章于 2024-09-30 15:23:15 发布

weixin_34407348

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量110

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/383321

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="traceur.js"></script>
    <script src="BrowserSystem.js"></script>
    <script src="bootstrap.js"></script>
    <script src="vue.js"></script>
</head>
<script  type="text/traceur">
window.onload=function(){
    Vue.config.devtools = true;
    
    var parent = {
        data(){
            return {
                a:10,
            }
        },
        template: '<div @click="pc" >---parent{{a}} -- , <child v-on:increment="incrementTotal" :m.sync="a"></child></div>',
        methods:{
            pc:function(){
                this.a += 0;
            },
            incrementTotal:function(){
                //alert(12344444);
                //this.a = -100;
            },
        },
        components:{
            "child":{
                data(){ // data:function(){  简写
                    return {
                        b:'def',
                        c:0,
                    }
                },
                props:['m'],
                mounted(){
                    this.c = this.m;
                },
                template:'<div @click="cc">child child,<strong>{{typeof m}},{{m}},{{c}},</strong><i>,{{b}},</i></div>',
                methods:{
                    cc:function(){
                        //this.b += 2;
                        this.c += 200;
                        this.m += 100;  //不建议直接操作m，
                        //alert(789);
                        //this.$emit('increment');
                        //alert(456);
                    }
                },
            }
        }
    }

    var app3 = new Vue({
      el: '#app-3',
      data:{
      },
      
      methods:{
      },
      
      components:{
        'parent':parent,
      },
      
      computed:{
      }
      
    })
    
};

</script>
<style>
</style>
<body>
<div id="app-3" >
    <parent></parent>==========
</div>
</body>
</html>