下面列举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