模式
传统的mvp模式：moudel(数据)、view(视图)、presenter（控制器，业务逻辑）。
控制器调用数据层，改变试图层，是个中转站，大部分代码集中在这一层，有大量dom操作。
mvvm模式：model层,view层,vm层
ViewModel取代presenter,使数据和Dom建立了联系，不用我们编写dom操作代码了。我们主要在面向数据编程，所有东西都是响应式的。
组件化
全局组件，使用
Vue.component()：内部实例化一个组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!-- v-model与数据进行双向绑定，当input中的值发生变化的时候，Vue实例中的数据也会发生变化，当Vue数据发生变化的时候，input框中的值也会发生变化 --> <input type="text" v-model="inputValue" /> <button v-on:click="handleBtnClick">提交</button> <ul> <!-- v-for是一个模板指令，帮助我们去循环数据 --> <!-- <li v-for="item in list">{{item}}</li> --> <todo-item v-bind:content="item" v-for="item in list"></todo-item> </ul> </div> </body> <script> Vue.component("TodoItem",{ props:['content'], template:"<li>{{this.content}}</li>" }) var obj={ list:[], inputValue:"" } var app=new Vue({ el:"#app",//接管id=app里面的内容，el限制了vue接管的内容 data:obj, methods:{//方法定义在methods中 handleBtnClick:function(){ this.list.push(this.inputValue) this.inputValue=""; } } }); </script> </html>
局部组件，需要在new Vue中注册，注意要写在new Vue之前，不然会找不到。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!-- v-model与数据进行双向绑定，当input中的值发生变化的时候，Vue实例中的数据也会发生变化，当Vue数据发生变化的时候，input框中的值也会发生变化 --> <input type="text" v-model="inputValue" /> <button v-on:click="handleBtnClick">提交</button> <ul> <!-- v-for是一个模板指令，帮助我们去循环数据 --> <!-- <li v-for="item in list">{{item}}</li> --> <todo-item v-bind:content="item" :index="index" v-for="(item,index) in list" @delete="handleDeleteItem"></todo-item> <!-- @delete监听 --> <!-- ：是v-bind:的简写 --> </ul> </div> </body> <script> //全局组件 // Vue.component("TodoItem",{ // props:['content'], // template:"<li>{{this.content}}</li>" // }) var obj={ list:[], inputValue:"" } //局部组件，要在Vue实例化之前写,子组件 var TodoItem={ props:["content","index"], template:"<li @click='handleItemClick'>{{this.content}}</li>",// @是v-on的简写 methods:{ handleItemClick:function(){ // alert(this.index); this.$emit('delete',this.index); } } } var app=new Vue({ el:"#app",//接管id=app里面的内容，el限制了vue接管的内容 components:{ //局部组件需要注册到Vue实例中 TodoItem:TodoItem }, data:obj, methods:{//方法定义在methods中 handleBtnClick:function(){ this.list.push(this.inputValue) this.inputValue=""; }, handleDeleteItem:function(index){ this.list.splice(index,1); } } }); </script> </html>
- @是v-on:的简写
- ：是v-bind的简写
-
v-model实现双向绑定