vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

xiaoxiede_wo

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量97

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/xiaoxiede_wo/article/details/89416184

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.MVVM模式：当view（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然；view和viewModel之间通过双向绑定（data-binding）建立联系。

2.v-pre:可跳过这个元素和他子元素的编译过程；

3.created：实例创建完后调用，VUe尚未挂载，el不可用；需要初始化一些数据时会调用

4.mounted：el挂载到实例后调用，一般第一个业务逻辑会从这里开始

5.beforeDestory：实例销毁之前调用。主要解绑一些使用addEventListener监听事件等。

6."{{}}"：是最基本的文本插值方法，它会自动把我们双向绑定的数据实时显示出来。

7.过滤器：Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，常用于格式化文本；{{data | formatDate}}

<body>
    <div id="app">
      {{date|formatDate}}
    </div>
    <script>
        var padDate=function(value){return value<10? '0'+value:value;}
        var app=new Vue({
                el:'#app',       
                data:{
                    date:new Date(),  
                },
                filters:{
                    formatDate:function(value){
                        var date=new Date(value);
                        var year=date.getFullYear();
                        var month=padDate(date.getMonth()+1);
                        var day=padDate(date.getDate());
                        var hours=padDate(date.getHours());
                        var minutes=padDate(date.getMinutes());
                        var seconds=padDate(date.getSeconds());
                        return year+'-'+month+'-'+day+'-'+hours+'-'+minutes+'-'+seconds;
                    }
                },
     
                mounted:function(){
                    var _this=this;              
                    this.timer=setInterval(function(){                      
                        _this.date=new Date();                     
                    }, 1000); 
                },
                beforeDestory:function(){
                    if(this.timer){
                        clearInterval(this.timer);
                    }
                }
            });
        </script> 
  
</body>

其中对_this=this不太理解：是在一个代码片段里this有可能代表不同的对象,而编码者希望_this代表最初的对象

 mounted:function(){
     var _this=this;   //声明一个变量指向Vue实例this           
     this.timer=setInterval(function(){                      
      _this.date=new Date();//setInterval是window的方法，这里的this是window，不能指代原Vue实例
                       
     }, 1000);
  },

xiaoxiede_wo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

1.MVVM模式：当view（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然；view和viewModel之间通过双向绑定（data-binding）建立联系。2.v-pre:可跳过这个元素和他子元素的编译过程；3.created：实例创建完后调用，VUe尚未挂载，el不可用；需要初始化一些数据时会调用4.mounted：el挂载到实例后调用，一般第一个业务逻辑会...
复制链接

扫一扫

专栏目录