第一篇在这里：Vue期末复习（一）—Vue开发基础_m0_48788975的博客-CSDN博客_vue期末考试
目录
导读：
本章着重在：
- Vue提供的全局API
- Vue实例对象中的常用属性
- 使用render渲染函数完成页面渲染的方法
- 通过全局对象配置Vue的方法
1.全局API
API（Application Programming Interface，应用程序编程接口：
构建自定义的指令、组件、插件，通过Vue实例属性完成更强大的功能等。
指令包括：
- 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工具可用。
有案例