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()
  }
})