Introducción a Vue

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div id="app">
                {{message}}
            </div>
            <script src="index.pack.js"></script>
        </body>
    </html>
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div id="app">
                <!-- v-model  -->
                <!-- message está definido en la propiedad `data` de la instancia de Vue -->
                <h2><code>v-model</code></h2>
                <input type="text" v-model="message">
                <br>
                {{ message }}
                <!-- v-model  -->
                
    import Vue from 'vue';
    
    new Vue({ 
        el: '#app',
        data: {
            albums: [
                'Please Please Me (Mono)',
                'With the Beatles',
                'Beatles For Sale',
                'The Beatles First',
                'A Hard Day\'s Night',
                'Help!',
                'Rubber Soul',
                'Revolver',
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div id="app">
                {{message | reverse | capitalize }}
                <br>
                <div v-bind:text-content.prop="'capital-c' | reverse"></div>
            </div>
            <script src="index.pack.js"></script>
        </body>
    </html>
    import Vue from 'vue';
    
    Vue.component('my-component', {
        data() {
            return {
                count: 0
            }
        },
        template: `
            <button @click="updateCount">Has hecho click {{count}}
        `,
        methods: {
            updateCount() {
                this.count++;
    import Vue from 'vue';
    
    var discography = [
        {
            cover: 'https://upload.wikimedia.org/wikipedia/en/c/c0/PleasePleaseMe_audio_cover.jpg',
            name: 'Please Please Me',
            releaseDate: '22 March 1963'
        },
        {
            cover: 'https://upload.wikimedia.org/wikipedia/en/e/e7/Help%21_%28The_Beatles_album_-_cover_art%29.jpg',
            name: 'Help!',
            releaseDate: '6 August 1965'
        },
        {
    import Vue from 'vue';
    
    Vue.component('blog-post', {
      props: ['post'],
      template: `
        <div class="blog-post">
          <h3>{{ post.title }}</h3>
          <button @click="$emit('enlarge-text', 0.3)">
            Agrandar
          </button>
          <div v-html="post.content"></div>
        </div>
      `
    })
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div id="app">
                <my-component v-if="someFlag" :some-value="theValue"></my-component>
                
                <button @click="theValue = Date()"> Update the component </button>
                <button @click="someFlag = !someFlag"> Toggle the component's visibility </button>
            </div>
            <script src="index.pack.js"></script>
        </body>
    </html>
    import Vue from 'vue';
    
    let myMixin = {
        created() {
            this.hello()
        },
        methods: {
            hello() {
                console.log('hello from mixin!')
            }
        },
        data() {
          return {
              myValue: 'Value from mixin.'
Mini curso introductorio a Vue.js