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