VueJs v-*

<script></script> format

<script>
var app = new Vue ({
   el:'#app', //element
   data: {
        message: "Hello World!", //render data
        todos: [
            { text: 'Vue' },
            { text: 'Js' }
        ]
    },
//function
   methods: {
      countNumber: function () {
            this.count += 1
      }
    },
//function, when elements(firstname/lastname) change, the fullname change
    computed: {
        fullname: function () {
            return this.firstname + this.lastname
        }
   }  
})
</script>

 

 

v-*

1. v-text
2. v-html
3. v-show //if it is true, it will show this element, else hiding the element
4. v-if //like v-show, but it doesn't display html if it is false
5. v-else //v-if, v-else
6. v-pre //display the pure text instead of rendering it
7. v-once //just render once
8. v-cloak //do it before Vue ends loading
   

   [v-cloak] {
       background-color: red;
   }

9. v-bind: title = "title" //"v-bind:" can be replaced by ":"
10. v-for
    

    /*see script in 1.*/
    <template>
    <ul>
        <li v-for=“todo in todos”>{{ todo.id }} {{ todo.text }}</li>
    </ul>
    </template>

11. v-model //bind view to model(view-model, {{}}: model-view)
    

    <input type = “text” v-model=“message” />
    <!--when you input message, it change the message in data-->

12. v-on: or @
    

    <button @click=“countNumber”></button>

13. s

 

reference: "Vue.js 2.0 Fundamentals" from YouTube (https://www.youtube.com/channel/UC6kwT7-jjZHHF1s7vCfg2CA/videos)