vue.js

Home / Web programming, webdev / vue.js edit

Try Documentalist, my app that offers fast, offline access to 190+ programmer API docs.

Vue object
- life cycle hooks
  - created
  - mounted
  - updated
  - destoryed

Vue.js notes.

div#app
  p v-if="seen"
    {{ message | capitalize }}
  p v-else
    shown if not seen
  span v-bind:title="message"
  span :title="message"
  ol
    li v-for="todo in todos"
      {{ todo.text }}
  button v-on:click="reverseMessage"
  button @click="reverseMessage"
  input v-model="message"
  div v-html="rawHtml"
  div v-for="(value, key, index) in object"

new Vue({
  el: "#app",
  data: {
    seen: true,
    message: "my messge",
    todos: [
      { text: "todo 1" },
      { text: "todo 2" },
    ],
    rawHtml: "<p>is html</p>",
  },
  methods: {
    reverseMessage: function() {
      this.message = reverse(this.message);
    },
  filters: {
    capitalize: function (value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  },
  computed: {
    reversedMessageComputed: function() {
      return reverse(this.message);
    }
  },
})

https://vuejs.org/v2/api/#v-on event bindings modifiers (e.g. @onclick.stop):

stop, prevent, capture, self, native, once

Links:

Links

Libraries

Full apps in Vue

Written on Jun 1 2017.

home

Found a mistake, have a comment? Let me know.

Share on