2Vue之MVVM模式

 模式

传统的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实现双向绑定

posted @ 2020-11-20 09:57  ellenxx  阅读(148)  评论(0)  编辑  收藏  举报