vue学习61-75

自定义指令-基础语法p61

自定义指令：自己定义的指令，可以封装一些dom操作，拓展额外功能

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 1.全局注册定义
Vue.directive('focus',{
  //inserted会在指令所在的元素，被插入到页面中时触发
  inserted(el){
    //el就是指令所绑定的元素
    el.focus()
  }
})
new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div class="app">
    <BaseSelect ></BaseSelect>
    <input v-focus ref="inp" type="text">
  </div>
</template>

<script>
import BaseSelect from "./components/BaseSelect.vue";
export default {
  directives:{
    // 2.局部注册定义
    focus:{

    }
  },
  methods:{
   
  },
  components: {
    BaseSelect,
  },
};
</script>

<style>
</style>

自定义指令-指令的值

• 语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
• 通过binding.value可以拿到指令值，指令值修改会触发update函数

<template>
  <div v-color="color1">wdf</div>
</template>

<script>
export default {
  data() {
    return {
      color1: "red",
    };
  },
  directives: {
    color: {
      // 1.inserted提供的是元素被添加到页面中时的逻辑
      inserted(el, binding) {
        // binding.value就是指令
        el.style.color = binding.value;
      },
      // 2.update指令的值修改的时候触发，提供值变化时，dom更新的逻辑
      updata(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
};
</script>

<style>
</style>

自定义指令-v-loading指令封装p63

场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态-用户体验不好
需求：封装一个v-loading指令，实现加载中的效果

插槽-默认插槽p64

作用:让组件内部的一些结构支持自定义
需求：要在页面中显示一个对话框，封装成一个组件
插槽基本语法：

1. 组件内需要定制的结构部分，改用占位
2. 使用组件时，组件标签内填入内容，传入结构替换slot

插槽-后备内容（默认值）p65

语法：slot标签里放置内容，作为默认显示内容
（外部不传默认显示，外部传了就替换默认）

插槽-具名插槽p66

需求：有多处结构需要定制插槽
语法：

1. slot加个name属性
2. template配合v-slot对应标签

v-slot：xx和slot的name的值对应

插槽-作用域插槽p67

作用域插槽是插槽的一个传参语法，定义slot插槽的同时可以传值，给插槽绑定数据

通过tamplate #插槽名=“变量名”接收，（obj接收的是一整个对象）

单页应用程序和路由介绍p72

单页面应用（spa）：所有应用在一个html页面上实现

单页面应用优缺点

• 优点：按需更新性能高，开发效率搞，用户体验好（页面按需更新：明确访问路线和组件的对应关系-路由）
• 缺点：学习成本，首屏加载慢，不利于SEO
  应用场景：系统类/内部/文档类/移动端网页或站点

路由

vue中的路由是路径和组件的映射关系
根据路由能知道不同路径的，应该匹配渲染哪个组件

路由的基本使用p73

VueRouter的介绍

是Vue官方的一个路由
作用：修改地址栏路径时，切换显示匹配的组件

2个核心步骤

1. 创建需要的组件（views目录），配置路由规则

• Find.vue
• My.vue
• Friend.vue

2. 配置导航，配置路由出口（路径path匹配的组件component显示的位置）

<template>
  <div>
    <a href="#/sb"></a>
    <div>
        <!-- 路由出口-匹配组件所展示的位置，可以改到上下 -->
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

import Vue from 'vue'
import App from './App.vue'

import Sb from './views/Sb'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//vuerouter插件初始化

const router = new VueRouter({
  //routes路由规则们
  routes:{
    path:'/sb',component:Sb
  }
})//创建路由对象
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router//这样可以简写成router
}).$mount('#app')

要求多个单词可以改name

export default {
    name:'WhatSb'
}

组件存放分类问题（组件分类）p74

.vue文件分2类：页面组件&复用组件

• 页面组件-views文件夹-配合路由，页面展示
• 复用组件-components文件夹-封装复用