vue生命周期以及常用标签
vue生命周期以及常用标签
vue生命周期
new Vue({
el: "#app",
data(){
return {
userName : "test",
}
},
beforeCreate() {
//实例在内存中被创建还没有初始化好data和metheds
console.group('beforeCreate 创建前状态===============》');
},
created() {
//实例被创建完毕，data和metheds在内存中被创建，但还未编译模板
console.group('created 创建完毕状态===============》');
},
beforeMount() {
//完成模板编译名单还未挂载到页面
console.group('beforeMount 挂载前状态===============》');
},
mounted() {
//模板已经挂载到页面上，一般在这做数据初始化
console.group('mounted 挂载结束状态===============》');
},
beforeUpdate() {
//实例更新前执行此函数，data已经是最新的，界面还是旧数据，dom还未被重新渲染
console.group('beforeUpdate 更新前状态===============》');
},
updated() {
//实例更新完毕调用此函数，界面已经渲染完毕
console.group('updated 更新完成状态===============》');
},
beforeDestroy() {
//实例销毁前调用，这一步用例任然可用
console.group('beforeDestroy 销毁前状态===============》');
},
destroyed() {
//实例销毁后调用，vue实例指示的所有都会解绑，所有的事件监听都会解绑，所有的子实例都会被销毁
console.group('destroyed 销毁完成状态===============》');
},
methods: {
//普通方法区域
btn(){
this.message = "change"
}
}
//路由
router: router
})
指令标签
-
{{}} : 插值表达式用于输出对象和返回值，例如{{user.name}}
-
v-html 输出原生的字符不转义
-
v-model 双向绑定数据
-
v-text 输出文本
-
v-bind 绑定属性 例如 v-bind:class="d-header" 简写 :class="d-header"
-
v-on:click 简写 @click 绑定事件
-
v-if 根据条件决定是否插入dom，与v-show的区别在于是否渲染dom，v-if直接不渲染，v-show渲染但根据条件决定是否显示，其中v-else，v-else-if必须跟在v-if的后面
模板语法 {{ #if seen }} <p>看见我了</p> {{ if }} 指令语法 <p v-show="seen">看见我了</p> -
v-for 遍历数据
v-for="site in sites" //对象数组 v-for="value in obj" //迭代对象 v-for="(value,key) in obj" //迭代对象 v-for="(value,key,index) in obj" //迭代对象 v-for="index in 10" //迭代整数
过滤器
//全局时间格式化过滤器
Vue.filter("formatDate", function(date, format) {
if(format == null) {
format = 'yyyy/MM/dd h:m:s:S'
}
date = new Date(date);
var map = {
"M": date.getMonth() + 1, // 月份
"d": date.getDate(), // 日
"h": date.getHours(), // 小时
"m": date.getMinutes(), // 分
"s": date.getSeconds(), // 秒
"q": Math.floor((date.getMonth() + 3) / 3), // 季度
"S": date.getMilliseconds()
// 毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if(v !== undefined) {
if(all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if(t === 'y') {
return(date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
})
路由
const routes = [{
path: '/login',
component: app_login //app_model_mgr
},
{
path: '/404',
component: app_404 //app_404
},
{
name: "用户管理",
path: "/",
component: app_main,
children: [{
name: "用户管理",
path: 'app/user',
component: app_user_mgr
}, ]
},
{
name: "模型管理",
path: "/",
component: app_main,
children: [{
name: "模型管理",
path: 'app/model',
component: app_model_mgr
}, ]
},
{
name: "云端切片",
path: "/",
component: app_main,
children: [{
name: "云端切片",
path: 'app/cloud-cut',
component: app_cloud_cut
}, ]
},
{
name: "APP管理",
path: "/",
component: app_main,
children: [{
name: "Android版本管理",
path: 'app/android',
component: app_android_mgr
},
{
name: "iOS版本管理",
path: 'app/ios',
component: app_ios_mgr
},
{
name: "APP推送消息管理",
path: 'app/msg',
component: app_msg_mgr
},
{
name: "APP在线商品管理",
path: 'app/product',
component: app_product_mgr
},
{
name: "设备固件管理",
path: 'app/fireware',
component: app_fireware_mgr
},
{
name: "APP升级码管理",
path: 'app/active-code',
component: app_active_code_mgr
},
]
},
{
path: "*",
redirect: "/404"
}
]
const router = new VueRouter({
linkActiveClass: 'active',
routes: routes,
})
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
//sessionStorage.removeItem('user');
}
let user = sessionStorage.getItem('userName');
if (!user && to.path != '/login') {
next({ path: '/login' })
} else {
next()
}
})
