Vue2.0的改变

来源：互联网发布：哪里买高仿手表知乎编辑：程序博客网时间：2024/05/20 09:25

vue2.0-组件定义方式

全局

 <script>        var Home={  //这是2.0组件            template:'#aaa'        };  //Vue.extend()        Vue.component('my-aaa',Home);        window.onload=function(){            new Vue({                el:'#box',                data:{                    msg:'welcome vue2.0'                }            });        };    </script><template id="aaa">        <div>            <h3>我是组件</h3>            <strong>我是加粗标签</strong>        </div>    </template>    <div id="box">        <my-aaa></my-aaa>        {{msg}}    </div>

局部

var Home={  //这是2.0组件            template:'#aaa'        };  //Vue.extend()        window.onload=function(){            new Vue({                el:'#box',                data:{                    msg:'welcome vue2.0'                },                components:{                    'aaa':Home                }            });        };

Vue.component('my-aaa',{            template:'#aaa'        });        window.onload=function(){            new Vue({                el:'#box',                data:{                    msg:'welcome vue2.0'                }            });        };

生命周期

beforeCreate    组件实例刚刚被创建,属性都没有        created    实例已经创建完成，属性已经绑定        beforeMount    模板编译之前        mounted    模板编译之后，代替之前ready  *        beforeUpdate    组件更新之前        updated    组件更新完毕    *        beforeDestroy    组件销毁前        destroyed    组件销毁后

  <script>        window.onload=function(){            new Vue({                el:'#box',                data:{                    msg:'welcome vue2.0'                },                methods:{                    update(){                        this.msg='大家好';                    },                    destroy(){                        this.$destroy();                    }                },                beforeCreate(){                    console.log('组件实例刚刚被创建');                },                created(){                    console.log('实例已经创建完成');                },                beforeMount(){                    console.log('模板编译之前');                },                mounted(){                    console.log('模板编译完成');                },                beforeUpdate(){                    console.log('组件更新之前');                },                updated(){                    console.log('组件更新完毕');                },                beforeDestroy(){                    console.log('组件销毁之前');                },                destroyed(){                    console.log('组件销毁之后');                }            });        };    </script></head><body>    <div id="box">        <input type="button" value="更新数据" @click="update">        <input type="button" value="销毁组件" @click="destroy">        {{msg}}    </div></body>

组件2.0循环

<script>        window.onload=function(){            new Vue({                el:'#box',                data:{                    list:['width','height','border']                },                methods:{                    add(){                        this.list.push('background');                    }                }            });        };    </script></head><body>    <div id="box">        <input type="button" value="添加" @click="add">        <ul>            <li v-for="(val,index) in list" :key="index">                {{val}} {{index}}            </li>        </ul>    </div></body>

自定义键盘

 <script>        //Vue.directive('on').keyCodes.ctrl=17;        Vue.config.keyCodes.ctrl=17;        window.onload=function(){            new Vue({                el:'#box',                data:{                },                methods:{                    change(){                        alert('改变了');                    }                }            });        };    </script></head><body>    <div id="box">        <input type="text" @keyup.ctrl="change">    </div></body>

单一事件中心管理组件通信

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>智能社——http://www.zhinengshe.com</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <style>    </style>    <script src="vue.js"></script>    <script>        //准备一个空的实例对象        var Event=new Vue();        var A={            template:`                <div>                    <span>我是A组件</span> -> {{a}}                    <input type="button" value="把A数据给C" @click="send">                </div>            `,            methods:{                send(){                    Event.$emit('a-msg',this.a);                }            },            data(){                return {                    a:'我是a数据'                }            }        };        var B={            template:`                <div>                    <span>我是B组件</span> -> {{a}}                    <input type="button" value="把B数据给C" @click="send">                </div>            `,            methods:{                send(){                    Event.$emit('b-msg',this.a);                }            },            data(){                return {                    a:'我是b数据'                }            }        };        var C={            template:`                <div>                    <h3>我是C组件</h3>                    <span>接收过来的A的数据为: {{a}}</span>                    <br>                    <span>接收过来的B的数据为: {{b}}</span>                </div>            `,            data(){                return {                    a:'',                    b:''                }            },            mounted(){                //var _this=this;                //接收A组件的数据                Event.$on('a-msg',function(a){                    this.a=a;                }.bind(this));                //接收B组件的数据                Event.$on('b-msg',function(a){                    this.b=a;                }.bind(this));            }        };        window.onload=function(){            new Vue({                el:'#box',                components:{                    'com-a':A,                    'com-b':B,                    'com-c':C                }            });        };    </script></head><body>    <div id="box">        <com-a></com-a>        <com-b></com-b>        <com-c></com-c>    </div></body></html>

vue2.0:
bower info vue

http://vuejs.org/

到了2.0以后，有哪些变化?

在每个组件模板，不在支持片段代码
组件中模板:

 之前:     <template>         <h3>我是组件</h3><strong>我是加粗标签</strong>     </template> 现在:  必须有根元素，包裹住所有的代码     <template id="aaa">             <div>                 <h3>我是组件</h3>                 <strong>我是加粗标签</strong>             </div>     </template>

关于组件定义
Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃
Vue.component(组件名称,{ 在2.0继续能用
```
 data(){} methods:{} template:
```
});
2.0推出一个组件，简洁定义方式：
var Home={
```
 template:''        ->   Vue.extend()
```
};

生命周期
之前:

 init     created beforeCompile compiled ready        √    ->     mounted beforeDestroy     destroyed

现在:

 beforeCreate    组件实例刚刚被创建,属性都没有 created    实例已经创建完成，属性已经绑定 beforeMount    模板编译之前 mounted    模板编译之后，代替之前ready  * beforeUpdate    组件更新之前 updated    组件更新完毕    * beforeDestroy    组件销毁前 destroyed    组件销毁后

循环
2.0里面默认就可以添加重复数据
arr.forEach(function(item,index){
});
去掉了隐式一些变量
```
 $index    $key
```
之前:
```
 v-for="(index,val) in array"
```
现在:
```
 v-for="(val,index) in array"
```

track-by="id"
变成

 <li v-for="(val,index) in list" :key="index">

自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;
现在: Vue.config.keyCodes.ctrl=17
过滤器
之前:
```
 系统就自带很多过滤 {{msg | currency}} {{msg | json}} .... limitBy filterBy .....
```
一些简单功能，自己通过js实现
到了2.0，内置过滤器，全部删除了

lodash    工具库    _.debounce(fn,200)自定义过滤器——还有    但是,自定义过滤器传参    之前:    {{msg | toDou '12' '5'}}    现在:     {{msg | toDou('12','5')}}

组件通信:
vm.$emit()
vm.$on();

父组件和子组件:子组件想要拿到父组件数据:    通过  props之前，子组件可以更改父组件信息，可以是同步  sync现在，不允许直接给父级的数据，做赋值操作问题，就想更改：    a). 父组件每次传一个对象给子组件, 对象之间引用    √    b). 只是不报错, mounted中转

可以单一事件管理组件通信: vuex
var Event=new Vue();

Event.$emit(事件名称, 数据)Event.$on(事件名称,function(data){    //data}.bind(this));

debounce 废弃
-> lodash

    _.debounce(fn,时间)

阅读全文

0 0