vue-router, vue组件以及自定义指令的使用

目录

vue-router路由的使用

vue组件的使用

 自定义指令

---

vue-router路由的使用

• 安装

yarn add vue-router

• 导入路由 router/index.js

import VueRouter from 'vue-router'

• 使用路由插件(注册)  router/index.js

// 在vue中，使用使用vue的插件，都需要调用Vue.use()
// 注册全局组件
Vue.use(VueRouter)

• 创建路由规则数组 router/index.js

const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]

• 创建路由对象 - 传入规则 router/index.js

const router = new VueRouter({
  routes
})

• 关联到vue实例 main.js

new Vue({
  router
})

• 使用 ==== 将 components 换成 router-view 

<router-view></router-view>

vue组件的使用

• 创建组件 components/Pannel.vue

封装标签+样式+js - 组件都是独立的, 为了复用

<template>
  <div>
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <div class="container" v-show="isShow">
      <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}
.title h4 {
  line-height: 2;
  margin: 0;
}
.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}
.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}
</style>

• 注册组件: 创建后需要注册后再使用

1.  全局注册

全局入口在main.js, 在new Vue之上注册

语法:

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

 main.js - 立即演示

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel'
// 3. 全局 - 注册组件
/*
  语法: 
  Vue.component("组件名", 组件对象)
*/
Vue.component("PannelG", Pannel)

 全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template里用

使用:

<PannelG></PannelG>   // 方式一
<PannelG/>            // 方式二
<pannel-g></pannel-g> // 方式三

1. 局部注册

语法:

import 组件对象 from 'vue文件路径'
// @符号==== src这个目录

export default {
    components: {
        "组件名": 组件对象
    }
}

任意vue文件中中引入, 注册, 使用

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <!-- 4. 组件名当做标签使用 -->
    <!-- <组件名></组件名> -->
    <PannelG></PannelG>
    <PannelL></PannelL>
  </div>
</template>

<script>
// 目标: 局部注册 (用的多)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel_1'
export default {
  // 3. 局部 - 注册组件
  /*
    语法: 
    components: {
      "组件名": 组件对象
    }
  */
  components: {
    PannelL: Pannel
  }
}
</script>

 自定义指令

下面我们注册一个全局指令 v-focus---功能是:在页面加载时，元素获得焦点

1.使用自定义指令

<!-- 使用自定义指令 -->
    <input v-focus type="text">

2.全局注册

// 全局注册自定义指令
Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

 3.局部注册

directives: {
    focus: {
      inserted: function(el) {
        el.focus()
      }
    }
  }

效果:===打开页面时,input框获得焦点