VueJS Hello World

VueJS Course Exercise 1

by nevkatz

HTML

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

<div id="app">
<h1 v-once>{{ title}}</h1>
<p>{{ sayHello() }}</p>
 <p><a target="_blank" v-bind:href="link">{{ visible_text }}</a></p>
 <input type="text" v-on:input="changeText"/>
 <p id="output">{{ message }}</p>
 <p v-html="finishedLink"></p>
 
</div>

JavaScript

// demo of v-bind, v-once, and v-on.
// v-bind: allows you to create a URL with Vue using a data property. 
// v-once: prevents re-rendering of an element if a value changes.
// v-on: basically a listener that listens for a input in this case. 
// v-html: injects HTML into an element but be careful of cross-side scripting attacks.
new Vue({
  el:'#app',
  data:{
    title:'Hello World!',
    // these two values are used to make a link.
    link:'http://www.birdleymedia.com',
    visible_text: 'Birdley Media',
    // this is guidance text for the input box.
    message:'Type something above to see this change',
    // for injecting raw html.
    finishedLink:'<a target="_blank" href="http://nevkatz.github.io">Dev Pages</a>'
  },
  methods: {
      // changes the title, which is re-rendered
      // unless v-once is used.
      sayHello:function() {
      this.title = 'Updated title';
      return this.title;
    },
    changeText:function() {
      // the "this" keyword refers to the "data" object above.
      // the event.target.value is normal javascript.
      this.message = event.target.value;
    }
  }
})