vuejs
/
vue
зеркало из https://github.com/vuejs/vue.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="../../../dist/vue.js"></script>
    </head>
    <body>
        <div id="normal">
            <p v-text="one + ' ' + two.three + '!'"></p>
            <input id="one" v-model="one" name="one"> <input id="two" v-model="two.three" name="two">
            <button v-on="click: this.one = 'clicked'">click</button>
        </div>
        <div id="lazy">
            <p v-text="one + ' ' + two.three + '!'"></p>
            <form id="form">
                <input v-model="one" name="three"> <input v-model="two.three" name="four">
            </form>
            <button v-on="click: two.three = 'clicked'">click</button>
        </div>
        <div id="conditional">
            <p>{{ok ? yesMsg : noMsg}}</p>
            <button v-on="click: ok = !ok" class="toggle">toggle</button>
            <button v-on="click: noMsg = 'Nah'" class="change">change</button>
        </div>
        <script>
        Vue.config({debug:true})
            var normal = new Vue({
                el: '#normal',
                scope: {
                    one: 'Hello',
                    two: {
                        three: 'World'
                    }
                }
            })

            var lazy = new Vue({
                el: '#lazy',
                lazy: true,
                scope: {
                    one: 'Hi',
                    two: {
                        three: 'Ho'
                    }
                }
            })

            var conditional = new Vue({
                el: '#conditional',
                scope: {
                    ok: true,
                    yesMsg: 'YES',
                    noMsg: 'NO'
                }
            })
        </script>
    </body>
</html>