Vue.js基础知识小结

<div id="app">  {{massage}}</div>var app = new Vue({el:"#app",data:{message:"Hello,vue.js!"}

<div id="app"> <p>{{message}}</p><input v-model="message" /></div>var app = new Vue({el:"#app",data:{message:"Hello,vue.js!"}

<div id="app">    <ul>      <li v-for="todo in todos">       {{ todo.text }}      </li>    </ul></div>new Vue({   el:"#app",   data:{      todos:[       {text:"abcdef"},       {text:"123456"},       {text:"qwerta"}    ]  }})

<div id="app">  <p>{{ message }}</p>  <button v-on:click="reverseMessage">Reverse Message</button></div>new Vue({   el: "#app",   data:{    message:"Hello Vue.js!"     },   methods:{    reverseMessage:function()    {      this .message = this.message.split('').revserse().join('');    }  }})

<div id="app"> <input v-model="newTodo" v-on:keyup.enter="addTodo" /> <ul> <li v-for = "todo in todos">  <span>{{ todo.text }}</span>  <button v-on:click="removeTodo($index)">X</button> </li> </ul></div>

<script type="text/javascript" src="js/vue.min.js"></script><script> new Vue({ el:"#app", data:{  newTodo:"",  todos:[  {   text:'Add some todos 1'  },  {   text:'Add some todos 2'  },{   text:'Add some todos 3'  }  ] }, methods:{  addTodo: function(){  //去除首尾的空格  var text = this.newTodo.trim();  //去除后非空的话  if(text){   this.todos.push({ text: text })   this.newTodo = ''  }  },  removeTodo: function(index){  this.todos.splice( index, 1 )  } } })</script>