Vue 指令

下面列举VUE的HTML页面模板指令，并进行分别练习。

1. templates

2. v-if, 

v-for

<div id='app'><ol><li v-for="todo in todos'>{{ todo.text}}</li></ol>
</div><script>
app = new Vue({
  el: '#app',
  data: {
    return {

todos = [{text: "First todo item"},{text: "Second todo item"},{text: "Third todo item"}
]

     }

  }
});
</script>

 

3. v-onclick

<div id='app'>{{ message }}<button v-onclick="reverseMessage">Reverse Message </button>
</div><script>
app = new Vue({el: '#app',data: {return {message: "hello vue!",}},methods: {reverseMessage: function(){return this.message.split("").reverse().join("");}}
});
</script>

4. v-model to sync variable 

5. components