唯

Install

The official guide suggests using the CDN setting when we're a newbie.

This one is the production version. I copy it and paste it at the bottom ( just personally like, paste in the "head", it works too ).

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Get basic content (ex: text).

The below message with red color is generated by VUE, we can open the F12 and go to 'Console' to change the value.

{{ message }}

Its looks like this in 'Console':

app.message = 'test'

You can get the new value in the browser.*1

For loop

Let's try "v-for", it's a "for loop" in VUE.

The interesting thing is, you can write texts, arrays even CSS styles in the same place and then get them back as a variable.

Take a look:

  <ul>
    <li v-for="itemName in arrayName">
      {{ itemName.yourTargetName }}
    </li>
  </ul>

My sameple is:

  <ul>
    <li v-for="item in arr">
      {{ item.name }} is a {{ item.age }}-year-old {{ item.job }} now.
    </li>
  </ul>

The array in data object:

  arr: [
    {
        name: 'Trista',
        age: 40,
        job: 'freelancer',
        id: Math.random().toString(16).slice(2)
    },
    {
        name: 'CiCi',
        age: 13,
        job: 'student',
        id: Math.random().toString(16).slice(2)
    },
    {
        name: 'Zoe',
        age: 9,
        job: 'student',
        id: Math.random().toString(16).slice(2)
    }
  ]