Vue.js基础知识小结?

Question

Vue.js基础知识小结

Answer 1

数据绑定

 

1.单向绑定

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

2.双向绑定

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

3.v-for列表渲染

     <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"}      ]  }  })      

3.处理用户输入

     <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('');      }    }  })    

4.综合

     <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>    

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！