一、关于vue中的$mount方法
用于手动将项目APP挂载到一个DOM实例上,这样就可以不用在new Vue中声明el选项;
情况一:传统使用el
声明挂载DOM
new Vue({
el: '#app',
render: h => h(App),
})
情况二:使用.$mount()
方法
// 建议使用此方法理由:因为在Elint中上述前者表达是并不符合规范的,而后者则是符合规范的
new Vue({
render: h => h(App),
}).$mount('#app')
二、关于main.js基础设置
在Vue中,main.js
是项目的入口js文件,用于注册项目全局依赖和配置,如router
、store
等
在此我就举个基本main.js
示例格式
import Vue from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
import filters from './js/filters'
import Vant from 'vant';
import IFetch from './config/apiServer/iFetch'
import apiConfig from './config/apiServer/apiConfig'
// 挂载自定义全局过滤器
Object.keys(filters).forEach(item => {
Vue.filter(item, filters[item])
})
// 挂载全局ui【Vant UI】
Vue.use(Vant);
// 挂载自定义插件(将所有api接口挂载为全局Vue实例方法api中)
const iFetch = new IFetch(apiConfig)
Vue.use({ install: Vue => {
Vue.prototype.api = iFetch
} })
new Vue({
router, // 将router.js映射好的路由实例挂载在实例Vue上
store, // 将vuex中的store挂载到实例Vue上
render: h => h(App), // 将项目中的虚拟DOM渲染挂载到实例Vue上
}).$mount('#app')
三、关于Vue.use方法注意事项
1、全局注册需要在new Vue()
启动应用之前完成,比如
import Vue from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
import Vant from 'vant';
import IFetch from './config/apiServer/iFetch'
import apiConfig from './config/apiServer/apiConfig'
/**************正确做法【.use写在new Vue()前面】*******************************************/
// 挂载全局ui【Vant UI】
Vue.use(Vant);
// 挂载自定义插件(将所有api接口挂载为全局Vue实例方法api中)
const iFetch = new IFetch(apiConfig)
Vue.use({ install: Vue => {
Vue.prototype.api = iFetch
} })
new Vue({
router, // 将router.js映射好的路由实例挂载在实例Vue上
store, // 将vuex中的store挂载到实例Vue上
render: h => h(App), // 将项目中的虚拟DOM渲染挂载到实例Vue上
}).$mount('#app')
/**************错误做法【.use写在new Vue()后面】*******************************************/
new Vue({
router, // 将router.js映射好的路由实例挂载在实例Vue上
store, // 将vuex中的store挂载到实例Vue上
render: h => h(App), // 将项目中的虚拟DOM渲染挂载到实例Vue上
}).$mount('#app')
// 挂载全局ui【Vant UI】
Vue.use(Vant);
// 挂载自定义插件(将所有api接口挂载为全局Vue实例方法api中)
const iFetch = new IFetch(apiConfig)
Vue.use({ install: Vue => {
Vue.prototype.api = iFetch
} })
2、.use()
会阻止重复注册同一插件
import Vue from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
import Vant from 'vant';
// 挂载全局ui【Vant UI】
Vue.use(Vant);
// 此时不会在此注册挂载
Vue.use(Vant);
new Vue({
router, // 将router.js映射好的路由实例挂载在实例Vue上
store, // 将vuex中的store挂载到实例Vue上
render: h => h(App), // 将项目中的虚拟DOM渲染挂载到实例Vue上
}).$mount('#app')
3、注册自定义插件,使用暴露得install
方法
3.1、install
方法
第一个参数为Vue的构造器【记住是构造器,若不懂什么是构造器,可以从原型学起】
第二个参数为一个可选的对象options
3.2、四种注册方法
Vue.use({ install: vue => {
// 1.添加全局属性和方法
vue.globalMethod = function() { code…… }
// 2.利用.directive方法添加全局自定义指令
vue.directive('directiveName', {
bind(el, binding, vnode) { code…… }
})
// 3.利用.mixin方法添加混入对象(类组件)
// 此种方式使用时需谨慎,因为会添加到此后每个Vue实例中
vue.mixin({
data() { code…… },
created() { code…… },
methods: { code…… }
})
// 4.添加实例方法
vue.prototype.methodName = function() { code…… }
} })
四、关于Vue.directive方法注意事项
1、使用范围【全局使用 / 局部使用】
// 全局使用
Vue.use({
install: (Vue) => {
Vue.directive('focus', {
bind(el, binding, vnode) {
console.log('binding', binding)
}
})
}
})
// 局部使用
directives: {
focus: {
inserted(el, binding, vnode) {
el.focus();
}
}
}
2、钩子函数
bind
:只调用一次,指令绑定目标时调用,一般用于对目标进行初始化设置
inserted
:在绑定目标插入其父元素时调用,一般用于对目标做相关静态设置(如聚焦focus)
update
:所在组件虚拟DOM更新时调用,一般用于对目标做相关更新设置(注:这并不代表目标中的子组件是否更新)
compentUpdated
:所在组件及其内部所有子组件更新后调用,一般用于对目标做整体更新设置
unbind
:只调用一次,指令解绑时调用(所在组件销毁时),一般用于结束目标相关设置
3、钩子函数参数
el
:指令所绑定的元素(若是绑定在组件上,则是整个组件DOM元素)
binging
:对象类型,包含了指令的名称、值、参数、修饰符等属性值(以下详细介绍){
name
:自定义的指令名称
rawName
:指令的左侧整个表达式(包含标识符和参数)
value
:指令右侧所绑定值
expression
:指令右侧表达式(表达式或value的变量名)
age
:给指令所传参数,类型不限(基本类型或则引用类型)
modifiers
:修饰符组成的对象集
}
vnode
:Vue 编译生成的虚拟节点
oldVnode
:上一个虚拟节点,仅在 update
和 componentUpdated
钩子中可用
示例:
<template>
<input type="text" v-focus:[params].a = 'message' />
</template>
<script>
export default {
data() {
return {
params: [],
message: 'focusValue'
};
},
// 局部使用
directives: {
focus: {
bind(el, binding, vnode) {
console.log('el', el)
console.log('binding', binding)
},
inserted(el, binding, vnode) {
el.focus();
},
unbind(el, binding) {
console.log('解绑')
}
}
}
};
五、关于Vue.mixin方法注意事项
1、什么是混入对象
一种包含组件中任意选项的对象数据结构
2、使用范围【全局使用 / 局部使用】
// 使用.mixin方法全局添加混入对象(类组件)
// 【此种方式使用时需谨慎,因为会添加到此后每个Vue实例中】
vue.mixin({
data() { code…… },
created() { code…… },
methods: { code…… }
})
// 使用.mixin方法局部添加混入对象(类组件)
const minxinObject = {
data() { code…… },
created() { code…… },
methods: { code…… }
}
<template>
<div>接收混入对象组件</div>
</template>
export default {
mixin: [minxinObject],
data() {
return {}
}
}
3、选项合并
3.1、除却生命钩子函数之外,其他数据优先级为组件内部选项高于混入对象内部选项
3.2、同一生命周期钩子函数,则会和混入对象相同的钩子函数合并成一数组,并且都会在相应阶段执行;执行顺序根据mixin: [minxinObject]
使用位置在组件相应钩子函数是前或则是后
示例:
const minxinObject = {
data() {
return {
a: 1,
b: 2
}
},
methods: {
fun_a() { console.log('1') },
fun_b() { console.log('2') }
},
created() { console.log('mixin') }
}
<template>
<div>接收混入对象组件</div>
</template>
export default {
mixin: [minxinObject],
data() {
return {
b: 3
}
},
methods: {
fun_b() { console.log('3') }
},
created() { console.log('template') }
}
/**************合并结果******************/
data => { a: 1, b: 3 }
methods => { fun_a() { console.log('1') }, fun_a() { console.log('3') } }
created => [ created() { console.log('mixin') }, created() { console.log('template') } ]
六、关于Vue.filter方法注意事项
1、什么是过滤器
用于对某种数据结构或则文本格式及内容的过滤
2、使用范围(全局 / 局部使用)
/***全局使用***************************************/
// filter.js
export const singleArgFilter = arg => {
console.log('arg', arg)
return ''
}
export const agrsFilter = (arg1, arg2, arg3) => {
console.log('arg1', arg1)
console.log('arg2', arg2)
console.log('arg3', arg3)
return ''
}
export default {
singleArgFilter,
agrsFilter
}
// main.js
import filters from './js/filters'
Object.keys(filters).forEach(item => {
vue.filter(item, filters[item])
})
/***局部使用***************************************/
filters: { // 组件内filters选项
singleArgFilter(arg) {
console.log('arg', arg)
return ''
},
agrsFilter(arg1, arg2, arg3) {
console.log('arg1', arg1)
console.log('arg2', arg2)
console.log('arg3', arg3)
return ''
}
}
3、过滤器参数
3.1、过滤器通过管道符只能接受一个数据,因为一个过滤器只对一种数据文本进行过滤;若在管道符左侧用()
号写入多个参数,则只会接受最后一个值作为过滤器第一个参数传入
3.2、过滤器函数若需要多个参数,则需要手动在管道符右侧自行添加除却第一个参数外的其他参数
例如:
<template>
<div>{{ 'message'|agrsFilter(arg2, arg3) }}</div>
</template >
export default {
data() {
return {
arg2: 2,
arg3: 3
}
},
filters: { // 组件内filters选项
agrsFilter(arg1, arg2, arg3) {
console.log('arg1', arg1) // message
console.log('arg2', arg2) // 2
console.log('arg3', arg3) // 3
return ''
}
}
}