前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

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

作者头像
用户1197315
发布2018-01-22 12:04:40
5750
发布2018-01-22 12:04:40
举报
文章被收录于专栏:柠檬先生

组件模板:

    之前:

代码语言:js
复制
      <template>
        <h3>我是组件</h3><strong>我是加粗标签</strong>
      </template>

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

    例如:       

代码语言:js
复制
      <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 组件销

例如:

代码语言:js
复制
        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里面默认就可以添加重复数据

      去掉了隐式一些变量

代码语言:js
复制
      $index $key

    之前:

代码语言:js
复制
      v-for="(index,val) in array"

    现在:

代码语言:js
复制
      v-for="(val,index) in array"
       track-by="id"

    变成

代码语言:js
复制
      <li v-for="(val,index) in list" :key="index">

    例如:

代码语言:js
复制
      <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

      例如:

代码语言:js
复制
      <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>

过滤器

    之前:

      系统就自带很多过滤

        {{msg | currency}}

        {{msg | json}}

        ....

        limitBy

        filterBy

        .....

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

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

    自定义过滤器——还有

      但是,自定义过滤器传参

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

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

    例如:

代码语言:js
复制
   <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>

    例如:

代码语言:js
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-05-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档