指令包括：

Vue.directive：用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性。
Vue.use：用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。它有一个options参数，表示包含组件选项的对象。
Vue.extend
Vue.set：用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
Vue.mixin：用于全局注册一个混入，它将影响之后创建的每个Vue实例。在插件中向组件注入自定义的行为，可以用来为自定义选项注入处理逻辑。

下面来逐一讲解以下这些API指令：

Vue.directive

说明：用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性。

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

（复习：v-model 双向数据绑定 v-show 控制元素的显示和隐藏）

用法：

模板：
Vue.directive( id, [definition] )
参数：

{string} id
{Function | Object} [definition]
用法：

注册或获取全局指令。


举例：
// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在即可)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含多个 property。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

v-directive的实例应用：

<div id="app">
  <input type="text" v-focus="true">
</div>

<script>
Vue.directive('focus', {
  inserted (el, binding) {    #inserted：被绑定元素插入父节点时调用
    if (binding.value) {    #binding：指令的相关信息
      el.focus()           #el：自定义指令的元素，input；
    }
  }
})
var vm = new Vue({ el: '#app' })
</script>

Vue.use

说明：用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。它有一个options参数，表示包含组件选项的对象。

Vue.use的实例应用1：

<div id="app1">app1: {{title}}</div>
<div id="app2">app2: {{title}}</div>

<script>
var Vue2 = Vue.extend({
  data () {     #data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
    return {
      title: 'hello‘
    }
  }
})
var vm1 = new Vue({ el: '#app1' })
var vm2 = new Vue2({ el: '#app2' })
</script>

Vue.use的实例应用2：插件：

在Vue中安装插件。插件如果是对象，必须提供install()方法，用来安装插件；如果是一个函数，则该函数将被当成install()方法。当 install 方法被同一个插件多次调用，插件将只会被安装一次。

#定义插件
<script>
// 定义一个MyPlugin（自定义插件）对象
let MyPlugin = {}

// 编写插件对象的install方法
MyPlugin.install = function (Vue, options) {
  console.log(options)
  // 在插件中为Vue添加自定义指令
  Vue.directive('my-directive', {
    bind (el, binding) {
      // 为自定义指令v-my-directive绑定的DOM元素设置style样式
      el.style = 'width:100px;height:100px;background-color:#ccc;'
    }
  })
}

#使用插件
Vue.use(MyPlugin, { someOption: true }
</script>

Vue.extend

用法：

Vue.component( id, [definition] )
参数：
{string} id
{Function | Object} [definition]
用法：
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
参考：组件

Vue.extend的实例应用：

例3-3-1
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
结果如下：
<p>Walter White aka Heisenberg</p>

Vue.set

说明：用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。

用法：

格式：Vue.set( target, propertyName/index, value )
参数：
{Object | Array} target，目标对象；
{string | number} propertyName/index，属性名；
{any} value，属性值
返回值：设置的值。

注意：Vue 不允许动态添加根级别的响应式 property，所以你必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值。

Vue.set的实例应用：

#页面结构
<div id="app">
  <div>{{a}}</div>
  <div>{{obj.b}}</div>
</div>

#创建vm对象动态设置属性b
<script>
var vm = new Vue({
  el: '#app',
  data: {
    a: '我是根级响应式属性a',
    obj: {}
  }
})
Vue.set(vm.obj, 'b', '我是Vue.set添加的响应式属性obj.b'
</script>

#不会响应：vm.obj.c = '我是直接添加的c属性'
用法错误：Vue.set(vm, 'b', '我是Vue.set添加的响应式属性obj.b')

Vue.mixin（全局混入）

说明：用于全局注册一个混入，它将影响之后创建的每个Vue实例。慎用！

在插件中向组件注入自定义的行为，可以用来为自定义选项注入处理逻辑。

Vue.mixin的实例应用：

<div id="app"></div>
<script>
var vm = new Vue({
  myOption: 'hello vue!'    #myOption是一个自定义属性。
  Vue.mixin({
    created () {
      var myOption = this.$options.myOption
      if (myOption) {
        console.log(myOption.toUpperCase())
      }
    }
  })
 
})
</script>

2.实例属性

实例属性是指Vue实例对象的属性。

实例属性包括：

vm.$data，获取vm实例中的数据对象；
vm.$props，接收父组件传输的数据；
vm.$options，创建自定义选项。
vm.$el，用来访问vm实例使用的根DOM元素
vm.$children，用来获取当前实例的直接子组件，其并不保证顺序，也不是响应式的。
vm.$root，用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。
vm.$slots，可以通过$slots动态获取定义在组件内部的template模板。为了方便使用template公共模板结构
vm.$attrs，可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。

vm.$props

$props：使用vm.$props属性可以接收上级组件向下传递的数据。

vm.$options

$options：Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取。

$options的实例应用：

#定义根标签：
<div id="app">
  <p>{{base}}</p>
  <p>{{noBase}}</p>
</div>

#创建vm实例
<script>
var vm = new Vue({
  el: '#app',
  data: {
    base: '我是基础数据' 
  },
  customOption: '我是自定义数据',
  created () {
    this.noBase = this.$options.customOption
  }

})
</script>

vm.$el

$el：用来访问vm实例使用的根DOM元素

$el的实例应用：

<div id="app">
  <p>我是根标签结构</p>
</div>

<script>
var vm = new Vue({
  el: '#app'
})
vm.$el.innerHTML = '<div>我是替换后的div标签</div>'
</script>

vm.$children

$children：用来获取当前实例的直接子组件，其并不保证顺序，也不是响应式的。

$children的实例应用：

<div id="app">
  <button @click="child">查看子组件</button>
  <my-component></my-component>
</div>

<script>
#定义子组件
Vue.component('my-component', {
  template: '<div>myComponent</div>'}
)
#获取子组件
var vm = new Vue({
  el: '#app',
  methods: {
    child () {
      console.log(this.$children)
    }
  }
})
</script>

vm.$root

$root：用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。

$root的实例应用：

  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      template: '<button @click="root">查看根实例</button>',
      methods: {
        root () {
          console.log(this.$root)
          console.log(this.$root === vm.$root)
        }
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

$root与$el区别？

$root组件树的根实例，

$el：vm实例的根DOM元素

vm.$slots

$slots：Vue的组件使用template模板定义HTML结构，为了方便使用template公共模板结构，Vue提出了插槽（Slots）的概念。

可以通过$slots动态获取定义在组件内部的template模板。

$slots的实例应用：

  <div id="app">
    <my-component>你好</my-component>
  </div>

  <template id="first">
    <div>
      <slot></slot>      #slot占位作用
    </div>                
  </template>
  
  <script>
    Vue.component('my-component', { template: '#first' })
    var vm = new Vue({ el: '#app' })
  </script>

#vm.$children[0].$slots.default[0].text
vm第1个子组件中的所有插槽中的默认插槽中第1个节点的内容
default获取默认插槽

<slot> 元素作为组件模板之中的内容分发插槽。

<slot> 元素自身将被替换。

vm.$slots访问被插槽分发的内容。具名插槽，例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到；未具名的插槽，采用vm.$slots.default 。

vm.$attrs

$attrs：可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。

$attrs的实例应用：

  <div id="app">
    <my-component id="test"></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      template: '<button @click="showAttrs">查看属性</button>',
      methods: {
        showAttrs () {
          console.log(this.$attrs)
        }
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

3.render渲染

  <div id="app">
    <my-component>成功渲染</my-component>
  </div>
  <script>
    Vue.component('my-component', {
      render (createElement) {
        return createElement('p', {
          style: {
            color: 'red',
            fontSize: '16px',
            backgroundColor: '#eee'
          }
        }, this.$slots.default)
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

createElement

<div id="app">
    <my-component>
      <template v-slot:header>
        <div style="background-color:#ccc;height:50px">
          这里是导航栏
        </div>
      </template>
      <template v-slot:content>
        <div style="background-color:#ddd;height:50px">
          这里是内容区域
        </div>
      </template>
      <template v-slot:footer>
        <div style="background-color:#eee;height:50px">
          这里是底部信息
        </div>
      </template>
    </my-component>
  </div>
  <script>
    Vue.component('my-component', {
      render (createElement) {
        return createElement('div', [
          createElement('header', this.$slots.header),
          createElement('content', this.$slots.content),
          createElement('footer', this.$slots.footer)
        ])
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

4.全局配置

Vue提供了全局配置对象Vue.config，通过配置可以实现生产信息提示、警告忽略等人性化处理。

全局配置包括：

Vue.config.productionTip，打开或关闭生产信息提示信息，默认为打开状态。
Vue.config.silent，silent可以取消Vue日志和警告，silent默认值为false，开启警告功能。
Vue.config.devtools：表示打开或关闭vue-devtools调试工具，默认值为true，表示vue-devtools工具可用。

productionTip

Vue.config.productionTip：打开或关闭生产信息提示信息，默认为打开状态。

silent

Vue.config.silent：silent可以取消Vue日志和警告，silent默认值为false，开启警告功能。

silent的值设置为true，可以取消Vue日志和警告。

<script>
Vue.config.silent = true
var vm = new Vue({ 
  el: '#app'
 })
</script>

devtools

Vue.config.devtools：表示打开或关闭vue-devtools调试工具，默认值为true，表示vue-devtools工具可用。

有案例

标签：el,Vue,复习,component,vm,实例,期末,组件
来源： https://blog.csdn.net/m0_48788975/article/details/122247991

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue期末复习（二）—Vue开发基础

导读：

1.全局API

指令包括：

Vue.directive

v-directive的实例应用：

Vue.use

Vue.use的实例应用1：

Vue.use的实例应用2：插件：

Vue.extend

Vue.extend的实例应用：

Vue.set

Vue.set的实例应用：

Vue.mixin（全局混入）

Vue.mixin的实例应用：

2.实例属性

实例属性包括：

vm.$props

vm.$options

$options的实例应用：

vm.$el

$el的实例应用：

vm.$children

$children的实例应用：

vm.$root

$root的实例应用：

$root与$el区别？

vm.$slots

vm.$attrs

3.render渲染

createElement

4.全局配置

全局配置包括：

productionTip

silent

devtools