全局配置
ignoredElements
须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。
就是你在页面用一个<he></he>标签的时候，这个是一个自定义元素，并不是自已定义的组件，这时候就会抛出一个警告，要想不想让他抛出这个警告就要在全局设置main.js 里面
Vue.config.ignoredElements = ["hhe"];keyCodes
在按下键盘某个键的时候触发，可以触发的事件，可以在点击两个中的某一个就会触发
<input type="text" @keyup.hehe="enter" />
当按下空格或者删除按钮的时候就会触发enter函数
-------------main.js
Vue.config.keyCodes = {
hehe: [8,13],
}; 另外两种方法
<input type="text" @keyup.enter="enter" />
<input type="text" @keyup.keyCode.13="enter" >performance
......用的不多，没怎么理解..?懂得可以给我讲一下
productionTip
设置为 false 以阻止 vue 在启动时生成生产提示。
设置为 true允许vue 在启动时生成生产提示
全局API vue.
extend
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
就是用来创建一个组件
例如：
先通过extend创建组件
let xixi = Vue.extend({ template: '<h1>你好世界</h1>'})
然后通过component进行创建
Vueponent('MyComponent',xixi)
//可以简写
Vueponent('my-component',{
template:'<h1><p>你好世界</p></h1>'
})nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。【用在异步请求数据的时候】
created() {
setTimeout(() => {
this.list = [
'https://t7.baidu/it/u=1595072465,3644073269&fm=193&f=GIF',
'https://t7.baidu/it/u=1330338603,908538247&fm=193&f=GIF',
'https://t7.baidu/it/u=2259261418,2370578071&fm=193&f=GIF'
]
// 浏览器帧率60 = 1s刷新60 16~17ms
// setTimeout(() => { //用setTimeout 效果是一样的
// this.init()
// },17)
// 上一次数据修改引起真实dom更新后执行回调
this.$nextTick(() => {
this.init() //轮播图中再下次数据更新，也就是异步获取到数据的时候才会触发轮播图的初始化函数init() })
}, 1000)Vue.set
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
例如
{{arr}}
{{obj}}
data() {
return {
test: "hehe",
arr: [1, 2, 3],
obj: {
us: "王一",
ps: 123,
},
};
},
change() {
// this.arr[0] = 5;//而只是单纯的改变数组中的某一项的时候并不会在页面上显示
// console.log(this.arr);//但是打印出来数组的第一项是5
this.arr.push(1);//在数组中添加一项改变数组会在页面中显示出来，是因为push方法改变了this.arr了，在封装的方法中返回了一个新的数组，所以就会页面改变
// const arr = [...this.arr];//这里的方法就是改变this.arr
// arr[0] = 5;
// this.arr = arr;
// this.$set(this.arr, 0, 5);//这是通过set方法改变
// this.arr[0] = 5;
// this.$forceUpdate(); 改变
// 修改数组内部属性无法引起页面的更新 （没说数据不变）
// 方案1 直接对数组整体赋值
// 方案2 通过set vue.set() this.$set(要修改的元素,key/idx,要修改的值)
// 通过this.$forceUpdate() 强制更新页面
// this.obj.us = "heheh"; //可以改变因为现在是一个对象类型，不跟数组一样
// 动态添加或者减少对象内部的属性不会引起页面变化 （我没说数据不变）
//this.obj.test = "test"; //不可以新添加，因为初始化完成后obj并没有text这个属性
// delete this.obj.us;//页面不变
// 方案1 通过set vue.set() this.$set(要修改的元素,key/idx,要修改的值)
// this.$set(this.obj, "test", 123); 页面改变
// 方案2 通过this.$forceUpdate() 强制更新页面
// this.obj.test = "test";
// delete this.obj.us;
this.$forceUpdate();
// 方案3删除的Api方法vue.delect可以直接删除
// this.$delete(this.obj, "us");
},总结：
1、如果我们在初始化之后想要添加一个响应式数据，可以使用 set 方法，改方法传递三个参数，分别是：targe( 需要向哪个目标对象中添加 )，key( 添加的属性 )，val( 属性的值 )
2、Vue.set() 和 vm.$set() 这两个方法的作用一样，传参也一样，不一样的是一个是挂载在Vue上的全局api，一个是挂载到 Vue实例对象上的方法
3、使用 set() 方法添加属性时，不能直接添加到 vm实例对象上，也不能直接添加到根数据data中，需要添加到 data 中的某一个对象上才能生效，就如上面的obj
4、因为Vue的数据代理，所以我们在使用 set() 方法时，获取目标对象时，可以使用 vm.xxx，也可以使用 vm._data.xxx
vue.delect
删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它
例子在Vue.set 最后删除obj.us用过
Vue.directive
vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作，它是一种有效的的补充和扩展，不仅可以用于定义任何的dom操作，并且是可以复用的，
<input type="text" v-focus />//页面刷新就会自动获取焦点
export default {
data(){},
directives: { //放在与data一级
focus: {
//自定义了一个指令，v-focus,就会执行el.focus()加上这个指令的dom节点就会自动获取焦点
inserted(el) {
el.focus();
},
},
}
}1、vue.directive 有两个参数：id（string）和[definition](function|object)
2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind
2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
2.2、inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）
2.3、update:所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了变化，也可能没有
2.4、componentUpdate：指令所在组件的vnode及其子vnode全部更新后调用
2.5、unbind：只调用一次，指令与元素解绑时调用
3、钩子函数参数
el，binding（name,value,oldValue,expression,arg,modifiers）， vnode，oldvnode
4、动态指令参数
指令的参数可以是动态的，例如，v-focue:[argument]="value"中，argument参数可以根据组件实例数据进行更新
Vue.filter
过滤器 对数据进行处理，切记处理完数据要返回，必须要return
在全局里面使用过滤器，需要写在new Vue({})实例前面
{{ 要处理的数据 | 过滤器}}
Vue.filter('过滤器的名字',(data,params1,params2...) => {
data 要处理的数据
params 其他的参数
return 处理完的数据
})
在局部的时候用：filters
例子：
<div id="app">
{{time|timeFilter(1,2,3) }}
</div>
//在全局使用的过滤器
Vue.filter('timeFilter',(data,a,b,c)=> { //这里的data就是上面调用时候的time,也就是new Vue里面的time,a,b,c就是传进去的数据，可以通过这些数据对data进行增删改查
// 处理数据逻辑
console.log(data,a,b,c)
// 返回处理完的数据
return '🙂' //返回处理完成的数据
})
new Vue({
data: {
name:'arui',
time: '11233',
},
// filters: {
// timeFilter(data,a,b,c) { //这里是局部过滤器
// console.log(data,a,b,c)
// return '呵呵'
// }
// }
}).$mount('#app')Vueponent
注册组件
Vueponent('my-component',{
template:'<h1><p>你好世界</p></h1>'
})Vue.use
Vue.mixin
vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。
一.区别
1.mixin混入对象和Vuex的区别：
Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；
mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖
2.与公共组件的区别
同样明显的区别来再列一遍哈~
-
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
-
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
二.怎么用？
举个栗子：
- 定义一个混入对象
- 把混入对象混入到当前的组件中
用法似不似相当简单呀
mixins的特点
1 .方法和参数在各组件中不共享
混合对象中的参数num
组件1中的参数num进行+1的操作
组件2中的参数num未进行操作
看两组件中分别输出的num值
大家可以看到，我在组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值
2. 值为对象的选项，如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的（就是除了在生命周期里面的值，组件里面的都会覆盖mixin,在生命周期里面的会进行合并，先执行mixin里面的）
混入对象中的方法
组件中的方法
打印台的输出
3 .值为函数的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用
混入对象函数中的console
组件函数中的console
打印台的打印
Vue.version
看Vue版本号
inheritAttrs: false
属性除了class不会被传递
例如：
<template>
<div class="hello">
</div>
</template>
<script>
export default {
data() {
},
inheritAttrs: false,
};
</script>
//在用这个组件的时候
<hehe id="test" xixi="45" ww="123" class="testclass">//除了class 会变成拼接，其余不会渲染到dom上
更多推荐
Vue2 Api 总结大全
发布评论