Vue.js – v attr

v-x attributes

v- is Vue attribute bind and management description.
There are a lot of v- prefix

For details, please read Vue.js document : Reactive Directives

v- list

v- description
v-bind:x x is attributes name, any text is O.K. basically
v-if if : Use condition management
v-for For loop, Use like this: v-for=”item in items”
v-on:x Bind events(for example v-on:click
v-model Bind data into this element(Use for input tag etc…)
v-once Can change only one time(Become read-only)
v-html Bind row html code into text attr
v-show Whether this element should be show or not

Examples

v-bind:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app-2">
      <span v-bind:title="message">
        Message is title attr in span tag.
      </span>
    </div>
    <script>
    new Vue({
      el: '#app-2',
      data: {
        message: 'This is hidden message'
      }
    })
    </script>
  </body>
</html>

v-bind:href

Bind href in a tag.

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app-2">
      <p>
        <a v-bind:href="url">Link</a>
        <a :href="url">ShortHand</a>
      </p>
    </div>
    <script>
    new Vue({
      el: '#app-2',
      data: {
        url: 'https://www.google.com.sg'
      }
    })
    </script>
  </body>
</html>

v-if

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app-3">
      <span v-if="seen">Now you see me!</span>
    </div>
    <script>
    new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })
    </script>
  </body>
</html>

If change “seen” data from true to false, you cannot see span tag.

v-for

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>
    <script>
    new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    })
    </script>
  </body>
</html>

v-on:click

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
    <script>
    new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function() {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    </script>
  </body>
</html>

methods is method data into this vue object.
You can add function inside of this data.

We can use @click as same meanings.

v-model

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
    <script>
    var app6 = new Vue({
      el: '#app-6',
      data: {
        message: 'Hello Vue'
      }
    })
    </script>
  </body>
</html>

data.message is inside of input.
Every time data in input chages, message also changes.

v-html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
     <div id="app-7>
        <p>Non Raw<span>{{ rawHtml }}</span></p>
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
     </div>
     <script>
     var vm = new Vue({
        el: '#app',
        data: {
            rawHtml: '<strong>V2</strong>'
        }
     });
     <script>
  </body>
</html>