Vue.js基础知识小结?

Question

Vue.js基础知识小结

Answer 1

数据绑定&nbsp;1.单向绑定&nbsp; &nbsp; &nbsp;<div id="app"> &nbsp; &nbsp;{{massage}} &nbsp;</div> &nbsp;var app = new Vue({ &nbsp;el:"#app", &nbsp;data:{ &nbsp;message:"Hello,vue.js!" &nbsp;} &nbsp; &nbsp; &nbsp;2.双向绑定&nbsp; &nbsp; &nbsp;<div id="app"> &nbsp; <p>{{message}}</p> &nbsp;<input v-model="message" /> &nbsp;</div> &nbsp;var app = new Vue({ &nbsp;el:"#app", &nbsp;data:{ &nbsp;message:"Hello,vue.js!" &nbsp;} &nbsp; &nbsp; &nbsp;3.v-for列表渲染&nbsp; &nbsp; &nbsp;<div id="app"> &nbsp; &nbsp; &nbsp;<ul> &nbsp; &nbsp; &nbsp; &nbsp;<li v-for="todo in todos"> &nbsp; &nbsp; &nbsp; &nbsp; {{ todo.text }} &nbsp; &nbsp; &nbsp; &nbsp;</li> &nbsp; &nbsp; &nbsp;</ul> &nbsp;</div> &nbsp;new Vue({ &nbsp; &nbsp; el:"#app", &nbsp; &nbsp; data:{ &nbsp; &nbsp; &nbsp; &nbsp;todos:[ &nbsp; &nbsp; &nbsp; &nbsp; {text:"abcdef"}, &nbsp; &nbsp; &nbsp; &nbsp; {text:"123456"}, &nbsp; &nbsp; &nbsp; &nbsp; {text:"qwerta"} &nbsp; &nbsp; &nbsp;] &nbsp;} &nbsp;}) &nbsp; &nbsp; &nbsp;3.处理用户输入&nbsp; &nbsp; &nbsp;<div id="app"> &nbsp; &nbsp;<p>{{ message }}</p> &nbsp; &nbsp;<button v-on:click="reverseMessage">Reverse Message</button> &nbsp;</div> &nbsp;new Vue({ &nbsp; &nbsp; el: "#app", &nbsp; &nbsp; data:{ &nbsp; &nbsp; &nbsp;message:"Hello Vue.js!" &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; methods:{ &nbsp; &nbsp; &nbsp;reverseMessage:function() &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp;this .message = this.message.split('').revserse().join(''); &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp;} &nbsp;}) &nbsp; &nbsp;4.综合&nbsp; &nbsp; &nbsp;<div id="app"> &nbsp; <input v-model="newTodo" v-on:keyup.enter="addTodo" /> &nbsp; <ul> &nbsp; <li v-for = "todo in todos"> &nbsp; &nbsp;<span>{{ todo.text }}</span> &nbsp; &nbsp;<button v-on:click="removeTodo($index)">X</button> &nbsp; </li> &nbsp; </ul> &nbsp;</div> &nbsp; &nbsp; &nbsp; &nbsp;<script type="text/javascript" src="js/vue.min.js"></script> &nbsp;<script> &nbsp; new Vue({ &nbsp; el:"#app", &nbsp; data:{ &nbsp; &nbsp;newTodo:"", &nbsp; &nbsp;todos:[ &nbsp; &nbsp;{ &nbsp; &nbsp; text:'Add some todos 1' &nbsp; &nbsp;}, &nbsp; &nbsp;{ &nbsp; &nbsp; text:'Add some todos 2' &nbsp; &nbsp;},{ &nbsp; &nbsp; text:'Add some todos 3' &nbsp; &nbsp;} &nbsp; &nbsp;] &nbsp; }, &nbsp; methods:{ &nbsp; &nbsp;addTodo: function(){ &nbsp; &nbsp;//去除首尾的空格 &nbsp; &nbsp;var text = this.newTodo.trim(); &nbsp; &nbsp;//去除后非空的话 &nbsp; &nbsp;if(text){ &nbsp; &nbsp; this.todos.push({ text: text }) &nbsp; &nbsp; this.newTodo = '' &nbsp; &nbsp;} &nbsp; &nbsp;}, &nbsp; &nbsp;removeTodo: function(index){ &nbsp; &nbsp;this.todos.splice( index, 1 ) &nbsp; &nbsp;} &nbsp; } &nbsp; }) &nbsp;</script> &nbsp; &nbsp;以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！