Как один из трех интерфейсных фреймворков, vue является обязательным навыком для фронтенд-разработчиков. Так как же систематически изучать и осваивать vue? С этой целью я сделал простое резюме системы системы знаний.Пожалуйста, потерпите меня и исправьте мои недостатки.Если вам это нравится, вы можете поставить большой палец вверх! В этой статье в основном описываются некоторые продвинутые приложения в разработке vue, и мы надеемся, что они будут полезны всем.
связанное предложение
Vue.use
Используемые нами сторонние плагины Vue.js. Если плагин является объектом, необходимо указатьinstallметод. Если плагин является функцией, он будет использоваться какinstallметод.installКогда метод вызывается, онVueПередать в качестве параметра. Этот метод нужно вызватьnew Vue()звонили раньше.
Мы используем его при использовании плагинов или сторонних библиотек компонентов.Vue.useтакой метод, как
import iView from 'iview'
Vue.use(iView)
ТакVue.useЧто ты сделал? Давайте сначала посмотрим на исходный код
import { toArray } from '../util/index'
export function initUse(Vue: GlobalAPI) {
Vue.use = function(plugin: Function | Object) {
const installedPlugins = this._installedPlugins || (this._installedPlugins = [])
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
Мы можем видеть из вышесказанного, что,pluginПараметр представляет собой тип функции или объекта, сначалаVueБудет искать этот плагин в списке установленных плагинов, если нет, установить плагин, если да, то выпрыгнуть из функции, которая гарантирует, что плагин будет установлен только один раз.
затем черезtoArrayМетод становится параметрами в массивы, а затем судитpluginизinstallявляется ли свойство функцией илиpluginсама является функцией и, наконец, выполняетplugin.installилиpluginМетоды.
Например
Возьмем практический пример
1. Напишите два плагина
const Plugin1 = {
install(a) {
console.log(a)
}
}
function Plugin2(b) {
console.log(b)
}
export { Plugin1, Plugin2 }
2. Внедрите и используйте эти два плагина
import Vue from 'vue'
import { Plugin1, Plugin2 } from './plugins'
Vue.use(Plugin1, '参数1')
Vue.use(Plugin2, '参数2')
На данный момент мы можем использовать два вышеупомянутых плагина, запустив код проекта.
Vue.mixin
Миксины предоставляют очень гибкий способ распространения повторно используемой функциональности в компонентах Vue. Объект миксина может содержать произвольные параметры компонента. Когда компонент использует примесь, все опции примеси будут «смешаны» с собственными опциями компонента.
1. Определите mixin.js
export default mixin {
data() {
return {
name: 'mixin'
}
},
created() {
console.log('mixin...', this.name);
},
mounted() {},
methods: { //日期转换
formatDate (dateTime, fmt = 'YYYY年MM月DD日 HH:mm:ss') {
if (!dateTime) {
return ''
}
moment.locale('zh-CN')
dateTime = moment(dateTime).format(fmt)
return dateTime
}
}
}
2. Используйте миксин в файле vue
import '@/mixin'; // 引入mixin文件
export default {
mixins: [mixin], //用法
data() {
return {
userName: "adimin",
time: this.formatDate(new Date()) //这个vue文件的数据源data里面的time就是引用混入进来的方法
}
}
}
Или используйте его глобально в main.js, все страницы могут его использовать
import mixin from './mixin'
Vue.mixin(mixin)
Параметры слияния
Когда компоненты и примеси имеют параметры с одинаковыми именами, эти параметры «объединяются» соответствующим образом.
-
dataОбъекты внутренне рекурсивно объединяются, при этом данные компонентов имеют приоритет в случае конфликта. - Хуки-функции с одинаковыми именами будут объединены в массив, поэтому будут вызываться все. Хуки миксина будут вызываться перед собственными хуками компонента.
- параметры, значение которых является объектом, например.
methods,componentsиdirectives, будут объединены в один и тот же объект. Когда имена ключей двух объектов конфликтуют, берется пара ключ-значение объекта-компонента.
Vue.extend
Vue.extendГлобальный API, принадлежащий Vue. Он использует базовый конструктор Vue, создавая «подкласс». Параметр — это объект, содержащий параметры компонента. следующее:
<div id="app"></div>
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#app')
Приложения
мы используемVue.extendИнкапсулируйте некоторые глобальные плагины, такие какtoast,diologЖдать.
Следующее инкапсулируетtoastКомпоненты например.
1. Напишите компоненты
- Определите тип всплывающего окна в соответствии с типом входящего сообщения (подсказка об успешном завершении, подсказка об ошибке, предупреждение, загрузка, обычный текст)
- Установите время, по истечении которого всплывающее окно исчезнет
<template>
<div>
<transition name="fade">
<div class="little-tip" v-show="showTip">
<img src="/success.png" alt="" width="36" v-if="type=='success'" />
<img src="/fail.png" alt="" width="36" v-if="type=='fail'" />
<img src="/warning.png" alt="" width="36" v-if="type=='warning'" />
<img src="/loading.png" alt="" width="36" v-if="type=='loading'" class="loading" />
<span>{{msg}}</span>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
showTip: true,
msg: '',
type: ''
}
},
mounted() {
setTimeout(() => {
this.showTip = false
}, 1500)
}
}
</script>
<style lang="less" scoped>
/* 样式略 */
</style>
2. ИспользуйтеVue.extendдескриптор конструктораtoastкомпонент монтируется наvueпод примером
import Vue from 'vue'
import Main from './toast.vue'
let Toast = Vue.extend(Main)
let instance
const toast = function(options) {
options = options || {}
instance = new Toast({
data: options
})
instance.vm = instance.$mount()
document.body.appendChild(instance.vm.$el)
return instance.vm
}
export default toast
3. Вmain.jsвводитьtoastустановить цену и установить вvueна прототипе
import Vue from 'vue'
import toast from './components/toast'
Vue.prototype.$toast = toast
4. Звоните в проект
this.$toast({ msg: '手机号码不能为空' })
this.$toast({
msg: '成功提示',
type: 'success'
})
Разница между Vue.extend и Vue.component
-
componentСначала необходимо зарегистрировать компонент, а затемtemplateИспользуйте зарегистрированное имя тега для реализации использования компонента.Vue.extendЭто программное письмо. - контроль
componentНезависимо от того, отображать или нет, вам нужно передать состояние в родительский компонент, чтобы контролировать или использовать его вне компонента.v-if/v-showдобиться контроля иVue.extendНезависимо от того, является ли дисплей ручным или нет, необходимо монтировать и уничтожать компоненты вручную.
Vue.directive
Зарегистрируйтесь или получите глобальные директивы. Функция определения директивы предоставляет несколько функций ловушек (необязательно):
- bind: вызывается только один раз, когда директива привязывается к элементу в первый раз, вы можете определить действие инициализации, которое выполняется один раз во время привязки.
- вставленный: вызывается, когда связанный элемент вставляется в родительский узел (родительский узел может быть вызван, если он существует, он не обязательно должен существовать в документе).
- update: вызывается при обновлении шаблона, содержащего связанный элемент, независимо от того, изменилось ли связанное значение. Путем сравнения значений привязки до и после обновления.
- componentUpdated: вызывается, когда шаблон, содержащий связанный элемент, завершает цикл обновления.
- unbind: вызывается только один раз, когда инструкция отсоединяется от элемента.
Приложения
Ниже приведен пример копирования и вставки текста.
1. Напишите инструкцииcopy.js
const vCopy = {
bind (el, { value }) {
el.$value = value // 用一个全局属性来存传进来的值
el.handler = () => {
if (!el.$value) {
alert('无复制内容')
return
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea')
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value
// 将 textarea 插入到 body 中
document.body.appendChild(textarea)
// 选中值并复制
textarea.select()
// textarea.setSelectionRange(0, textarea.value.length);
const result = document.execCommand('Copy')
if (result) {
alert('复制成功')
}
document.body.removeChild(textarea)
}
// 绑定点击事件，就是所谓的一键 copy 啦
el.addEventListener('click', el.handler)
},
// 当传进来的值更新的时候触发
componentUpdated (el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind (el) {
el.removeEventListener('click', el.handler)
}
}
export default vCopy
2. Инструкции по регистрации
import copy from './copy'
// 自定义指令
const directives = {
copy
}
// 这种写法可以批量注册指令
export default {
install (Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
}
}
3. Вmain.jsимпорт иuse
import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)
Это можно использовать прямо в проектеvCopyприказ.