Vue.js Tutorials From The Official Vue Docs

    var app = new Vue({ 
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });

Vue.js Tutorial: Hello world in Vue 👋

Per Harald Borgen1:58a year ago

    var app = new Vue({
      el: '#app',
      data: {
        seen: true
      }
    })
    
    app.seen = false;

Vue.js Tutorial: Conditionals in Vue

Per Harald Borgen1:08a year ago

    var app = new Vue({
      el: '#app',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    });
    
    app.todos.push({})

Vue.js Tutorial: For Loops in Vue

Per Harald Borgen1:05a year ago

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

Vue.js Tutorial: Handling User Input in Vue

Per Harald Borgen1:07a year ago

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
        
            <div id="app">
                <p>{{ message }}</p>
                <input v-model="message">
            </div>
            
            <script src="index.js"></script>
        </body>

Vue.js Tutorial: v-model in Vue

Per Harald Borgen0:51a year ago

    Vue.component('todo-item', {
      template: '<li>This is a todo</li>'
    })
    
    var app = new Vue({
      el: '#app'
    })

Vue.js Tutorial: Components

Per Harald Borgen1:26a year ago

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
    
    var app = new Vue({
        el: '#app',
        data: {
          groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
          ]
        }

Vue Props Tutorial: Create Components With Props

Per Harald Borgen2:3410 months ago

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
    
    var app = new Vue({
        el: '#app',
        data: {
          groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
          ]
        }

Intro to the free Vue.js course

Per Harald Borgen0:5010 months ago