【前端Vue学习系列】三、Vue进阶篇

系列文章目录

---

---

前言

Hi，大家好，我是希留。

上篇文章带大家了解了Vue的一些基础用法，仅仅掌握一些基础的用法是不够的，还需要有更深入的了解，所以今天的文章咱们来聊聊Vue的进阶篇，废话不多说，开始燥起来！

---

一、组件

组件（Component）是 Vue.js 最强大的功能之一。它可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

在注册一个组件的时候，我们始终需要给它一个名字。而定义组件名的方式有两种：kebab-case(短横线分隔命名)和PascalCase(首字母大写命名)

当使用短横线分隔命名定义一个组件时，例如：‘my-component-name’，则必须在引用这个自定义元素时使用短横线分隔，例如 。当使用首字母大写命名定义一个组件时，例如：‘MyComponentName’，你在引用这个自定义元素时两种命名法都可以使用。即 和 都是可接受的。

1. 局部组件

使用局部注册的组件就叫局部组件，示例如下（代码接上篇例子，如有需要，可私信我）

<template>
  <div class="hello">
    ...
		<!--使用组件-->
    <Navbar></Navbar>
  </div>
</template>

<script>
export default {
   
  name: 'HelloWorld',
    //定义局部组件，这里可以定义多个局部组件
  components: {
   
    //组件的名字
    'Navbar': {
   
      //组件的内容
      template: '<ul><li>首页</li><li>学员管理</li></ul>'
    }
  },
  ...
}
</script>

可看到页面已渲染出数据，说明组件注册成功。

2. 全局组件

使用Vue.component创建的组件就叫全局组件，它们在注册之后可以在任何新创建的 Vue 根实例 (new Vue) 的模板中使用。

Vue.component('component-a', {
    /* ... */ })
Vue.component('component-b', {
    /* ... */ })
Vue.component('component-c', {
    /* ... */ })

new Vue({
    el: '#app' })
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

二、自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。也分为全局注册和局部注册；

示例代码如下：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
   
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
   
    // 聚焦元素
    el.focus()
  }
})

<template>
  <div class="hello">
    ...
		<input v-focus />
  </div>
</template>

<script>
export default {
   
  name: 'HelloWorld',
   // 注册局部自定义指令
  directives: {
   
    focus: {
   
      // 指令的定义
      inserted: function