一、MVC 和 MVVM 的区别
MVC：
在该模型中最核心部分是Controller，很大一部分是对DOM进行操作。即MVC是面向DOM进行开发
View通过DOM事件监控来操作改变Model，Model通过动态数据绑定来改变视图View
MVVM只需要关注M层的变化即可，数据改变后View会跟着改变。即MVVM是面向数据进行开发
二、什么是组件化
把页面中的某一部分单独拿出来进行封装，有两个特点：组件的封装，组件的复用
合理的拆分组建将大型项目拆分成一个个组件，易于维护
三、Vue中的组件化
//局部组件 var TodoItem = { props:[‘content‘,‘index‘], template:‘<li @click="handleClick">{{content}}</li>‘, methods:{ handleClick:function(){ this.$emit(‘delete‘,this.index); } } } var app = new Vue({ el:‘#app‘, components:{ TodoItem:TodoItem }, data:{ list:[], inputValue:‘‘ }, methods:{ handleBtnClick:function(){ this.list.push(this.inputValue); this.inputValue = ‘‘; }, handleItemDelete:function(index){ this.list.splice(index,1); } } });
//全局组件 Vue.component(‘TodoItem‘,{ props:[‘content‘], template:‘<li>{{content}}</li>‘ });
<div id="app"> <input type="text" v-model=‘inputValue‘/> <button v-on:click=‘handleBtnClick‘>提交</button> <ul> <todo-item v-bind:content=‘item‘ v-bind:index=‘index‘ v-for=‘(item,index) in list‘ @delete=‘handleItemDelete‘> </todo-item> </ul> </div>
四、Vue中父子组件相互传值
组件中使用v-bind:item="item"
子组件中通过 props:["item"]接收参数
//通过监听事件 this.$emit(‘delete‘,this.index);
五、用到的命令
v-bind:item="item" ==> :item="item" v-on:click="handleBtnClick" ==> @click="handleBtnClick" v-for="item in list" v-for="(item,index) in list"
jQuery数组方法：splice()
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
| 参数 | 描述 |
|---|---|
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
| howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
| item1, ..., itemX | 可选。向数组添加的新项目。 |
原文：https://www.cnblogs.com/yyjbk/p/9716008.html