?vue基礎

---

#### <font color=pink>小知識(老陳vue)</font>

* 1、在node.js/npm相當于java中的maven(會在互聯(lián)網中下載包，需要哪些就下載哪些)

* 2、在vue組件內部有兩個數(shù)據(jù)，一個合適props，一個是data，這兩種數(shù)據(jù)的變化都會使界面更新

- props：是從父元素傳下來的只讀數(shù)據(jù)(不允許當前子元素被修改)

- data：是自己維護的可以更新和修改(可以被自己修改)

* 3、什么是組件：組件就是自定義的html標簽

#### <font color=red>自己百度小知識(菜鳥小蒙)</font>

### 比較雜

* 多重循環(huán)寫數(shù)據(jù) | 外面控制行 |里面控制列

- 頁面要數(shù)據(jù)get 頁面填數(shù)據(jù)是set

- 1、兩種注入的對象類型:引用ref、值value

- 2、p命名空間

- p：屬性名="值"

- p:屬性名-ref="bean的id"

- 3、兩種注入的方式

- <property/>

- <constructor-arg/>

- 4、三種Bean的創(chuàng)建方式

- 之間反射創(chuàng)建(new)

- 靜態(tài)工廠方法

- 實例工廠方法

- 5、生命周期管理

- <bean? init-method="" destory-method=""/>

- 6、v-bind：雙向綁定

- v-html：屬性綁定

- v-on：將當前時間綁定到當前的標簽

- v-on：dbclick

- once：只有第一次才能有效果

? ##### vuex管理狀態(tài)

? * mint-ui? ui組件庫

? * vue-lazyload 懶加載

? * better-scroll 滑動庫

? * eslint? 檢查語法是否規(guī)范

? ? ##### 組件創(chuàng)建期間的4個鉤子函數(shù)

? ? * 第一個生命周期函數(shù)，表示實例完全被創(chuàng)建之前，會執(zhí)行這個函數(shù) <font color=red>beforCreate</font>生命周期函數(shù)執(zhí)行的時候，<font color=red>data</font>和<font color=red>methods</font>中的數(shù)據(jù)還沒有被初始化。

? ? * 第二個生命周期函數(shù)，如果要調用methods中的方法，或者操作data中的數(shù)據(jù)，最早只能在created中才做

? ? * 第三個生命周期函數(shù)，表示模板已經在內存中編譯完成，但是尚未把模板渲染帶頁面中，在beforeMount執(zhí)行的時候，頁面中的元素沒有被真正替換過來，只是之前寫的一些模板字符串

? ? * 第四個生命周期函數(shù)，表示內存中的模板已經真實的掛載到頁面中，用戶已經可以看到渲染好的頁面，這個mounted是實例創(chuàng)建期間的最后一個生命周期函數(shù)，當執(zhí)行完mounted就表示，實例已經被完整創(chuàng)建好了，此時，如果沒有其他操作的話，這個實例就在靜靜地在內存中不動了

? ? * 第五個生命周期函數(shù)。表示界面還沒有被更新但是數(shù)據(jù)肯定被更新了當執(zhí)行beforeUpdate的時候頁面中顯示的數(shù)據(jù)還是舊的，此時data數(shù)據(jù)是最新的，頁面尚未和最新的數(shù)據(jù)保持同步

? ? * 第六個生命周期函數(shù)，updated事件執(zhí)行的時候，頁面和data數(shù)據(jù)已經保持同步，都是最新的。

? ? ? #### 什么是鉤子函數(shù)？

? ? ? * 百度百科是這樣解釋的：鉤子函數(shù)是window消息處理機制的一部分，通過設置"鉤子"，應用程序可以在系統(tǒng)對所有消息、時間進行過濾，訪問在正常情況下無法訪問的消息。鉤子函數(shù)本質是一段用以處理系統(tǒng)消息的程序，通過系統(tǒng)調用，把榻掛入系統(tǒng)。

? ? ? * <font color=red>鉤子函數(shù)：1、首先他是個函數(shù)，在系統(tǒng)觸發(fā)時被系統(tǒng)調用? ? 2、不是用戶自己觸發(fā)的鉤子函數(shù)的名稱是確定的，當小童消息觸發(fā)，自動回調用，</font>

? ? ? * 例如：react的componentWillUpdate函數(shù)，用戶只需要編寫componentWillUpdate的函數(shù)體，當組件狀態(tài)要更新是，系統(tǒng)就會條用componentWillUpdate，

? ? ? * <font color=red>常見的鉤子函數(shù)：react的生命周期，vue的生命周期函數(shù)</font>

? ? ? * beforeCreate：創(chuàng)建前

? ? ? * created：創(chuàng)建后

? ? ? * beforeMount：掛載前

? ? ? * mounted：掛載后

? ? ? * beforeDestroy：銷毀前

? ? ? * destroyed：銷毀后

? ? ? * beforeUpdate：更新前

? ? ? * update：更新后

---------------------------------------

#### (1).歷史介紹

* angular 09年，年份較早，一開始大家是拒絕?

* react 2013年, 用戶體驗好，直接拉到一堆粉絲

* vue 2014年,? 用戶體驗好

#### (2).前端框架與庫的區(qū)別?

* jquery 庫 -> DOM(操作DOM) + 請求

* art-template 庫 -> 模板引擎

* 框架 = 全方位功能齊全

? - 簡易的DOM體驗 + 發(fā)請求 + 模板引擎 + 路由功能

* KFC的世界里,庫就是一個小套餐, 框架就是全家桶

* 代碼上的不同

? - 一般使用庫的代碼，是調用某個函數(shù)，我們自己把控庫的代碼

? - 一般使用框架，其框架在幫我們運行我們編寫好的代碼

? ? - 框架:? 初始化自身的一些行為

? ? ? - 執(zhí)行你所編寫的代碼

? ? ? - 施放一些資源

#### (3).vue起步

* 1:引包

* 2:啟動 new Vue({el:目的地,template:模板內容});

* options

? * 目的地 el

? * 內容 template

? * 數(shù)據(jù) data? 保存數(shù)據(jù)屬性

? ? 數(shù)據(jù)驅動視圖

#### vue的文件介紹

#### (4).插值表達式

* {{ 表達式 }}

? - 對象 (不要連續(xù)3個{{ {name:'jack'} }})

? - 字符串 {{ 'xxx' }}

? - 判斷后的布爾值? {{? true }}

? - 三元表達式? {{ true?'是正確':'錯誤'? }}

* 可以用于頁面中簡單粗暴的調試

* 注意: 必須在data這個函數(shù)中返回的對象中聲明

#### (5).什么是指令

* 在vue中提供了一些對于頁面 + 數(shù)據(jù)的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示

? * 比如html頁面中的屬性 ```<div v-xxx ></div>``

* 比如在angular中 以ng-xxx開頭的就叫做指令

* 在vue中 以v-xxx開頭的就叫做指令

* 指令中封裝了一些DOM行為, 結合屬性作為一個暗號, 暗號有對應的值,根據(jù)不同的值，框架會進行相關DOM操作的綁定

#### (6).vue中常用的v-指令演示

* v-text:元素的InnerText屬性,必須是雙標簽 跟{{ }}效果是一樣的 使用較少

* v-html: 元素的innerHTML

* v-if : 判斷是否插入這個元素,相當于對元素的銷毀和創(chuàng)建

* v-else-if

* v-else

* v-show 隱藏元素? 如果確定要隱藏,? 會給元素的style加上display:none。是基于css樣式的切換

```javascript

v-text 只能用在雙標簽中

v-text 其實就是給元素的innerText賦值

v-html 其實就是給元素的innerHTML賦值

v-if 如果值為false,會留下一個<!---->作為標記，萬一未來v-if的值是true了，就在這里插入元素

如果有if和else就不需要單獨留坑了

如果全用上? v-if 相鄰v-else-if 相鄰 v-else 否則 v-else-if可以不用

v-if和v-else-if都有等于對應的值，而v-else直接寫

v-if家族都是對元素進行插入和移除的操作

v-show是顯示與否的問題

注意: 指令其實就是利用屬性作為標識符,簡化DOM操作,

? 看：v-model="xxx"

? v-model 代表要做什么? xxx代表針對的js內存對象

? 寫在那個元素上，就對哪個元素操作

```

#### (7).v-if和v-show的區(qū)別 (官網解釋)

`v-if` 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建。

`v-if` 也是**惰性的**：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。

相比之下，`v-show` 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。

一般來說，`v-if` 有更高的切換開銷，而 `v-show` 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 `v-show` 較好；如果在運行時條件很少改變，則使用 `v-if` 較好。

#### (8).v-bind使用

* 給元素的屬性賦值? <div id="{{變量}}"></div>

? - 可以給已經存在的屬性賦值 input value

? - 也可以給自定義屬性賦值 mydata

* 語法 在元素上 `v-bind:屬性名="常量||變量名"`

* 簡寫形式 `:屬性名="變量名"`

* ```html

? <div v-bind:原屬性名="變量"></div>

? <div :屬性名="變量">

? </div>

? ```

#### (9).v-on的使用

* 處理自定義原生事件的,給按鈕添加click并讓使用變量的樣式改變

* 普通使用? ```v-on:事件名="表達式||函數(shù)名"```

* 簡寫方式? ``` @事件名="表達式"```

#### 1-9知識點階段總結

* 如何啟動vue? : 1:引包 2:留坑 3:啟動(new Vue)?

? * options:? el/template/data函數(shù)

* 更便捷的操作DOM及數(shù)據(jù)? v-xxx指令

? * v-text/v-html/v-if/v-show/v-bind/v-on

? * v-bind綁定屬性值

? * v-on綁定事件

#### (10).v-model

* 雙向數(shù)據(jù)流（綁定）

? * 頁面改變影響內存(js)

? * 內存(js)改變影響頁面

#### (11).v-bind 和 v-model 的區(qū)別?

* `input v-model="name"`

? - 雙向數(shù)據(jù)綁定? 頁面對于input的value改變，能影響內存中name變量

? - 內存js改變name的值，會影響頁面重新渲染最新值

* `input :value="name"`

? - 單向數(shù)據(jù)綁定 內存改變影響頁面改變

* v-model: 其的改變影響其他? v-bind: 其的改變不影響其他

* v-bind就是對屬性的簡單賦值,當內存中值改變，還是會觸發(fā)重新渲染

#### (12).v-for的使用

* 基本語法 `v-for="item in arr"`

* 對象的操作 `v-for="item in obj"`

* 如果是數(shù)組沒有id

? * `v-for="(item,index) in arr" :class="index" `

* 各中v-for的屬性順序(了解)

? * 數(shù)組 item,index

? * 對象 value,key,index

##### 漂亮的列表

* class 是可變的

#### 關于對象內的this

* vue已經把以前this是window或者事件對象的問題搞定了

* methods和data本身是在同一個對象中的,所以在該對象中可以通過this.隨意取

* this.xxx 取data中的值, this.xxxMethod調methods中的函數(shù)

#### (13).局部組件的使用

渲染組件-父使用子組件

* 1: 創(chuàng)建子組件(對象)

? - `var Header = { template:'模板' , data是一個函數(shù),methods:功能,components:子組件們 } `

* 2: 在父組件中聲明,根屬性`components:{ 組件名:組件對象 }`

* 3: 在父組件要用的地方使用 `<組件名></組件名>`

? - 在不同框架中,有的不支持大寫字母，用的時候

? ? + 組件名 MyHeader

? ? + 使用 my-header

* 總結: 有父，聲子，掛子，用子

### （14）組件深入

---

#### 父子組件傳值(父傳子)

* 1:父用子的時候通過屬性Prop傳遞

* 2:子要聲明props:['屬性名'] 來接收

* 3:收到就是自己的了，隨便你用

? - 在template中 直接用

? - 在js中 this.屬性名 用

* 總結:父傳,子聲明,就是子的了

* 小補充: 常量傳遞直接用，變量傳遞加冒號

* 

#### 總結父傳子

* 父用子? ? 先聲子,掛子,用子

* 父傳子? ? 父傳子(屬性),子聲明(收),子直接用(就是自己的一樣)

#### 注冊全局組件

* 應用場景: 多出使用的公共性功能組件，就可以注冊成全局組件,減少冗余代碼

* 全局API `Vue.component('組件名',組件對象);`

#### 附加功能:過濾器&監(jiān)視改動

* filter

? * 將數(shù)據(jù)進行添油加醋的操作

? * 過濾器分為兩種

? ? * 1:組件內的過濾器(組件內有效)

? ? * 2:全局過濾器(所有組件共享)

? * 先注冊,后使用

? * 組件內 `filters:{ 過濾器名:過濾器fn }` 最終fn內通過return產出最終的數(shù)據(jù)

? * 使用方式是 `{{ 原有數(shù)據(jù) | 過濾器名? }}`

? * 需求

? ? * 頁面input框輸入字符串, 另一邊顯示其反轉的內容

? * 過濾器fn:

? ? * 聲明`function(data,argv1,argv2...){}`

? ? * 使用`{{ 數(shù)據(jù) | 過濾器名(參數(shù)1,參數(shù)2) }}`

* watch 監(jiān)視單個

* computed 監(jiān)視多個

#### 模塊化

* webpack命令

? `npm init -y`

? `npm install webpack@2.2.1 --save-dev --registry https://registry.npm.taobao.org`

* package.json文件

? `"scripts": {

? ? "test": "webpack ./main.js ./build.js"

? },`

* 命令行運行 `npm run test`

#### ES6模塊

* 導入和導出只能存在頂級作用域

* require引入是代碼執(zhí)行的時候才加載

* import 和export 都是提前加載 ，加載在代碼執(zhí)行之前

#### 箭頭函數(shù)和function

* 一方面箭頭函數(shù)是種簡寫形式

* 應用場景: 由于箭頭函數(shù)本身沒有this和arguments，通常用在事件類的回調函數(shù)上，讓其向上級function綁定this，而非事件對象

* 箭頭函數(shù)不可以作為構造函數(shù)

#### ES6函數(shù)簡寫

* 用在對象的屬性中

```javascript

fn3() { //干掉了:function,用在對象的屬性中

console.log(this);

},

```

#### key

* 使用子組件循環(huán)輸出一堆數(shù)據(jù)

* 不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。

* 建議v-for就寫，提升性能，避免vue運算,key就是記錄元素與dom間的位置關系

```html

<son v-for="(item,index) in persons" :key="index" ></son>

```

#### slot

* slot就是子組件里給DOM留下的坑

* <子組件>DOM</子組件>

* slot動態(tài)的DOM、props是動態(tài)的數(shù)據(jù)

#### 組件生命周期

* 需要頻繁的創(chuàng)建和銷毀組件

? - 比如頁面中部分內容顯示與隱藏，但是用的是v-if

* 組件緩存

? - 內置組件中<keep-alive>

? - 被其包裹的組件，在v-if=false的時候，不會銷毀，而是停用

? - v-if="true" 不會創(chuàng)建,而是激活

? - 避免頻繁創(chuàng)建組件對象的性能損耗

* 成對比較

? - created 和 beforeCreate

? ? + A 可以操作數(shù)據(jù) B 數(shù)據(jù)沒有初始化

? - mounted 和 beforeMount

? ? + A 可以操作DOM B 還未生成DOM

? - updated 和 beforeUpdate

? ? + A 可以獲取最終數(shù)據(jù) B 可以二次修改

? - 頻繁銷毀創(chuàng)建的組件使用內置組件<keep-alive></keep-alive>包裹

```javascript

activated(){? //激活的 keep-alive v-if="true"

console.log('activated')

},

deactivated(){? //停用的 keep-alive v-if="false"

console.log('deactivated')

},

beforeDestroy(){ //銷毀前 v-if="false"

console.log('beforeDestroy')

},

destroyed(){//銷毀后 v-if="false"

console.log('destroyed')

},

```

#### 獲取DOM元素

* 救命稻草, document.querySelector

* 1: 在template中標識元素 ref="xxxx"

* 2: 在要獲取的時候, this.$refs.xxxx 獲取元素

? - 創(chuàng)建組件,裝載DOM,用戶點擊按鈕

* ref在DOM上獲取的是原生DOM對象

* ref在組件上獲取的是組件對象

? - $el 是拿其DOM

? - 這個對象就相當于我們平時玩的this,也可以直接調用函數(shù)