全局定义

语法：Vue.directive('指令名'，{
inserted (el) {
指令执行代码
}
})

  • 全局在main.js内注册
  • el参数是使用指令的元素DOM对象
  • 定义指令名不要带v-，使用指令的时候带上v-指令名
    1. Vue.directive('color', {
    2. inserted (el) {
    3.   console.log(el)
    4.   el.style.color = 'rgb(255,0,0)'
    5. }
    6. })
    ```vue 

  1. <a name="FmjwC"></a>
  2. ## 局部定义
  3. `directives:{`<br />`指令名:{`<br />`inserted (el,bind) {`<br />`指令执行代码`<br />`}`<br />`}`<br />`}`
  5. - 局部注册，directive跟data同级
  6. - el参数是使用指令的元素DOM对象
  7. - bind参数 可以获取指令绑定data变量的值
  8. - 定义指令名不要带`v-`，使用指令的时候带上`v-指令名`
  9. - `v-指令名="data变量"`可以绑定data变量
  10. ```vue
  11. <template>
  12.   <div>
  13.     <!-- <h1 v-color>自定义指令</h1> -->
  14.     <h2 v-border="color">局部定义</h2>
  15.   </div>
  16. </template>
  18. <script>
  19. export default {
  20.   data () {
  21.     return {
  22.       color: 'red'
  23.     }
  24.   },
  25.   directives: {
  26.     border: {
  27.       // 元素挂在（只会执行一次）
  28.       inserted (el, bind) {
  29.         console.log(el, bind)
  30.         el.style.border = `5px solid ${bind.value}`
  31.       },
  32.       // 绑定的data变量变化了会执行（多次）
  33.       update (el, bind) {
  34.         el.style.border = `5px solid ${bind.value}`
  35.       }
  36.     }
  37.   }
  38. }
  40. </script>
  42. <style scoped>
  43. </style>

原型链方法

语法：Vue.prototype.属性 = 值

  • 挂载到vue构造函数prototype上
  • 所有的vue文件都是vue函数的实例都可以使用
  • 可以通过this.调用
    1. import axios from 'axios'
    2. import Vue from 'vue'
    3. axios.defaults.baseURL = "https://applet-base-api-t.itheima.net"
    4. Vue.prototype.request = axios