mmfilesi/index.html

## index.html
<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
      <title>vue</title>
      <script src="js/vendor/vue.js"></script>
  </head>
    <body>

      <!-- 1. bindings -->
      <article>
        <div id="foo">
          {{ greetings }}
        </div>

        <button id="js-myButton">set greetings</button>
      </article>

      <script>
        var foo = new Vue({
          el: '#foo',
          data: {
            greetings: 'Hello World!'
          }
        });

        document.getElementById('js-myButton').onclick = ()=> {
          foo.greetings = 'Oh la la!'
        };
      </script>

      <!-- 2. directivas -->
      <article>
        <div id="js-d1" v-bind:class="myClass">{{myContent}}</div>
      </article>

      <article>
        <div id="js-d2" v-html="myContent"></div>
      </article>

      <article>
        <div id="js-d3" v-if="show">Awesome!</div>
      </article>

      <article>
        <div id="js-d4">
          <ul>
            <li v-for="item in myList">{{item.name}}</li>
          </ul>
        </div>
      </article>

      <script>
        var d1 = new Vue({
          el: '#js-d1',
          data: {
            myClass: 'blueVelvet',
            myContent: 'Bazinga!'
          }
        });

        var d2 = new Vue({
          el: '#js-d2',
          data: {
            myContent: '<h3>foo</h3>'
          }
        });

        var d3 = new Vue({
          el: '#js-d3',
          data: {
            show: true
          }
        });

        var d4 = new Vue({
          el: '#js-d4',
          data: {
            myList: [
              {name: 'foo'},
              {name: 'bar'}
            ]
          }
        });
      </script>

      <!-- 3. eventos -->
      <article id="js-e1">
        <p>2 + 2 = {{result}} </p>
        <button v-on:click.once="result=4">sumar</button> <button v-on:click="clear()">borrar</button>
      </article>

      <article id="js-e2">
      <p> <input type="text" v-on:keyup.ctrl.enter="valueInput='bar'" v-bind:value="valueInput"> </p>
      </article>

     <script>
      var e1 = new Vue({
        el: "#js-e1",
        data: {
          result: '?'
        },
        methods: {
          clear: function(event) {
            this.result = '?'
          }
        }
       });

      var e2 = new Vue({
        el: "#js-e2",
        data: {
          valueInput: ''
        }
      });


      </script>

  </body>
</html>
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<title>vue</title>
	<script src="js/vendor/vue.js"></script>
	</head>
	<body>

	<!-- 1. bindings -->
	<article>
	<div id="foo">
	{{ greetings }}
	</div>

	<button id="js-myButton">set greetings</button>
	</article>

	<script>
	var foo = new Vue({
	el: '#foo',
	data: {
	greetings: 'Hello World!'
	}
	});

	document.getElementById('js-myButton').onclick = ()=> {
	foo.greetings = 'Oh la la!'
	};
	</script>

	<!-- 2. directivas -->
	<article>
	<div id="js-d1" v-bind:class="myClass">{{myContent}}</div>
	</article>

	<article>
	<div id="js-d2" v-html="myContent"></div>
	</article>

	<article>
	<div id="js-d3" v-if="show">Awesome!</div>
	</article>

	<article>
	<div id="js-d4">
	<ul>
	<li v-for="item in myList">{{item.name}}</li>
	</ul>
	</div>
	</article>

	<script>
	var d1 = new Vue({
	el: '#js-d1',
	data: {
	myClass: 'blueVelvet',
	myContent: 'Bazinga!'
	}
	});

	var d2 = new Vue({
	el: '#js-d2',
	data: {
	myContent: '<h3>foo</h3>'
	}
	});

	var d3 = new Vue({
	el: '#js-d3',
	data: {
	show: true
	}
	});

	var d4 = new Vue({
	el: '#js-d4',
	data: {
	myList: [
	{name: 'foo'},
	{name: 'bar'}
	]
	}
	});
	</script>

	<!-- 3. eventos -->
	<article id="js-e1">
	<p>2 + 2 = {{result}} </p>
	<button v-on:click.once="result=4">sumar</button> <button v-on:click="clear()">borrar</button>
	</article>

	<article id="js-e2">
	<p> <input type="text" v-on:keyup.ctrl.enter="valueInput='bar'" v-bind:value="valueInput"> </p>
	</article>

	<script>
	var e1 = new Vue({
	el: "#js-e1",
	data: {
	result: '?'
	},
	methods: {
	clear: function(event) {
	this.result = '?'
	}
	}
	});

	var e2 = new Vue({
	el: "#js-e2",
	data: {
	valueInput: ''
	}
	});


	</script>

	</body>
	</html>