Vue2.0的变化，组件模板，生命周期，循环，自定义键盘指令，过滤器

组件模板：

　　　　之前:

　　　　　　<template>
　　　　　　　　<h3>我是组件</h3><strong>我是加粗标签</strong>
　　　　　　</template>

　　　　现在: 必须有根元素，包裹住所有的代码　　

　　　　例如：　　　　　　　

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

生命周期：　　

　　　　　　之前:

　　　　　　　　init

　　　　　　　　created

　　　　　　　　beforeCompile

　　　　　　　　compiled

　　　　　　　　ready √ -> mounted

　　　　　　　　beforeDestroy

　　　　　　　　Destroyed

　　　　　　现在:

　　　　　　　　beforeCreate 组件实例刚刚被创建,属性都没有

　　　　　　　　created 实例已经创建完成，属性已经绑定

　　　　　　　　beforeMount 模板编译之前

　　　　　　　　mounted 模板编译之后，代替之前ready *

　　　　　　　　beforeUpdate 组件更新之前

　　　　　　　　updated 组件更新完毕 *

　　　　　　　　beforeDestroy 组件销毁前

　　　　　　　　destroyed 组件销

例如：

  　　　　　　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('组件销毁之后');
               　　　}
           　　 });
 　　　　<div id="box">
       　　　　<input type="button" value="更新数据" @click="update">
        　　　<input type="button" value="销毁组件" @click="destroy">
        　　　{{msg}}
    　　</div>

循环：

　　　　2.0里面默认就可以添加重复数据

　　　　　　去掉了隐式一些变量

　　　　　　$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">

　　　　例如：

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

自定义键盘指令

　　　　　　之前：Vue.directive('on').keyCodes.f1=17;

现在: Vue.config.keyCodes.ctrl=17

　　　　　　例如：

　　　　　　<script>
        　　　　　　//Vue.directive('on').keyCodes.ctrl=17;
        　　　　　　Vue.config.keyCodes.ctrl=17;
       　　　　　　 window.onload=function(){
            　　　　　　new Vue({
                　　　　　　　　el:'#box',
                　　　　　　　　data:{
                　　　　　　　　　　},
                　　　　　　　　methods:{
                    　　　　　　 change(){
                        　　　　　　 alert('改变了');
                    　　　　　　 }
                　　　　   }
           　　　　   });
        　　　　 };
    　　　　</script>
    　　   <div id="box">
        　　　　<input type="text" @keyup.ctrl="change">
    　　 </div>
　　　window.onload=function(){
            new Vue({
                　　el:'#box',
                　　data:{
                    　　list:['width','height','border']
                　　},
               　　 methods:{
                    　　add(){
                        　　this.list.push('background');
                   　　 }
                　　}
            　　});
        　　};
　　　<div id="box">
        　　<input type="button" value="添加" @click="add">
        　　<ul>
           　　 <li v-for="(val,index) in list" :key="index">
                　　{{val}} {{index}}
            　　</li>
        　　</ul>
    　</div>

过滤器

　　　　之前:

　　　　　　系统就自带很多过滤

　　　　　　　　....

　　　　　　　　limitBy

　　　　　　　　filterBy

　　　　　　　　.....

　　　　　　一些简单功能，自己通过js实现

　　　　到了2.0，内置过滤器，全部删除了

　　　　自定义过滤器——还有

　　　　　　但是,自定义过滤器传参

　　　　　　之前: {{msg | toDou '12' '5'}}

　　　　　　现在: {{msg | toDou('12','5')}}

　　　　例如：

 　　<script>
        　　　　Vue.filter('toDou',function(n){
           　　　　 //alert(input);
            　　　　return n<10?'0'+n:''+n;
        　　　　});
       　　 window.onload=function(){
            　　　　new Vue({
              　　　　  el:'#box',
                　　　　　　data:{
                   　　　　　　 msg:9
                　　　　　　}
            　　　　});
        　　　　};
    　　</script>

　　　　例如：

<script>
        Vue.filter('toDou',function(n,a,b){
            alert(a+','+b);
            //alert(input);
            return n<10?'0'+n:''+n;
        });
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:9
                }
            });
        };
</script>
　　<div id="box">
        {{msg | toDou('12','5')}}
    </div>

Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

Vue2.0的变化，组件模板，生命周期，循环，自定义键盘指令，过滤器