vuejs
/
vue
mirror of https://github.com/vuejs/vue.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="../../../dist/vue.js"></script>
    </head>
    <body>
        <div id="log"></div>
        <div id="test">
            <div class="dir" v-hola="dirMsg"></div>
            <div class="filter">{{filterMsg | nodigits}}</div>
            <div class="partial" v-partial="partial-test"></div>
            <div class="vm" v-component="vm-test">{{vmMsg}}</div>
            <div class="vm-w-model" v-component="vm-w-model:vmData">{{msg + model.msg}}</div>
        </div>
        <div id="child">
            <div class="cvm" v-component="vm-test">{{vmMsg}}</div>
        </div>
        <script>
            var log = document.getElementById('log')
            var T = Vue.extend({
                created: function () {
                    log.textContent += ' T created'  
                },
                ready: function () {
                    log.textContent += ' T ready'
                },
                components: {
                    'vm-test': {
                        scope: {
                            vmMsg: 'component works'
                        }
                    },
                    'vm-w-model': {
                        scope : {
                            msg: 'component with model '
                        }
                    }
                },
                partials: {
                    'partial-test': '{{partialMsg}}'
                },
                directives: {
                    hola: function (value) {
                        this.el.innerHTML = value + ' works'
                    }
                },
                filters: {
                    nodigits: function (value) {
                        return value.replace(/\d/g, '')
                    }
                }
            })
            var C = T.extend({
                created: function () {
                    log.textContent += ' C created'  
                },
                ready: function () {
                    log.textContent += ' C ready'
                }
            })
            new T({
                el: '#test',
                scope: {
                    dirMsg: 'directive',
                    filterMsg: 'fi43l132ter5 w12345orks',
                    partialMsg: 'partial works',
                    vmData: {
                        msg: 'works'
                    }
                }
            })
            new C({
                el: '#child'
            })
        </script>
    </body>
</html>