vue-ing

vue.html

// https://scotch.io/tutorials/implementing-authentication-in-nuxtjs-app
// https://github.com/vuejs/vue-hackernews-2.0

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id='app'>
{{message}}
</div>


<div id='watcher-example'>
  <p><input v-model="question"> </input></p>
  <p>{{answer}}</p>

  <div class='static'
       v-bind:class="{active: isActive}">
    blah
  </div>

</div>

<div id="app-3">
    <p>{{ message }}</p>
    <p>{{ reversed }}</p>
    <p>{{ fullName }}</p>
    <span v-if="seen">Now you see me</span>
    <span v-html="rawHtml"></span>
    <button @click='click'>click me</button>
</div>

 <div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>


<div id="app-5">
   <p> {{ message }} </p>
   <button v-on:click="reverseMessage">reverse</button>
</div>


<div id="app-6">
  <ol>
    <todo-item
      v-for="item in todo"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>

</div>

<script type="text/javascript">

  Vue.component('todo-item', {
    // The todo-item component now accepts a
    // "prop", which is like a custom attribute.
    // This prop is called todo.
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })


  // learn how watch works!
  var wather = new Vue({
    el: '#watcher-example',
    data: {
      isActive: true,
      question: 'hey, can you do this?',
      answer: "give me a question",
      counter: 0
    },
    watch: {
      question: function(newQuestion, oldQuestion) {
        this.counter++
        this.answer = 'new answer '  + this.counter
      }
    }
  })



  var app = new Vue({
    el: "#app",
    data: {
      message: "hello yo!"
    }
  })

  var app3 = new Vue({
    el: "#app-3",
    data: {
      seen: true,
      rawHtml: "<h1>hey<h1>",
      message: "sup, wei",
      firstName: "first name",
      lastName: "last name"
    },
    // uses caches and only react when its dependences change
    // which differs from `methods`
    // use a computed properties when you needs things cached
    computed: {
      reversed: function() {
        return this.message.split('').reverse().join('')
      },
      fullName: {
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        },
        get: function() {
          return this.firstName + " " + this.lastName
        }
      }
    },
    methods: {
      click: function() {
        this.seen = this.seen === true ? false : true
      }
    }
  })

  var app4 = new Vue({
    el: "#app-4",
    data: {
      todos: [{
        text: 'yooo'
      },
      {
        text: 'yooooo2'
      }
      ]
    }
  })

 var app5 = new Vue({
    el: "#app-5",
    data: {
      message: 'helllo son'
    },
    methods: {
      reverseMessage: function() {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

 var app6 = new Vue({
    el: "#app-6",
    data: {
      todo:[
        {
          id: 1,
          text: 'todo-1'
        },
        {
          id: 2,
          text: 'todo-2'
        },
        ]
    },
  })

</script>