1. 自定义指令

1.1 使用方法

在vue框架中除了它自带的指令（比如v-html v-text v-model v-if v-show等等）以外，还可以自己设计指令，通过自己设定的指令，来完成我们想要的功能。接下来就是一个v-jcm的自定义指令，用来实现更改字体颜色的功能。contenteditable是ES6提供的可编辑属性，默认为false，在页面中不可以输入，也就是不能编辑。

<div id="app">
    <div contenteditable="true" v-jcm="msg"></div>
</div>

directives: {
//在这里注册自定义指令
   jcm: {
         // data.value是上面v-jcm="msg"传进来的msg
         mounted(el, data) {
             el.innerHTML = `<font color="red">${data.value}</font>`
         }
    }
}

如果没有设置这个自定义指令，div就没有内容。当设置了该指令时，在注册的时候设置了它将div的innerHTML设置成了红色字体的'hello'。需要通过挂载mounted来实现，其中的el表示使用该自定义指令的元素，data为v-jcm等号后面传进来的值。

接下来展示一个将元素背景色更改的自定义指令——v-bgc

        <div v-bgc="a">red</div>
        <div v-bgc="b">blue</div>

directives: {
    bgc:{
        mounted(el,data){
            el.style.backgroundColor = data.value;
         }
     }
}

总结：自定义指令

directives中注册(对象) ==> 挂载（mounted(el,data){ 操作代码}）==> 元素中使用

1.2 实际案例

实现的功能：自定义指令v-vip，是vip的盒子，右上角显示一个vip标识图。

// 样式，采用伪元素来放置vip图标
    <style>
        .box {
            width: 200px;
            height: 300px;
            background-color: aquamarine;
            border-radius: 10px;
        }
        .vip {
            position: relative;
        }
        .vip::after {
            content: "";
            position: absolute;
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(./img/vip.png);
            /* 背景图片在盒子里平铺 */
            background-size: cover;
            right: 10px;
            top: 10px;
        }
    </style>

vue模板中代码：使用了v-if/v-else来进行判断，如果是vip就执行v-vip指令。其中arr是app数据源中的arr数组：

arr: [ { id: 1, title: '标题一', count: 1, vip: true },

{ id: 2, title: '标题二', count: 5, vip: false },

{ id: 3, title: '标题三', count: 2, vip: true }]

        <template v-for="el in arr">
            <div v-if="el.vip" v-vip :key="el.id" class="box">
                <h1>{{el.title}}</h1>
                <p>数量：{{el.count}}</p>
            </div>
            <div v-else :key="el.id" class="box">
                <h1>{{el.title}}</h1>
                <p>数量：{{el.count}}</p>
            </div>
        </template>

自定义指令代码：vip成员添加vip类名，通过类名来操作样式

directives: {
           vip: {
              mounted(el) {
                  el.classList.add('vip');
              }
          }
      },

结果：

1.3 全局指令和局部指令

全局：所有元素（包括组件）都可以使用。语法：app.directive("vip",{钩子函数}）

局部：只在当前组件的模板可以使用。语法：directives:{vip:{钩子},hqyj:{钩子}}

2. 组件对象

2.1 组件基础

组件是可复用的 Vue 实例，主要用于开发中，将具有相同特征但数据不同模块集为一个组件，减少代码的重复。需要把每一个组件写成一个文件，这样方便整理代码，代码逻辑、结构更加清晰。

一个组件在使用前需要先注册：在app对象中的components中注册（对象形式），其中需要使用template对象来作为组件的使用模板。具体结构如下：

components:{
        组件名:{
              template:"模板内容"
            }
  }

2.2 组件对象

引入组件的js文件在模板中使用组件步骤：script标签中引入（Vue框架的创建前）==>模板对象的components中注册==>模板中使用，案例如下：

<script type="module">
        import mynav from "./mynav.js";
        import mygoodsbox from "./mygoodsbox.js";
        import myfooter from "./myfooter.js";
        const app = {
            components: {
                mynav,
                mygoodsbox,
                myfooter,
            },
          };
        Vue.createApp(app).mount('#app');
</script>

使用：

<div id="app">
    <div class="top_bar">
        <mynav></mynav>
    </div>
    <div class="content">
        <mygoodsbox></mygoodsbox>
    </div>
    <div class="footer">
        <myfooter></myfooter>
    </div>
</div>

下面给出其中一个组件的js文件（myfooter.js）作为参考，需要注意，引入的js文件中必须有template模板。

let myfooter = {
  template: `<div>尾部</div>`,
};
export default myfooter;

2.3 组件的属性——props

1. 声明属性：props:["属性名"]

简单使用：组件可以添加属性，当父组件结构相同，只有数据不同时，可以通过组件的属性来传不同的数据

        <box title="hello"></box>

components: {
    box: {
       data() { return {} },
       // 组件属性 是个数组 由上面<box title="hello"></box>传进来的 
       props: ["title"],
       // 当前组件的模板
       template: `<div>
                     <h3>box组件</h3>
                     <h3>{{title}}</h3>
                  </div>`
      }
}