請(qǐng)簡(jiǎn)述什么是Vue插件(vue插件有哪些)
本篇文章給大家談?wù)務(wù)埡?jiǎn)述什么是Vue插件,以及vue插件有哪些對(duì)應(yīng)的知識(shí)點(diǎn),希望對(duì)各位有所幫助,不要忘了收藏本站喔。
本文目錄一覽:
vue是什么
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。
與其它大型框架不同的是,Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。纖慶頌Vue的核心庫(kù)只關(guān)注視圖層,毀鄭不僅易于上手,還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí),Vue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
Vue使用了雙向數(shù)據(jù)綁定,即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候,視圖也就發(fā)生變化,當(dāng)視圖發(fā)生變化的時(shí)候,數(shù)據(jù)也會(huì)跟著同步變化,這就是Vue的精髓所在。
Vue的生命周期
Vue生命周期總共分為以下幾個(gè)階段:創(chuàng)建前后、掛載前后、更新前后、銷毀前后。
Vue生命周期第一個(gè)階段:
創(chuàng)建前:獲取不到數(shù)據(jù),也拿不到DOM元素。
創(chuàng)建后:可以獲取數(shù)據(jù),但拿不到DOM元素。
Vue生命周期第二個(gè)階段:
加載前:可以拿到DOM元素,但是DOM元素沒(méi)有被解析。
加載后:可以拿到DOM元素,DOM元素被解析了。
Vue生命周期第三個(gè)階段:
更新前:數(shù)據(jù)改變了,DOM沒(méi)有發(fā)生變化。
更新后:數(shù)據(jù)改變了,DOM也發(fā)生了變化。
Vue生命周期第四個(gè)階段:
銷毀前:所有的事件監(jiān)聽和實(shí)例都可以用。
銷毀后:所有的事件監(jiān)聽和實(shí)例都被銷毀。差隱
請(qǐng)簡(jiǎn)述什么是vue
vue指的是vue.js框架。Vue.js是一款友好的、多用途的且高性能的js框架,一款構(gòu)建用戶界面的漸進(jìn)式框架,它可以幫你創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)。
Vue.js是旅彎首一款流行的JavaScript前端框架,一個(gè)用于創(chuàng)建用戶界面的開源JavaScript框架,旨在更好地組織與簡(jiǎn)化Web開發(fā)。Vue所關(guān)注的核心是MVC模式中的視圖層,同時(shí),它也能方便地獲取數(shù)據(jù)更新,并通過(guò)組件內(nèi)部特定的方法實(shí)現(xiàn)視圖與模型的交互。
Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面,Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)的復(fù)雜單頁(yè)應(yīng)用。
Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue.js 自身不鬧哪是一個(gè)全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí),非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面,在與相關(guān)工具和支持庫(kù)一起使用時(shí) ,Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。
Vue.js是前端的主流框架之一,和Angular.js、React.js 一起,并成為前端三大主流框架拆數(shù)!
【vue】插件
插件通常用來(lái)為 Vue 添加 全局功能 ,所謂全局即不需要像組件那樣,每次使用他前都需要先引入一次。對(duì)于插件只要在 最開始引入一次,在任何組件就可以直接使用 。(類似于我鏈如們?cè)趙indow上添加的方法屬性那樣,任何地方都可以用)
下面幾種常見(jiàn)的用途:
主要兩種使用方式
一:全局引入方式
(1)使用步驟
通過(guò)全局方法 Vue.use() 使用插件。它需要在你調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前完成
也可以傳入一個(gè)可選的選項(xiàng)對(duì)象:
(2)在main.js中配置
比如:使用element-ui為例:
組使用件中
二:組件引入方式棚純啟
比如,以使用 swiper為例
組件中使用
vue插件其實(shí)就是一個(gè)簡(jiǎn)單的 js對(duì)象而已 ,然后這個(gè)插件對(duì)象有一個(gè)公開屬性 install ,他的值為一個(gè)函數(shù),此函數(shù)接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是 Vue 構(gòu)造器 , 第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象。
一:開發(fā)插件有四種方法
二:添加實(shí)例方法
其中最常用的:【4. 添加實(shí)例方法】的寫法和使用方法,下面舉例說(shuō)明toast 最簡(jiǎn)單插件開發(fā)過(guò):
(1)新建一個(gè)plugin目錄,編輯插件toast.js文件
(2)在 main.js 中,需要導(dǎo)入 toast.js 并且通過(guò)全局方法 Vue.use() 來(lái)使用插件
(3)我們?cè)诮M件中來(lái)獲取該插件定義的 $msg 屬性,比如在褲敏根組件App.vue中
控制臺(tái)輸出:Hello World
三:添加全局資源
這里主要介紹過(guò)濾器
(1)在plugin目錄新建插件filter.js文件
(2)在 main.js 中,需要導(dǎo)入 filter.js 并且通過(guò)全局方法 Vue.use() 來(lái)使用插件
(3)HelloWorld.vue頁(yè)面上使用
添加全局資源也可以不放在插件里面實(shí)現(xiàn),可以直接在main.js入口文件創(chuàng)建Vue實(shí)例前添加:
其他組件就可以通過(guò)this直接使用:
(1)核心區(qū)別
簡(jiǎn)單來(lái)說(shuō),插件就是指對(duì)Vue的功能的增強(qiáng)或補(bǔ)充。
(2)其他區(qū)別
一個(gè)Vue插件可以是一堆Vue組件的集合(插件干的事就是把內(nèi)部的組件幫你倒入到vue全局下),也可以是用來(lái)擴(kuò)展Vue功能的,比如 Vuex, Vue-Router。
測(cè)試完成,下面就要把的內(nèi)容打包發(fā)布到npm 上去,具體步驟可以參照
請(qǐng)簡(jiǎn)述什么是Vue插件的介紹就聊到這里吧,感謝你花時(shí)間閱讀本站內(nèi)容,更多關(guān)于vue插件有哪些、請(qǐng)簡(jiǎn)述什么是Vue插件的信息別忘了在本站進(jìn)行查找喔。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明:本文由河南新鄉(xiāng)捷東實(shí)業(yè)有限公司發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。