一、关于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 ''
}
}
}
3990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
