zoukankan      html  css  js  c++  java
  • 通俗易懂--快速入门Vue--1

    • 原有设计模式:MVP

      M 模型   数据
      V 视图  触发事件
      P 控制器  负责业务逻辑
      
    • 新设计模式:MVVM

      M层		script 主要M层开发   面向数据编程
      V层		html
      VM层		进行逻辑(自动改变)
      
    • VM层??????

      • 虚拟dom???
      • define proxy 模式???

    项目组件化

    • 每个组件就是页面区域。

    1.全局组件

        Vue.component('todo-item',{
            props:['content'],
            template:"<li>{{content}}</li>"
        });
    

    2.局部组件

    var TodoItem = {
          props:['content'],
          template:"<li>{{content}}</li>"
        };
    
    • 局部组件需要注册
    // 在实例中进行注册
    var vm = new Vue({
    	el:"#app",
    	// 局部组件注册
            components:{
                TodoItem:TodoItem
            },
    })
    

    3父组件向子组件传值

    • 父组件通过v-bind:xxx="xxx" 绑定要传的值,子组件通过定义通过props,接受哪些父组件传来的值,

      v-bind:子组件props接收要穿值的名字=父组件变量的名字
      

    4子组件向父组件传值

    • 子组件通过$emit,将要触发的事件传到父组件,父组件通过监听该事件,来进行值的更改
    // 子组件绑定要触发事件 @click='handelItemClick'
    handelItemClick:function () {
                    this.$emit('delete',this.index)
              }
    //通过$emit触发事件,并传值。
    
    
    //父组件在标签上监听该delete事件,并绑定处理方法
    @delete="handelItemDelete"
    
    //父组件定义handelItemDelete,将传来的数据,在当前实例中修改
    handelItemDelete:function (indexvalue) {
                this.list.splice(indexvalue,1)
    }
    
    • v-bind: 等于 : v-on:等于:

    5一个Todolist的组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src="./vue.js"></script>
    <body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="handlebtnClisk">提交</button>
        <ul>
            <todo-item v-for="(item,index) in list"
                       v-bind:index="index"
                       v-bind:content="item"
                       @delete="handelItemDelete"
    
            >{{item}}</todo-item>
        </ul>
    </div>
    </body>
    <script>
        // 全局组件
        // Vue.component('todo-item',{
        //     props:['content'],
        //     template:"<li>{{content}}</li>"
        // });
        // 局部组件
        var TodoItem = {
          props:['content','index'],
          template:"<li @click='handelItemClick'>{{content}}</li>",
          methods:{
              handelItemClick:function () {
                    this.$emit('delete',this.index)
              }
          }
        };
    
    
    
    
        var vm = new Vue({
            // el限制一个vue实例的管理范围。
            el:"#app",
            // 局部组件注册
            components:{
                TodoItem:TodoItem
            },
            data:{
                list:[],
                inputValue:""
            },
            methods:{
                handlebtnClisk:function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ""
                },
                handelItemDelete:function (indexvalue) {
                    this.list.splice(indexvalue,1)
                }
            }
        });
    
    </script>
    </html>
    
  • 相关阅读:
    bzoj 4446: [Scoi2015]小凸玩密室【树形dp】
    bzoj 4403: 序列统计【lucas+组合数学】
    bzoj 3745: [Coci2015]Norma【分治】
    bzoj 3232: 圈地游戏【分数规划+最小割】
    Codeforces 1000 (A~E)
    bzoj 4753: [Jsoi2016]最佳团体【01分数规划+二分+树上背包】
    bzoj 3872: [Poi2014]Ant colony【树形dp+二分】
    bzoj 2067: [Poi2004]SZN【贪心+二分+树形dp】
    洛谷 P1314 聪明的质监员【二分+前缀和】
    bzoj 4622: [NOI 2003] 智破连环阵【dfs+匈牙利算法】
  • 原文地址:https://www.cnblogs.com/xujunkai/p/12229974.html
Copyright © 2011-2022 走看看