这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战”
Vue 学习 小白入门笔记
Vue.use(Element)
注册组件;使用 element时会先import,再Vue.use()一下,实际上就是注册组件,触发 install 方法;
Vue.use(VueRouter)、Vue.use(MintUI)
源码:
// 这里的plugin参数就是,就是我们通过Vue.use(uView)引入的"uView"
Vue.use = function (plugin: Function | Object) {
// ......
const args = toArray(arguments, 1)
// 这一句很重要,这里的this,就是Vue,把他添加到args数组的第一个元素
args.unshift(this)
// 判断我们传递进来的"uView",也即这里的"plugin"内部是否有一个叫"install"的方法
// 如果有,就执行我们的"uView",也即"plugin.install"方法
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
// ......
}
Vue的
use方法内部,接受了uView这个插件,并判断uView内部是否有一个叫install的方法,如果有,就执行它,并且 通过apply方法把数组当做参数传递进去(这里数组内部第一个元素Vue这个对象,见上方注释,apply可以把数组[arg1, agr2]形式拆成(arg1, agr2)的形式)
Vue.prototype
需要在多个组件都想用到的配置或者数据,可以在Vue原型对象上定义为全局对象,在后面的Vue实例都能访问到;
定义
Vue.prototype.$appName = 'My App'
访问
this.$appName
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
appName前面的 $ 开头是为什么?
避免和局部Vue对象产生定义冲突,以$开头表明是:全局访问对象
访问的时候一定加 this , this 代表的是当前的vue实例对象;
一般用法
import * as Common from './config/common.js'
Vue.prototype.$common = Common; // 注册通用方法
//axios
Vue.prototype.$axios = axios
import getTime from './utils/getTime';
Vue.prototype.$myUtils = getTime;
//使用
this.$myUtils.dateformat(),
// loading
Vue.prototype.$loading = Loading.service;
Vue.config
Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列 property:
Vue.config.silent = true //取消 Vue 所有的日志与警告。
...App 是啥语法
const app = new Vue({
...App
})
app.$mount()
手动挂载操作
$mount如果不带任何参数的话,是需要在后续使用document.xxx这样的方法来定义挂载节点的
beforeMount: function appBeforeMount () {
// TODO 平台代码
this.$el = document.getElementById('app')
},
px, upx ,rpx 区别
在web中,常用的是px,rem等单位,rem在uniapp中不推荐使用
web中: 可以使用px,它属于静态单位,它的最终呈现尺寸不会和屏幕尺寸有关系
px属于静态单位,uni中还有upx和rpx单位,upx为uniapp成立之初的动态单位,后来各家小程序跟随微信小程序,都使用 rpx单位,使它成为了既定的事实标准,uniapp也就提倡并官宣使用rpx单位,但是upx也一样能使用,和rpx效果相同。
另外:uniapp,vh和vw也完全可以使用的,一般我们需要让某个元素高度铺满整个屏幕时,可以设置高度为100vh。
建议:开发中,只需谨记两个单位,px和rpx,一般情况下,我们推荐字体和宽高等,都使用rpx单位,如果真的需要固定尺寸,就是用px。