vue封裝js

1. Vue 封裝自己的插件

效果圖：

1：先創建組件，並創建index.js文件

tosi.vue文件

index.js文件

2：在main.js裡面進行掛載注冊

3：進行調用

2. 1、了解vuejs課程介紹

https://www.bilibili.com/video/BV15741177Eh?p=2
這個課程大概分為以下幾個部分
一、邂逅vuejs
從為什麼要學習，有什麼特點，到安裝vuejs,體驗vuejs，以及學習MVVM架構。
二、vue基礎語法
基礎語法很多，會詳細講。
三、組件化開發
學vue必須學習組件化開發。
四、vue cli詳解
webpack、vue cli腳手架的介紹
五、vue-router
前端路由
六、vuex詳解
進行狀態管理的
前六個是基礎知識
七、網路封裝
主要是axios的介紹使用
八、項目實戰

3. 請教如何在vue中引入自己寫的js文件

比如說我在src/util下面有一個rem.js的文件，寫成自執行函數
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth / 12) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);然後在main.js中引用import './util/rem'，然後每個路內由都運行起來容了

4. vue.js 文件都有什麼作用

1. VueJS 目的：
   

VueJs的產生核心是為了解決：

a: 解決數據綁定的問題，

b: vue框架產生的主要目的是版為了開發大型單頁面應用權，

c: 它還支持組件化，也就是可以將頁面封裝成若干個組件，採用積木式進行編程，這樣使頁面復用性達到最高（支持組件化）。

2.VueJS 特性：

I: MVVM模式（數據變數（model）發生改變 視圖（view）也改變， 視圖（view）改變，數據變數（model）也發生改變）

5. vue是什麼 怎麼用

Vue.js是一套構建用戶界面的漸進式框架，Vue 採用自下向上增量開發的設計，其核心庫只關注視圖層，易於上手，同時vue完全有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。

1、MVVM即model，view，viewmodel，它是數據驅動模式，即所有的一切通過操作數據來進行，而盡量避免操作dom樹。

(5)vue封裝js擴展閱讀：

vue在web開發、網站製作中的優勢

1、據綁定：vue會根據對應的元素，進行設置元素數據，通過輸入框，以及get獲取數據等多種方式進行數據的實時綁定，進行網頁及應用的數據渲染 。

2、組件式開發：通過vue的模塊封裝，它可以將一個web開發中設計的各種模塊進行拆分，變成單獨的組件，然後通過數據綁定，調用對應模版組件，同時傳入參數，即可完成對整個項目的開發。

3、簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

6. 支持復雜場景的vue和react集成引用的JS插件

眾所周知，React更純粹，Vue做的封裝更多，所以大多數的難度都是集中在react的組件引用vue組件的過程中

請參考 https://github.com/devilwjp/vuereact-for-vuecli3-demo

請參考 https://github.com/devilwjp/vuereact-for-cra-demo

由於react hooks的取名規范是use開頭，所以將use開頭的方法全部修改成了apply開頭，老的use開頭方法仍然有效

在react組件中使用vue組件，如果要使用vue的sync修飾，使用 sync <Object>

在react組件中使用vue的組件

在react組件中，向vue組件傳遞具名插槽和作用域插槽，以及綁定自定義事件，以及v-model應用
react本身並不支持v-model，所以需要通過 model的value和setter也不需要變化

在react組件動態引用vue組件，類似vue的<component />

與react不同，vue有全局注冊組件的功能，使每個組件不需要再單獨引入
將vue全局組件的id作為參數傳入applyVueInReact中，或者將id作為component屬性的值傳入VueContainer中
示例：在react中使用全局的vue版本element-ui的DatePicker

在Vue的組件中使用React組件

在Vue組件中，向React組件傳遞具名插槽和作用域插槽，以及綁定自定義事件
由於React沒有插槽的概念，所有都是以屬性存在，Vue的具名插槽和作用域插槽會被轉化為React的屬性，其中作用域插槽會轉換成render props的方式
並且Vue組件的事件也會被轉化成React的屬性

比如react版本的antd的Card組件，在react中的使用示例如下

react版本的antd，在vue組件中使用的示例如下

作用：使得所有的Vue組件可以使用rex的狀態管理
對工具包開啟rex狀態管理，這個場景一般存在於以React為主的項目中，為了使Vue組件也可以共享到rex，需要在項目的入口文件引入applyRex方法（整個項目應該只引一次），將rex的store以及rex的context作為參數傳入（或者至少在rex的Provider高階組件引入的地方使用applyRex方法）

React組件連接rex的方式這里就不再做介紹了，應該使用react-rex的connect方法
這里介紹Vue組件如何使用rex，工具包盡可能的實現了vue組件使用vuex的方式去使用rex，通過vm.$rex可以在組件實例里獲取到rex狀態管理

作用：使得所有的Rex組件可以使用Vuex的狀態管理
對工具包開啟vuex狀態管理，這個場景一般存在於以Vue為主的項目中，為了使React組件也可以共享到vuex，需要在項目的入口文件引入applyVuex方法（整個項目應該只引一次），將vuex的store作為參數傳入

類似react-rex的connect方法，在React組件中使用，由於vuex的關鍵字比rex多，所以將參數改成了對象，包含了mapStateToProps、mapCommitToProps、mapGettersToProps、mapDispatchToProps，每個都是一個純函數，返回一個對象（和rex的connect使用方式完全一致）

在React的router里懶載入Vue組件

在Vue的router里懶載入React組件

每個通過applyVueInReact的的vue組件，以及通過applyReactInVue的react組件，都可以收到一個data-passed-props的屬性，這個屬性可以幫助你不做任何包裝的，被之後再次使用applyVueInReact或applyReactInVue的組件收到全部的屬性（由於是跨框架透傳，原生的透傳方式並不會自動做相應的封裝和轉換）

由於在每一次跨越一個框架進行組件引用時，都會出現一層包囊，這個包囊是以div呈現，並且會被特殊屬性標注
React->Vue，會在vue組件的dom元素外包囊一層標識data-use-vue-component-wrap的div
Vue->React，會在react組件的dom元素外包囊一層標識__use_react_component_wrap的div
如果引發樣式問題，可以全局對這些標識進行樣式修正

7. vue中靜態js文件怎麼打包

1.問題描述

在項目開發中,當我們通過npm run build打包之後將文件放在伺服器上時通常會出現圖片失效問題,控制台中提示某個圖片沒有找到（404錯誤），這些圖片可以是以src引入的圖片， 也可以是css中定義的背景圖片。圖片能否顯示與你的靜態資源文件存在位置和引入

的路徑直接相關，下面是我的其中一個項目的文件存放以及路徑書寫方式！

2.解決方法之一

靜態資源static存放位置放在src目錄下

以上是一種解決圖片失效問題的方法，當然，如果非要把static靜態資源目錄放在與src同級目錄下，也是有解決方法，例如通過導入圖片的方式（本人未實踐），可以自行嘗試！

8. 47道基礎的VueJS面試題(附答案)

1、什麼是MVVM框架？它適用於哪些場景？

MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。

在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。

2、active- class是哪個組件的屬性？

它是 vue-router模塊的 router-link組件的屬性。

3、如何定義Vue- router的動態路由？

在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。

4、如何獲取傳過來的動態參數？

在組件中，使用$router對象的 params.id，即 $route.params.id 。

5、vue- router有哪幾種導航鉤子？

有3種。

第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。

第二種是組件內的鉤子。

第三種是單獨路由獨享組件。

6、mint-ui是什麼？如何使用？

它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和JavaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。

7、V-model是什麼？有什麼作用？

v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。

8、Vue.js中標簽如何綁定事件？

綁定事件有兩種方式。

第一種，通過v-on指令， 。

第二種，通過@語法糖， input@ click= doLog()/>。

9、vuex是什麼？如何使用？在哪種功能場景中使用它？

vuex是針對 Vue. js框架實現的狀態管理系統。

為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。

使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。

10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？

自定義指令包括以下兩種。

它有如下鉤子函數。

鉤子函數的參數如下。

11、至少說出vue.js中的4種指令和它們的用法。

相關指令及其用法如下。

12、Vue-router是什麼？它有哪些組件？

它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。

13、導航鉤子有哪些？它們有哪些參數？

導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。

全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

單個路由獨享鉤子有 beforeEnter。

組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它們有以下參數。

14、Vue.js的雙向數據綁定原理是什麼？

具體步驟如下。

（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。

（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。

15、請詳細說明你對Vue.js生命周期的理解。

總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

當使用組件的kep- alive功能時，增加以下兩個周期。

Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。

16、請描述封裝Vue組件的作用過程。

組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。

使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。

17、你是怎樣認識vuex的？

vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。

18、Vue- loader是什麼？它的用途有哪些？

它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。

用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。

19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。

assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。

20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？

具體步驟如下。

（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。

（2）導入需要用到的頁面（組件）。

（3）將導入的組件注入uejs的子組件的 components屬性中。

（4）在 template的視圖中使用自定義組件。

21、談談你對vue.js的 template編譯的理解。

簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。

詳細步驟如下。

（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。

（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。

22、說一下Vue.js中的MVVM模式。

MVVM模式即 Model- View- ViewModel模式。

Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。

ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。

DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。

23、v-show指令和v-if指令的區別是什麼？

v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。

24、如何讓CSS只在當前組件中起作用？

在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。

25、如何創建vue.js組件？

在vue.js中，組件要先注冊，然後才能使用。具體代碼如下

26、如何實現路由嵌套？如何進行頁面跳轉？

路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。

首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。

27、ref屬性有什麼作用？

有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。

注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。

28、Vue. js是什麼？

Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。

使用MVVM模式有幾大好處。

（2）組件化開發

（3）指令系統

（4）Vue2.0開始支持虛擬DOM。

但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。

30、描述vue.js的特點。

Vue. js有以下特點。

31、在vue.js中如何綁定事件？

通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。

32、請說明 組件的作用。

當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。

當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。

33、axios是什麼？如何使用它？

axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。

用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。

34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？

當調用post方法表示在發送post非同步請求。

35、sass是什麼？如何在ue中安裝和使用？

sass是一種CSS預編譯語言安裝和使用步驟如下。

（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。

（2）在 webpack. config. js中配置sass載入程序。

（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。

36、如何在 Vue. js中循環插入圖片？

對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。

代碼如下：

9. vuejs 怎麼引入第三方js

在 Vue.js 中使用第三方庫的方式有：
1.全局變數
在項目中添加第三方庫的最簡單方式是講其作為一個全內局變數, 掛載容到 window 對象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
這種方式不適合於服務端渲染, 因為服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯.

2.在每個文件中引入
另一個簡單的方式是在每一個需要該庫的文件中導入:
MyComponent.vue
import _ from 'lodash';

export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}