vue 做爲目前前端三大框架之一,對於前端開發者能夠說是必備技能。那麼怎麼系統地學習和掌握 vue 呢?爲此,我作了簡單的知識體系體系總結,不足之處請各位大佬多多包涵和指正,若是喜歡的能夠點個小贊!本文主要講述一些vue開發中的幾個高級應用,但願能對你們有所幫助。javascript
相關推薦css
咱們使用的第三方 Vue.js 插件。若是插件是一個對象,必須提供install
方法。若是插件是一個函數,它會被做爲install
方法。install
方法調用時,會將Vue
做爲參數傳入。該方法須要在調用new Vue()
以前被調用。html
咱們在使用插件或者第三方組件庫的時候用到Vue.use
這個方法,好比前端
import iView from 'iview'
Vue.use(iView)
複製代碼
那麼Vue.use
到底作了些什麼事情呢?咱們先來看一下源碼vue
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
會去尋找這個插件在已安裝的插件列表裏有沒有,若是沒有,則進行安裝插件,若是有則跳出函數,這保證插件只被安裝一次。java
接着經過toArray
方法將參數變成數組,再判斷plugin
的install
屬性是否爲函數,或者plugin
自己就是函數,最後執行plugin.install
或者plugin
的方法。webpack
下面咱們來舉個實際例子
一、編寫兩個插件web
const Plugin1 = {
install(a) {
console.log(a)
}
}
function Plugin2(b) {
console.log(b)
}
export { Plugin1, Plugin2 }
複製代碼
二、引入並 use 這兩個插件算法
import Vue from 'vue'
import { Plugin1, Plugin2 } from './plugins'
Vue.use(Plugin1, '參數1')
Vue.use(Plugin2, '參數2')
複製代碼
此時咱們運行項目代碼就能夠用到上面兩個插件了。vue-router
混入 (mixin) 提供了一種很是靈活的方式,來分發 Vue 組件中的可複用功能。一個混入對象能夠包含任意組件選項。當組件使用混入對象時,全部混入對象的選項將被「混合」進入該組件自己的選項。
一、定義一個 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
}
}
}
複製代碼
二、在vue文件中使用mixin
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 的全局 API。它使用基礎 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
組件爲例。
一、編寫組件
<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>
複製代碼
二、利用 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
複製代碼
三、在 main.js
引入 toast
組價並掛載在 vue
原型上
import Vue from 'vue'
import toast from './components/toast'
Vue.prototype.$toast = toast
複製代碼
四、在項目中調用
this.$toast({ msg: '手機號碼不能爲空' })
this.$toast({
msg: '成功提示',
type: 'success'
})
複製代碼
component
是須要先進行組件註冊後,而後在 template
中使用註冊的標籤名來實現組件的使用。Vue.extend
則是編程式的寫法。component
的顯示與否,須要在父組件中傳入一個狀態來控制或者在組件外部用 v-if/v-show
來實現控制,而 Vue.extend
的顯示與否是手動的去作組件的掛載和銷燬。註冊或獲取全局指令。指令定義函數提供了幾個鉤子函數(可選):
下面封裝一個複製粘貼文本的例子。
一、編寫指令 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
複製代碼
二、註冊指令
import copy from './copy'
// 自定義指令
const directives = {
copy
}
// 這種寫法能夠批量註冊指令
export default {
install (Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
}
}
複製代碼
三、在 main.js
引入並 use
import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)
複製代碼
這樣就能夠在項目直接用 vCopy
指令了。
關注的個人公衆號不按期分享前端知識,與您一塊兒進步!