2021-06-17 VUE全面总结【基础篇】（第一次整理）（二）

methods: {
    btn() {
        this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
        console.log(this.$refs.a.innerHTML); // 0
        this.$nextTick(() => {
            console.log("DOM更新后触发$nextTick函数");
            console.log(this.$refs.a.innerHTML); // 1
        })
    },

methods: {
    async searchFn(){
        this.isShow = true
        await this.$nextTick()
        this.$refs.inp.focus()
    }
}

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>
    <p>下面显示注册组件:</p>
    <div style="border: 1px solid red">
      <!-- vue内置的组件component, 可以动态显示组件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>
<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

写法一：
<div class="container" v-show="isShow">
    <slot name="one"></slot>
    <slot name="two"></slot>
</div>

写法2：
<Pannel2>
    <!-- 简化写法 -->
    <template #one>
    <div>
            <p>寒雨连江夜入吴,</p>
            <p>平明送客楚山孤。</p>
            <p>洛阳亲友如相问，</p>
            <p>一片冰心在玉壶。</p>
        </div>
    </template>
    <template #two>
    <img src="../assets/mm.gif" alt="" />
    </template>
</Pannel2>

<Pannel3>
      <template v-slot:one="scope">
        {{ scope.row.default2 }}
      </template>
    </Pannel3>

<template>
  <div>
    <p>这里是个Pannel3-子组件, 下面是插槽位置</p>
    <slot name="one" :row="slotDefault">{{ slotDefault.default1 }}</slot>
  </div>
</template>
<script>
export default {
  data(){
    return {
      slotDefault: {
        default1: "无名氏",
        default2: "孙红雷"
      }
    }
  }
}
</script>

Vue.directive("fofo", {
  inserted(el){
    el.focus()
  }
})

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>
<script>
export default {
  // 局部注册
  directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    },
  },
};
</script>

Vue.directive("color", {
  inserted(el, binding){ // 插入时触发此函数
    el.style.color = binding.value;
  },
  update(el, binding){ // 更新绑定的变量时触发此函数=》手动更新
    el.style.color = binding.value;
  }
})

 const routes = [
{path:'/',
component:XXX
}]             

const router = new VueRouter({
  routes
})

new Vue({
  router
})

import NotFound from "@/components/NotFound";
const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  },
  // ...正常路由
  { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
  }
]

写法1：
this.$router.push({
    path: "路由路径?参数名=值",
})

写法2：
this.$router.push({
    path: "路由路径",
    query: {
        "参数名":值
    }
})

this.$router.push({
    path: "路由路径/参数"
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
  // to代表要跳转到哪个路径去, to的值是个对象可以打印看到
  // from代表从哪个路径跳过去
  console.log(to);
  console.log(from);
  // fullPath带?后面参数的, path是完整的路径
  console.log("路由要跳转了");
  // 模拟判断登录了没有, 登录后才能去我的音乐
  let loginFlag = false; // 假设false代表未登录
  if (to.path == "/my" && loginFlag == false) {
    // 如果去个人中心页面, 判断未登录, 提示登录(并强制跳转回find)
    alert("请先登录！");
    next("/find");
  } else {
    // 如果不去/my页面就直接跳转
    next();
  }
});