web-profile

Vue.js

Vue instance options

  • el: connect to DOM
  • data: store data to be used
  • methods: methods of current Vue instance
  • computed: dependent properties
  • watch: execute code upon data change

html:

<div id="app">
  <p>Variable: {{ title }}</p>
  <input type="text" v-on:input="changeTitle" placeholder="Type to change title...">
  <p>Function: {{ sayHello() }}</p>
</div>

js:

new Vue({
  el: '#app',
  data: {
    title: 'Custom Title!'
  },
  methods: {
    changeTitle: function(event) {
      this.title = event.target.value;
    },
    sayHello: function(event) {
      return this.title;
    }
  }
});

Leave a Reply

Your email address will not be published.