官方地址:https://cn.vuejs.org/v2/api/
<html>
<head id="head">
<meta charset="utf-8">
<title>vue 常用属性</title>
<script src="js/vue.min.js"></script>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
h1>span {
color: #535353;
background-color: #d1d1d1;
font-weight: 100;
padding: 4px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>vue 常用属性--测试</h1>
<di id="div1">
<h1>dom1:<span>{{dom1}}</span></h1>
<h1>dom2:<span>{{dom2}}</span></h1>
<h1>过滤器时间戳转换(1614307462): <span>{{1614307462*1000| formatDate}}</span></h1>
</di>
<script>
var vm = new Vue({
//绑定容器。
//类型:string | Element。
//属于:选项 / DOM
el: '#div1',
//变量/数据, Vue 实例的数据对象。
//类型:Object | Function。
//属于:选项 / DOM
data: {
dom1: '',
dom2: '',
},
//在实例创建完成后被立即调用。
//类型:Function。
//属于:选项 / 生命周期钩子
created() {
this.getDom1('created()调用');
},
//实例被挂载后调用。
//类型:Function。
//属于:选项 / 生命周期钩子
mounted() {
this.getDom2('mounted()调用');
},
//包含 Vue 实例可用过滤器的哈希表。
//类型:Object。
//属于:选项 / 资源
filters: {
//例子1
//时间戳格式转换
formatDate: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
}
},
//所用到的方法都写到这里面。
//类型:{ [key: string]: Function }。
//属于:选项 / DOM
methods: {
//例子1
getDom1(str) {
this.dom1 = str;
},
//例子2
getDom2(str) {
this.dom2 = str;
},
},
});
</script>
</body>
</html>
结果:
dom1:created()调用
dom2:mounted()调用
过滤器时间戳转换(1614307462): 2021-02-26 10:44
生命周期