vue

vue2.0/vue高阶/4.归纳.md

@@ -104,3 +104,31 @@
 ```
 接收params参数
     * this.$route.params
+
+9. 编程式导航
+作用:更加灵活的跳转路由
+this.$router.push("路径")
+this.$router.go(数字) 
+this.$router.back() 返回
+this.$router.forward() 前进
+
+10. 路由懒加载
+```()=>import('../components/vase1.vue')
+```
+* 按需加载 提升性能
+
+11. 组件缓存
+keep-alive
+1. 什么都不写 全部缓存
+2. include 单独缓存 注意：组件一定要起名
+3. 多个缓存 :include="['xxx','ccc']"
+
+生命周期
+```
+  activated() {
+    组件被调用时激活
+  },
+  deactivated() {
+    组件被销毁时激活
+  },
+```

vue2.0/vue高阶/project1.0/src/components/demo2.vue

@@ -2,6 +2,8 @@
   <div class="demo1">
     我是案例二
     <el-image :src="src"></el-image>
+    <button @click="$router.back()">回去</button>
+    <button @click="$router.push('/detail')">详情页</button>
   </div>
 </template>
 

vue2.0/vue高阶/project1.0/src/components/vase1.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="vase1">
+    <el-form ref="form" :style="{opacity}" :model="form" label-width="80px">
+      <el-form-item label="活动名称">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域">
+        <el-select v-model="form.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间">
+        <el-col :span="11">
+          <el-date-picker
+            type="date"
+            placeholder="选择日期"
+            v-model="form.date1"
+            style="width: 100%"
+          ></el-date-picker>
+        </el-col>
+        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="11">
+          <el-time-picker
+            placeholder="选择时间"
+            v-model="form.date2"
+            style="width: 100%"
+          ></el-time-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="即时配送">
+        <el-switch v-model="form.delivery"></el-switch>
+      </el-form-item>
+      <el-form-item label="活动性质">
+        <el-checkbox-group v-model="form.type">
+          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+          <el-checkbox label="地推活动" name="type"></el-checkbox>
+          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="特殊资源">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="线上品牌商赞助"></el-radio>
+          <el-radio label="线下场地免费"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="活动形式">
+        <el-input type="textarea" v-model="form.desc"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name:"vase1",
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      opacity: 1,
+      timer: null
+    };
+  },
+  activated() {
+    console.log("激活")
+       this.timer = setInterval(()=>{
+        this.opacity -= 0.01;
+        if(this.opacity <= 0) {
+            this.opacity = 1;
+        }
+    },100)
+  },
+  deactivated() {
+    console.log("消耗");
+    clearInterval(this.timer)
+  },
+  methods: {
+    onSubmit() {
+      console.log("submit!");
+    },
+  },
+};
+</script>
+
+<style></style>

vue2.0/vue高阶/project1.0/src/components/vase2.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="vase2">
+    <el-form
+      :model="dynamicValidateForm"
+      ref="dynamicValidateForm"
+      label-width="100px"
+      class="demo-dynamic"
+    >
+      <el-form-item
+        prop="email"
+        label="邮箱"
+        :rules="[
+          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+          {
+            type: 'email',
+            message: '请输入正确的邮箱地址',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <el-input v-model="dynamicValidateForm.email"></el-input>
+      </el-form-item>
+      <el-form-item
+        v-for="(domain, index) in dynamicValidateForm.domains"
+        :label="'域名' + index"
+        :key="domain.key"
+        :prop="'domains.' + index + '.value'"
+        :rules="{
+          required: true,
+          message: '域名不能为空',
+          trigger: 'blur',
+        }"
+      >
+        <el-input v-model="domain.value"></el-input
+        ><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('dynamicValidateForm')"
+          >提交</el-button
+        >
+        <el-button @click="addDomain">新增域名</el-button>
+        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name:"vase2",
+  data() {
+    return {
+      dynamicValidateForm: {
+        domains: [
+          {
+            value: "",
+          },
+        ],
+        email: "",
+      },
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item);
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1);
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: "",
+        key: Date.now(),
+      });
+    },
+  },
+};
+</script>
+
+<style></style>

vue2.0/vue高阶/project1.0/src/router/index.js

@@ -21,7 +21,17 @@ const routes = [
     path:'/home',
     name:"home",
     // component 组件
-    component: Home
+    component: Home,
+    children:[
+      {
+        path:'vase1',
+        component:()=>import('../components/vase1.vue')
+      },
+      {
+        path:'vase2',
+        component:()=>import('../components/vase2.vue')
+      }
+    ]
   },
   {
     // path 路径

vue2.0/vue高阶/project1.0/src/views/Detail.vue

@@ -3,14 +3,33 @@
     详情页
     <p>姓名:{{$route.params.name1}}</p>
     <p>年龄:{{$route.params.age1}}</p>
+    <!-- 编程式导航：方便使用路由 -->
+    
+  <el-button type="success" @click="goVase">前进</el-button>
+  <el-button type="info" @click="goBack">后退</el-button>
+  <el-button type="warning" @click="goOther">跳转1</el-button>
+  <el-button type="danger" @click="goList">跳转2</el-button>
   </div>
 </template>
 
 <script>
 export default {
     created(){
-        
-    console.log(this.$route.params)
+        console.log(this.$route.params)
+    },
+    methods:{
+        goList() {
+            this.$router.push("/list/demo2");
+        },
+        goOther() {
+            this.$router.go(-1)
+        },
+        goVase() {
+            this.$router.forward()
+        },
+        goBack() {
+            this.$router.back()
+        }
     }
 }
 </script>

vue2.0/vue高阶/project1.0/src/views/Home.vue

@@ -1,15 +1,29 @@
 <template>
   <div class="home">
     这是首页
+    <button @click="$router.back()">返回</button>
+    <br>
+    <br>
+    <el-button type="success" @click.stop="goMain">表单</el-button>
+    <el-button type="danger" @click="goSell">登录</el-button>
+    <keep-alive :include="['vase1','vase2']">
+     <router-view></router-view>
+    </keep-alive>
   </div>
 </template>
 
 <script>
 export default {
-    name:"Home"
-}
+  name: "Home",
+  methods:{
+    goMain() {
+        this.$router.push("/home/vase1")
+    },
+    goSell() {
+        this.$router.push("/home/vase2")
+    }
+  }
+};
 </script>
 
-<style>
-
-</style>
+<style></style>