vue框架认知

vue框架使用的是mvvm架构，与之前的mvp架构不同，将开发的重点放在了数据和数据的处理上，mvvm框架自带的vm层节省了前端开发时必须的操纵dom的操作。

直接上一段代码

 <div id="app">
 	<input type="text" v-model= "inputValue" />
 	<button v-on:click="handleClickvalue" >click</button>
 	<p>正在进行</p>
 	<ul>
 		<todo-item 
 				v-bind:content= "item"
 				v-bind:index="index" 
 				v-for="(item, index) in todolist"
 				@delete="handleItemdelete"
 		></todo-item>
 	</ul>
 </div>
 <script>
 	var TodoItem = {
 		props:['content', 'index'],
 		template:"<li @click='handleItemclick'>{{content}}</li>",
 		methods: {
 			handleItemclick : function() {
 				this.$emit("delete", this.index);
 			}
 		}
 	}
 	var app = new Vue({
 		el: "#app",
 		components: {
 			TodoItem: TodoItem
 		},
 		data: {
 			todolist: [],
 			inputValue: "",
 			downlist:[]
 		},
 		methods: {
 			handleClickvalue: function() {
 				this.todolist.push(this.inputValue);
 				this.inputValue = "";
 			}, 
 			handleItemdelete: function(index) {
 				this.todolist.splice(index, 1);
 			}
 		}
 	});
 </script>

事件的数据在data里面，数据的处理在methods里，不需要操作dom节省了很多的步骤