Vue --第四天

1.自定义指令

a.自定义指令:

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

全局注册：

局部注册：

指令值：自定义指令

v-loading：

本质：

插槽：

1.定制插槽

2.插槽作用

组件封装：涵盖了以上所有的知识点

1.失去焦点  ： @blur="  判定条件  "

2.得到当前动作的值： e.target.value

代码：在插槽拼接

路由：

使用步骤：（5+2）

实现：

这里很奇怪，为什么组件要有如下配置

使用总结：

路由和组件分类：

代码：

import Vue from 'vue'

import App from './App.vue'

// 路由的使用步骤 5 + 2

// 5个基础步骤

// 1. 下载 v3.6.5

// 2. 引入

// 3. 安装注册 Vue.use(Vue插件)

// 4. 创建路由对象

// 5. 注入到new Vue中，建立关联

// 2个核心步骤

// 1. 建组件(views目录)，配规则

// 2. 准备导航链接，配置路由出口(匹配的组件展示的位置)

import Find from './views/Find'

import My from './views/My'

import Friend from './views/Friend'

import VueRouter from 'vue-router'

Vue.use(VueRouter) // VueRouter插件初始化

 

const router = new VueRouter({

  // routes 路由规则们

  // route  一条路由规则 { path: 路径, component: 组件 }

  routes: [

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

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

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

  ]

})

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

  router:router,

}).$mount('#app')

<template>

  <div>

    <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>

  </div>

</template>

<script>

export default {};

</script>

<template>

  <div>

    <p>我的音乐</p>

    <p>我的音乐</p>

    <p>我的音乐</p>

    <p>我的音乐</p>

  </div>

</template>

<script>

export default {

  name: 'MyMusic'

}

</script>