Vue学习日记 Day4

 一、自定义指令

1、概念：自己定义的指令，可以封装一些dom操作，扩展额外功能

2、语法：

1、全局注册
    Vue.directive('指令名',{
        "inserted" (el){
            el.focus()        
        }    
    })
2、局部注册
    directives:{
        "指令名":{
            inserted(el){
            //inserted会在元素被添加到页面中的时候触发
                el.focus()            
            }        
        }            
    }
3、使用
    v-指令名

3、自定义指令——指令的值

3.1、语法：在绑定指令时，可以通过 = 为指令绑定具体的参数值(注：传入的值最好是变量)

3.2、获取：

1、inserted(el, binding){

    el.style.color = binding.value

}

4、自定义属性——参数

1、inserted：在元素添加到页面中时触发

2、update：在指令的值变化时触发

5、自定义属性——v-loading指令封装

5.1、实际开发中，发送需要时间，当数据未回来时，页面会处于空白状态，用户体验不好

5.2、需求：封装一个v-loading指令，实现加载中的效果

二、插槽

1、作用：让组件内部的一些结构支持自定义

2、语法：

1、当组件内有需要定制的结构部分时，改用<slot></slot>占位
2、使用组件时，在标签内部，传入结构替换slot

如：
    //子组件
      <div>
        <h3>tql</h3>
        <span>你的名字是</span>
        <slot></slot>
      </div>    
    //父组件
     <template>
       <SonOne>饶欣</SonOne>
       //饶欣会被插入插槽中
     </template>

 

3、后备内容（默认值）

1、在slot中写入内容，便是默认值
如：
    <slot>吕乐诚<slot>

4、具名插槽

1、需求：一个组件内有多处结构，需要外部传入标签，进行定制
2、语法：
        定义时为多个slot使用name属性区分
            <slot name="head"></slot>
            <slot name="conteny"></slot>
        使用时放在template中，配合v-slot:名字来分发对应标签
        <template v-slot:head></template>
            //也可以简写
        <template #head></template>

5、作用域插槽

5.1、本质上是一个传参的语法

5.2、定义：在定义插槽时，是可以传值的，给插槽上绑定数据，将来使用组件时可以用。

5.3、使用步骤：

1、给slot标签，以添加属性的方式传值

    <slot :id="item.id" msg="测试文本"></slot>

    //所有属性，都会被收集到一个对象中

2、在template中，通过`#插槽名="obj"`接收，默认插槽名为default

    <MyTable :list="list">

        <template #default="obj">

            <button @click="del(obj.id)">删除</button>

        </template>

三、路由

1、单页应用程序（SPA）

(1)概念：所有功能在一个html页面上实现

(2)路由：路径和组件的映射关系

2、VueRouter

(1)作用：修改地址栏路径时，切换显示匹配的组件

(2)使用(5+2)：

1、5个基本步骤

    1、下载：下载VueRouter模块到当前工程，版本3.6.5

            yarn add vue-router@3.6.5

    2、引入：

            import VueRouter from 'vue-router'

    3、安装注册：

            Vue.use(VueRouter)

    4、创建路由对象：

            const router = new VueRouter()

    5、注入，将路由对象注入到new Vue实例中，建立关联

            new Vue({

                render: h => h(App),

                router            

            }).$mount('#app')

2、2个核心步骤

    1、创建需要的组件(views目录)，配置路由规则

        Find.vue My.vue Friend.vue

        

        import Find from './views/Find.vue'

        import My from './views/My'

        import Friend from './views/Friend'

        

        const router = new VueRouter({

            //这里面就是路由规则

          routes:[

            { path:'/find', component:Find},

            { path:'/My', component:My},

            { path:'/friend',component:Friend}

            //左边是地址栏路径，右边是组件

          ]

        })

    2、配置导航，配置路由出口(路径匹配的组件显示的位置)

        <div class="footer_wrap">

              <a href="#/find">发现音乐</a>

              <a href="#/my">我的音乐</a>

              <a href="#/friend">朋友</a>

        </div>        

    <div class="top">

      <router-view></router-view>

      //router-view就是组件显示的位置

    </div>

 

1、扩展：vue框架的规范化要求引入的组件名应该是语义性更强的多单词，若要消除此问题，可以在export default中添加name:'单词'

3、组件存放目录的问题：

(1)组件分类：

1、组件分为两类：页面组件 & 复用组件(但它们本质都是.vue文件，并无区别)

2、分目录的意义就是：更易维护

3、所以我们提出了规范化

    src/views：页面组件-页面展示-配合路由用

    src/components：复用组件-展示数据-常用于复用