1.Vue.extend(options)
构造器，创建一个 子类 。参数是一个包含组件选项的对象
data 选项是特例，需要注意 在 Vue.extend() 中它必须是一个函数，
<div id="test"></div>
// 创建构造器
let MyTest = Vue.extend({
template: '<p>{{name}} {{age}}</p>',
data(){
return {
name: 'zhangning',
age: '24'
}
}
})
创建 MyTest 实例，并挂载到一个元素上
new MyTest().$mount('#test')
最终结果如下
<p>zhangning 24</p>
上面 extend 创建的是 Vue 构造器，而不是一个具体的组件实例，所以不能够通过 new Vue({components: testExtend}) 来直接使用，需要通过 new MyTest().$mount('#test') 来挂载到指定的元素上
*调用 Vue.extend() 创建的是一个组件构造器
*通常在创建组件构造器时，传入 template 代表我们自定义组件的模板
*该模板就是在使用到组件的地方，要显示的 HTML 代码
*但是，这种写法在vue2之后几乎就不再使用了，都是直接使用语法糖，不过我们还是要学习的，为后面的学习打下基础
现在我们通常不使用 Vue.extend() 来注册组件了，使用语法糖的写法，直接把对象放在 Vue.component() 来注册组件，可以看第 7 个API进行学习
调用Vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名字
所以需要传递两个参数：1.注册组件的标签名 2.组件构造器
组件必须挂在在某个Vue实例下，否则不会生效
示例：封装一个全局提示组件
首先创建一个 message.vue 组件
<template>
<transition>
<div v-show='show'>{{message}}</div>
</transition>
</template> <script>
export default{
data(){
return {
show: false,
message: ''
}
}
}
</script> <style scoped>
div {
padding: 10px;
color: #ddd;
background: red;
text-align: center;
position: fixed;
top: 30%;
left: 50%;
}
</style>
然后在 main.js 中配置
import Message from './components/Message.vue'
const MessageM = {
install: function(Vue) {
// 创建一个 vue 的子类组件
const MessageConstructor = Vue.extend(Message)
// 创建子类实例，并挂载到动态创建的元素上，并将元素添加到全局结构中
const inst = new MessageConstructor().$mount(document.createElement('div'))
document.body.appendChild(inst.$el)
// 在 vue 原型链上注册方法，控制组件
Vue.prototype.$message = (msg, time = 1000) => {
inst.message = msg
inst.show = true
setTimeout((
inst.show = false
), time)
}
}
}
Vue.use(MessageM)
在组件内使用
this.$message('消息提示')
以上就是一个简单的全局消息提示
2.Vue.nextTick
在写词DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM
<template>
<div>
<div ref='valRef'>{{ val }}</div>
<div>{{ val1 }}</div>
<div>{{ val2 }}</div>
<div>{{ val3 }}</div>
<el-button type="primary" @click.once='handleClick'>改变val</el-button>
</div>
</template> <script>
export default {
name: 'index',
data() {
return {
val: 'zhangning',
val1: '',
val2: '',
val3: ''
}
},
methods: {
// 点击按钮时，val1和val3获取的是初次加载时候的val的值，因为vue的DOM是异步加载，
// 而使用了nextTick的val2的值在msg改变之后，就立刻获取到了val更新之后的值
handleClick() {
this.val = '我已改变';
// DOM 未更新，获取不到最新的dom
this.val1 = this.$refs.valRef.innerHTML;
this.$nextTick(() => {
// DOM 已更新，获取最新的dom
this.val2 = this.$refs.valRef.innerHTML;
})
// DOM 未更新，获取不到最新的dom
this.val3 = this.refs.valRef.innerHTML;
}
}
}
</script>
官方给出的解释和例子（异步更新队列）
Vue 在更新 DOM 时是异步执行的。只要监听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然而在下一个的事件循环 tick 中，Vue 刷新队列并执行实际（已去重）工作。Vue 在内部对异步队列尝试使用原生的Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
例如，当设置 vm.someData = 'newVlaue'，该组件不会立即重新渲染，当刷新队列时，组件会在下一个事件循环 tick 中更新。多数情况我们不需要关心这个过程，但是如果想基于更新后的 DOM 状态做点什么，这就有点棘手。虽然Vue鼓励我们使用数据驱动的方式思考，避免直接接触 DOM ，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成之后被调用。例如
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue ，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的语法 async/await 完成相同的事情
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
3.Vue.set
Vue.set(target, key, value)
target：要更改的数据源（可以是对象或者数组）
key：要更改的具体数据
value：重新赋的值
由于 js 的限制，Vue 不能检测出数据的改变，但是通过这种方法修改数组中的数据，就会检测到数组的改变，是响应式的
用法：向响应式对象中添加一个 property， 并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property （比如 arr[1] = 110）
export default {
name: 'index',
data() {
return {
arr: [1,2,3]
}
},
methods: {
// 修改 arr[1] 变为 200
handleChange(){
this.$set(this.arr, 1, 200);// arr: [1, 200, 3]
},
// arr 数组添加元素 600
handleAddArr(){
this.$set(this.arr, this.arr.length, 600);
}
}
}
4.Vue.delete()
Vue.delete(target, key, value)
target：要删除的数据源（可以是对象或者数组）
key：要删除的具体数据
用法：删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，虽然很少使用，但直到要会用
export default {
name: 'index',
data() {
return {
zhangning: {
height: 187,
name: 'zhangning',
sex: '男'
}
}
},
methods: {
// 删除 name
handleDeleteName() {
this.$set(this.zhangning, 'name');
}
}
}
5.Vue.directive()
Vue.directive(string, Function | Object)
注册或获取全局指令
声明周期：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生改变，也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新（详细的钩子函数参数见下）
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用
钩子函数参数
el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀
value：指令的绑定值，例如：v-my-directive='1+1'中，绑定值为 2
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用，无论值是否改变都可用
expression：字符串形式的指令表达式。例如 v-my-directive='1+1' 中，表达式为 ‘1+1’
arg：传给指令的参数，可选。例如 v-my-directive: foo 中，参数为 'foo'
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 {foo: true, bar: true}
vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
页面展示效果如下
name: 'demo'
value: 'hello!'
expression: 'message'
argument: 'foo'
modifiers: {a: true, b: true}
vnode keys: tag,data,children,text,elm,ns,context...
动态指令参数，指令的参数可以是动态的，例如，在 v-mydirective:[argument]='value'中，argument 参数可以根据组件数据进行更新，这可以让我们的自定义指令灵活使用。
创建一个自定义指令，把元素固定在距离顶部 200px 的位置
<div id="test">
<p>Scroll down the page</p>
<p v-pin="200">距离顶部200px</p>
</div>
Vue.directive('pin', {
bind: function(el, binding, vnode){
el.style.position = 'fixed'
el.style.top = binding.value + 'px'
}
})
new Vue({
el: '#test'
})
当我们需要固定在左侧而不是顶部的时候，这时候我们就需要用到动态指令
<div id="test">
<p>Scroll down the page</p>
<p v-pin:[direction]="200">距离顶部200px</p>
</div>
Vue.directive('pin', {
bind: function(el, binding, vnode){
el.style.position = 'fixed'
let s = binding.arg == 'left' ? 'left' : 'top'
el.style[s] = binding.value + 'px'
}
})
new Vue({
el: '#test' ,
data(){
return {
direction: 'left'
}
}
})
以上这个自定义指令现在的灵活性就足以支持一些不同的用例了
函数简写
很多时候，我们想在 bind 和 update 时触发相同行为，而不关心其他的钩子。
Vue.directive('pin', function(el, binding){
el.style.top = binding.value + 'px'
})
如果指令需要多个值，可以传入 js 对象，指令函数能够接收所有合法的 js 表达式
<div v-demo="{ color: 'red', text: 'hello'}"></div>
Vue.directive('demo', function(el, binding){
console.log(binding.value.color) // red
console.log(binding.value.text) // hello
})
在项目中使用的案例
通过权限控制每个页面的按钮，
先定义一个 directive.js，写上全局指令
import Vue from 'vue';
import store from './store'; Vue.directive('permission', {
inserted: (el, binding) => {
if (store.getters.userButtons.length) {
const buttons = store.getters.userButtons;
if (buttons.indexOf(binding.value) < 0) el.parentNode.removeChild(el);
} else {
store.dispatch('getInfo').then(data => {
const { buttons } = data.buttons;
if (buttons.indexOf(binding.value) < 0) el.parentNode.removeChild(el);
});
}
}
});
在 main.js 中全局引入
import './directive.js'
在 vue 组件中使用，判断有没有下载按钮权限
<el-button
round
icon="el-icon-document"
type="primary"
v-permission="'SJML_SQXZ'"
@click="applyForDownload"
>下载文档</el-button>
6.Vue.filter()
定义过滤器，可被用于常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 js 表达式的尾部，由管道符号指示：'|'
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
在一个组件的选项中定义本地过滤器
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
在创建 Vue 实例之前全局定义过滤器
Vue.filter('capitalize', function() {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器
过滤器函数总接收表达式的值作为第一个参数
过滤器可以串联：
{{ message | filterA | filterB }}
这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递给 filterB 中。
过滤器时 js 函数，因此可以接收参数
{{ message | filterA('arg1', arg2) }}
这个例子，filterA 被定义为接收三个参数的过滤器函数，其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数， arg2 作为第三个参数
在项目中使用的案例
先定义一个 filters.js
export { formatBoolean, formatDate, formatNum, formatStatus };
// 布尔值
function formatBoolean(value) {
return value ? "是" : "否";
}
// 状态
function formatStatus(value) {
return value ? "成功" : "失败";
}
// 时间戳转换
function formatDate(value) {
let date = new Date(parseInt(value));
let Y = date.getFullYear();
let M =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
// let D = date.getDate();
let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + "." + M + "." + D + " " + h + ":" + m + ":" + s;
}
// 数值加逗号
function formatNum(num) {
num = (num || 0).toString();
let result = "";
while (num.length > 3) {
result = "," + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) {
result = num + result;
}
return result;
}
然后在 main.js 中进行全局引入
import * as filters from './filters.js'
Object.keys(filters).forEach(item => {
Vue.filter(item, filters[item])
})
// 这里讲一下 Object.keys() 方法，表示给定对象的所有可枚举属性的字符串数组
let zn = {name: 'zhangning', age: '24', height: '187'}
Object.keys(zn);// ['name', 'age', 'height'] 返回可枚举属性组成的数组
// 处理数组，返回索引值数组
let arr = [100, 200, 300, 400, 500]
Object.keys(arr);// ['0', '1', '2', '3', '4'] 返回索引值字符串组成的数组
// 处理字符串，返回索引值数组
let str = 'zhang'；
Object.keys(str);// ['0', '1', '2', '3', '4']
// 常用技巧
let zn = {name: 'zhangning', age: '25', address: '合肥', getName: function()}
Object.keys(person).map(item => {
person[item] // 获取到属性对应的值，做一些处理
})
7.Vue.component()
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
data 必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，如果不是一个函数，就会影响到组件所有实例
在项目中自定义全局组件案例
首先创建一个组件 download.vue
然后创建一个 download.js，在 js 中引入组件
// 引入组件
import DLFLoading from './index.vue';
// 自定义组件对象
const DownloadDialog = {
// install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数
install: function(Vue) {
// Vue.component() 与正常的全局注册组件用法相同，可以理解为通过 install 和 Vue.use()函数注册了全局组件
Vue.component('DownloadDialog', DLFLoading);
}
}
// 导出
export default DownloadDialog;
接着在 main.js 中全局引入组件
// 全局引入自定义下载 loading
import DownloadDialog from '@/components/DownloadDialog/download.js';
Vue.use(DownloadDialog);
最后在项目中直接就可以使用
<DownloadDialog
@cancelDownload="cancelDownload"
:downloadOver="downloadOver"
:downloadLoading="downloadLoading"
></DownloadDialog>
8.Vue.use()
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在 new Vue() 之前被调用
当 install 方法被同一个插件多次调用，插件将只会被安装一次。
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制 一般有以下几种
1.添加全局方法或者property
2.添加全局资源：指令/过滤器/过渡等
3.通过全局混入来添加一些组件选项
4.添加 Vue 实例方法，通过把他们添加到 Vue.prototype 上实现
5.一个库，提供自己的 api，同时提供上面提到的一个或多个功能
使用插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成
// 调用 MyPlugin.install(Vue)
Vue.use(MyPlugin)
new Vue({ // ...组件选项
})
也可以传入一个可选的选项对象
Vue.use(MyPlugin, {someOption: true})
Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件
9.Vue.mixin()
全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为（官方不推荐使用）
官网全局混入案例。混入也可以进行全局注册，使用时格外小心，一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，它可以用来自定义选项注入处理逻辑。
// 为自定义的选项 myOption 注入一个处理器
Vue.mixin({
created: function(){
var myOption = this.$options.myOption
if(myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'zhangning'
})
// => 'zhangning'
注意：要谨慎使用全局混入，因为它影响每个单独创建的 Vue 实例（包括第三方组件）。大多数情况下，之应当应用于自定义选项，就像上面实例一样，推荐将其作为插件发布，以避免重复应用混入
使用案例
定义一个 mixin.js
let MiXin = {
data(){
return {
name: 'zhangning'
}
},
created(){
console.log('这是mixin中的name', this.name)
},
mounted(){},
methods: {}
}
export default MiXin
// 全局引入 import mixin from './mixin'
Vue.mixin(mixin) // 在 vue 组件中局部引入
import '@/mixin'
export default {
mixins: [mixin]
}
混入和组件的合并注意事项
1.数据对象 data 在内部进行递归合并，在和组件的数据发生冲突时以组件数据优先
2.同名钩子函数（created，mounted）将混合为一个数组，都将被调用。另外混入对象的钩子将在组件自身钩子之前调用
3.值为对象的选项（methods，components，directives）将被混合为同一个对象，两个对象键名冲突时，去组件对象的键值对
10.Vue.compile() -- 模板渲染
将一个模板字符串编译成 render 函数。旨在完整版时可用
let res = Vue.compile('<div><span>{{ massage }}</span></div>')
new Vue({
data: {
message: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
以上是官网给的一个小实例。
以后深入理解之后，再回来更新
11.Vue.observable() -- 可用于组件间共享数据
让一个对象可响应，Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时出发相应的更新。
处理简单的跨组件共享数据状态的问题，可以说是个精简的 vuex
示例
创建store.js
import Vue from 'vue'
export const store = Vue.observable({num: 0})
export const mutations = {
setNum (num) {
store.num = num
}
}
在组件中使用（所有的说明都没有举例子来的实在，理解的更快）
<template>
<div>
<span>选择数量</span>
<button @click="setNum(num + 1)"> + </button>
<span>count</span>
<button @click="setNum(num - 1)"> - </button>
</div>
</template> <script>
import { store, mutations } from '@/store/store'
export default {
name: 'numIndex',
computed: {
count() {
return store.num
}
},
methods: {
setNum: mutations.setNum
}
}
</script>
12.Vue.version()
提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用，你可以根据不同的版本号采取不同的策略
let version = Number(Vue.version.split('.')[0])
if (version == 2) {
} else if (version == 1) {
} else {}
就是获取当前使用的 vue 版本号，原理就是读取 package.json 中的 version 字段
以上就是 vue API 全局 API 的所有内容，
宝剑锋从磨砺出，梅花香自苦寒来。