The VueJS Instance

Learn more about the VueJS Instance

by John Passmore

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h1>{{ title }}</h1>
  <button v-on:click="show">Show Paragraph</button>
  <p v-if="showParagraph">This is not always visible</p>
  <p> {{ sayHello1() }} </p>
  <p> {{ sayHello2() }} </p>
  <p> {{ sayHello3() }} - <a v-bind:href="link">Google</a></p>
  
  </p>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	title: 'The VueJS Instance - from h1',
    text1: 'use bind to treat text for what it says such as a link - from method sayHello2',
    showParagraph: false,
    link: 'http://google.com'
  },
  // pre-fixing with this. gives us access to proxies of data and methods in a Vue Instance
  methods: {
  	sayHello1: function() {
    return 'Use {{ }} in <h> <p> etc - from method Hello1';
    },
    sayHello2: function() {
    return this.title;
    },
    sayHello3: function() {
    return 'Used Vue bind directive to dynamically link to web shortcut- from method Hello3';
    },
    show: function() {
    	this.showParagraph = true;
      this.updateTitle('The VueJS Instance (Updated)')
    },
    updateTitle: function(title) {
    	this.title = title;
    }
  },
  computed: {
  	lowercaseTitle: function() {
    	return this.title.toLowerCase();
    }
  },
  watch: {
  	title: function(value) {
    	alert('Title changed, new value: ' + value);
    }
  }
});