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);
},