一 .Vue基礎知識點

1.1 - 歷史介紹

angular 09年，年份較早，一開始大家是拒絕
react 2013年, 用戶體驗好，直接拉到一堆粉絲
vue 2014年, 用戶體驗好
在爲AngularJS工作之後，Vue的作者尤雨溪開發出了這一框架。他聲稱自己的思路是提取Angular中爲自己所喜歡的部分，構建出一款相當輕量的框架。[8]Vue最早發佈於2014年2月。作者在Hacker News、Echo JS與Reddit的*/r/javascript*版塊[9]發佈了最早的版本。一天之內，Vue就登上了這三個網站的首頁。[10]Vue是Github上最受歡迎的開源項目之一。同時，在JavaScript框架/函數庫中，Vue所獲得的星標數已超過React，並高於Backbone.js、Angular 2、jQuery等項目。

1.1.1 - Vue官網上的視頻內容，快速搭建Vue

我們的網站變得更加強大，多虧了有JavaScript，我們已經把很多的傳統服務端代碼放到了瀏覽器中，這樣就產生了成千上萬行的JavaScript代碼，它們連接了各式各樣的HTML 和css文件，但缺乏正規的組織形式。這也是爲什麼越來越多的開發者使用JavaScript框架，諸如 Angular，react，vue這樣的，Vue是一款友好的，多用途且高性能的JavaScrip框架，它能夠幫助你創建可維護性和可測試性更強的代碼庫，Vue是漸進式的javaScript框架，也就是說，如果你已經有一個現滿足你的各式需求，和其他前端框架一樣，Vue允許你將一個網頁分割成可複用的組件，每個組件都包含屬於自己的HTML，CSS，JavaScript以來渲染網頁中相應的地方。接下來我們就親自動手感受一下Vue，構建一個商品庫存的頁面。介紹一些核心概念，正是這些東西讓Vue如此實用，

和許多Javascript應用一樣，我們從網頁中需要展示的數據開始：
使用Vue的起步非常簡單：

我們引入Vue的庫，創建一個vue的實例，
然後通過應用的ID嵌入到我們的根元素中，
el：是元素element的縮寫,
我們還要將數據放入一個對象，
並且將X 修改爲一個表達式,用雙大括號括起來，
如你所見，它已經工作起來了，在頁面中已經渲染出來了。
在頁面中顯示內容爲：Boots are in stock.

<div id="app">
    //<h2>X are in stock.</h2>
	  <h2> {{ product }} are in stock.</h2>
</div>

<script src ="https://unpkg.com/vue"></script>

<script>  
    const app= new Vue({
        el:'#app',
        data:{
            product:'Boots'
        }
    })
    var product = 'Boots'
</script>

很酷，上面的界面已經渲染出來了，但是
Vue的魔力在數據變更時纔會出現：
如果我們打開控制檯，在console那裏輸入，
改變product的值：app.product = 'Socks'
注意在product的值改變的同時，Vue會自動更新了我們的HTML，見圖一
這是因爲Vue是響應式的，也就是說當我們的數據變更時，Reactive，
vue會幫你更新所有，網頁中用到它的地方，除了字符串 vue對其它類型的數據也是如此，

    
現在我們修改

所以我們把上面的data中的，簡單的商品字符串格式，變成一個商品數組試試看：
然後我們將標籤:<h2> 改爲一個無序列表,再爲數組中的每個商品，創建一個列表項，使用Vue的V-for指令,讓每個商品都擁有各自的列表項，
如你所看到的，就會出現列表了。

<div id="app">
    
	//<h2>X are in stock.</h2>
	//<h2> {{ product }} are in stock.</h2>
    
    <ul>
    	<li v-for="product in products"></li>
    </ul>
</div>

<script src ="https://unpkg.com/vue"></script>

<script>  
    const app= new Vue({
        el:'#app',
        data:{
         // product:'Boots'
            product:[
                'Boots',
                'Jacket',
                'Hiking Socks'
            ]
        }
    })
    var product = 'Boots'
</script>

不過這還不夠有說服力：
現在我們先從空列表開始：然後從一個實際的API獲取我們的商品信息，
這個API 是從某個數據庫獲取來的，
當應用被創建時，我們會從這個API獲取最新的商品信息，
這就是你要從這裏獲取的全部
我們獲取商品列表，並把它們更新到數據中

這樣，如你所看到的，在我們網頁中，
各項表項展示了該API返回的對象：
好吧，這還不是常人能讀懂的樣子，所以我們來改變一下它的展示方式
<div id="app">   
    <ul>
    	<li v-for="product in products"></li>
    </ul>
</div>

<script src ="https://unpkg.com/vue"></script>

<script>  
    const app= new Vue({
        el:'#app',
        data:{
         // product:'Boots'
            product:[ ]
        },
        created (){
           // 這個API 是從某個數據庫獲取來的，
            fetch('https://api.myjson.com/bins/74l63')
              .then(response =>response.json())
              .then(json =>{
                //我們獲取商品列表，並把它們更新到數據中
                this.products = json.products
            })
        }
    })
    var product = 'Boots'
</script>

好吧，這還不是常人能讀懂的樣子，所以我們來改變一下它的展示方式,
我們將打印出其數量和名稱,下面修改後，好了，這樣打印出來的效果非常好：

<div id="app">   
    <ul>
    	<li v-for="product in products">
            {{product.quantity}} {{product.name}}
        </li>
    </ul>
</div>

<script src ="https://unpkg.com/vue"></script>

<script>  
    const app= new Vue({
        el:'#app',
        data:{
         // product:'Boots'
            product:[ ]
        },
        created (){
           // 這個API 是從某個數據庫獲取來的，
            fetch('https://api.myjson.com/bins/74l63')
              .then(response =>response.json())
              .then(json =>{
                //我們獲取商品列表，並把它們更新到數據中
                this.products = json.products
            })
        }
    })
    var product = 'Boots'
</script>

我們可能需要特別留意，數量爲零的項目：
所以我們添加一個 <SPAN>
寫入文字 OUT OF OF STOCK （out of stock 已沒貨，沒庫存（s do k））
這個區域會在項目數量爲零的時候出現
這裏我們用到了 v-if 指令
因爲我們的JACKET 數量爲零，它賣完了

<div id="app">   
    <ul>
    	<li v-for="product in products">
            {{product.quantity}} {{product.name}}
			<span v-if="product.quantity === 0">
                - OUT OF STOCK
             </span>
        </li>
    </ul>
</div>

<script src ="https://unpkg.com/vue"></script>

<script>  
    const app= new Vue({
        el:'#app',
        data:{
         // product:'Boots'
            product:[ ]
        },
        created (){          
            fetch('https://api.myjson.com/bins/74l63')
              .then(response =>response.json())
              .then(json =>{     
                this.products = json.products
            })
        }
    })
    var product = 'Boots'
</script>

如果我們想要打印出
列表中商品的總數該怎麼辦：
我們需要創建一個名爲TOTALPRODUCTS 的計算屬性,
它會返回我們所有商品的數量總和,
也許你對JavaScript的 reduce 不熟悉，它在這裏用來把每個商品的數量加在一起

如你所看到的， 在我們的瀏覽器中，
它已經把總數量準確的加起來了

<div id="app">   
    <ul>
    	<li v-for="product in products">
            {{product.quantity}} {{product.name}}
			<span v-if="product.quantity === 0">
                - OUT OF STOCK
             </span>
        </li>
    </ul>

<h2>Total Inventory:{{ totalProducts }}</h2>
</div>

<script src ="https://unpkg.com/vue"></script>

<script>  
    const app= new Vue({
        el:'#app',
        data:{         
            product:[ ]
        },
        
        computed:{
            totalProducts(){
                return this.products.reduce((sum,product) =>{
                    return sum + product.quantity
			})
            }
        }
        
        created (){          
            fetch('https://api.myjson.com/bins/74l63')
              .then(response =>response.json())
              .then(json =>{     
                this.products = json.products
            })
        }
    })
    var product = 'Boots'
</script>

現在我將要在瀏覽器中像你展示：Vue的chrome 插件，
03：47 分

1.2 - 前端框架與庫的區別?

jquery 庫 -> DOM(操作DOM) + 請求
art-template 庫 -> 模板引擎
框架 = 全方位功能齊全
- 簡易的DOM體驗 + 發請求 + 模板引擎 + 路由功能
KFC的世界裏,庫就是一個小套餐, 框架就是全家桶
代碼上的不同
- 一般使用庫的代碼，是調用某個函數，我們自己把控庫的代碼
- 一般使用框架，其框架在幫我們運行我們編寫好的代碼
  - 框架: 初始化自身的一些行爲
    - 執行你所編寫的代碼
    - 施放一些資源

1.3 - vue起步

1:引包
2:啓動 new Vue({el:目的地,template:模板內容});
options
- 目的地 el
- 內容 template
- 數據 data 保存數據屬性
  
  數據驅動視圖

1.4 - vue的文件指令介紹

1.4.1 - 插值表達式(兩個大括號)

{{ 表達式 }}
- 對象 (不要連續3個{{ {name:‘jack’} }})
- 字符串 {{ ‘xxx’ }}
- 判斷後的布爾值 {{ true }}
- 三元表達式 {{ true?‘是正確’:‘錯誤’ }}
可以用於頁面中簡單粗暴的調試
注意: 必須在data這個函數中返回的對象中聲明

1.4.2 - 什麼是指令

在vue中提供了一些對於頁面 + 數據的更爲方便的輸出,這些操作就叫做指令, 以v-xxx表示
- 比如html頁面中的屬性 ```
  ``
比如在angular中以ng-xxx開頭的就叫做指令
在vue中以v-xxx開頭的就叫做指令
指令中封裝了一些DOM行爲, 結合屬性作爲一個暗號, 暗號有對應的值,根據不同的值，框架會進行相關DOM操作的綁定

1.4.3 - Vue中常用的v-指令演示

v-text:元素的InnerText屬性,必須是雙標籤跟{{ }}效果是一樣的使用較少
v-html: 元素的innerHTML
v-if : 判斷是否插入這個元素,相當於對元素的銷燬和創建
v-else-if
v-else
v-show 隱藏元素如果確定要隱藏, 會給元素的style加上display:none。是基於css樣式的切換
在官網上找，很對指令：
https://cn.vuejs.org/v2/api/#v-model

 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內存對象
  寫在那個元素上，就對哪個元素操作

  
  v-if：標籤顯示或不顯示
v-else:
v-else-if:
v-show：隱藏、顯示
v-bind:強制數據綁定
v-model:雙向數據綁定
v-for：遍歷
v-on:綁定事件監聽

1.4.4 - v-if 和 v-show的區別 (官網解釋)

v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。

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

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

1.4.5 - v-bind使用

給元素的屬性賦值
- 可以給已經存在的屬性賦值 input value
- 也可以給自定義屬性賦值 mydata
語法在元素上 v-bind:屬性名="常量||變量名"
簡寫形式 :屬性名="變量名"

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

1.4.6 - v-on的使用

處理自定義原生事件的,給按鈕添加click並讓使用變量的樣式改變
普通使用 v-on:事件名="表達式||函數名"
簡寫方式 @事件名="表達式"

1.4.7 - 知識點階段總結

如何啓動vue : 1:引包 2:留坑 3:啓動(new Vue)
- options: el/template/data函數
更便捷的操作DOM及數據 v-xxx指令
- v-text/v-html/v-if/v-show/v-bind/v-on
- v-bind綁定屬性值
- v-on綁定事件

1.4.8 - v-model

雙向數據流（綁定）
- 頁面改變影響內存(js)
- 內存(js)改變影響頁面

1.4.9 - v-bind 和 v-model 的區別?

input v-model="name"
- 雙向數據綁定頁面對於input的value改變，能影響內存中name變量
- 內存js改變name的值，會影響頁面重新渲染最新值
input :value="name"
- 單向數據綁定內存改變影響頁面改變
v-model: 其的改變影響其他 v-bind: 其的改變不影響其他
v-bind就是對屬性的簡單賦值,當內存中值改變，還是會觸發重新渲染

1.4.10 - v-for的使用

基本語法 v-for="item in arr"
對象的操作 v-for="item in obj"
如果是數組沒有id
- v-for="(item,index) in arr" :class="index"
各中v-for的屬性順序(瞭解)
- 數組 item,index
- 對象 value,key,index

漂亮的列表

class 是可變的

1.4.11 - 關於對象內的this

vue已經把以前this是window或者事件對象的問題搞定了
methods和data本身是在同一個對象中的,所以在該對象中可以通過this.隨意取
this.xxx 取data中的值, this.xxxMethod調methods中的函數

1.5 - 局部組件的使用

渲染組件-父使用子組件

1: 創建子組件(對象)
- var Header = { template:'模板' , data是一個函數,methods:功能,components:子組件們 }
2: 在父組件中聲明,根屬性components:{ 組件名:組件對象 }
3: 在父組件要用的地方使用 <組件名></組件名>
- 在不同框架中,有的不支持大寫字母，用的時候
  - 組件名 MyHeader
  - 使用 my-header
總結: 有父，聲子，掛子，用子

1.6 - 組件深入

1.6.1 - 父子組件傳值(父傳子)

1:父用子的時候通過屬性Prop傳遞
2:子要聲明props:[‘屬性名’] 來接收
3:收到就是自己的了，隨便你用
- 在template中直接用
- 在js中 this.屬性名用
總結:父傳,子聲明,就是子的了
小補充: 常量傳遞直接用，變量傳遞加冒號

總結父傳子

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

###1.6.2註冊全局組件

應用場景: 多出使用的公共性功能組件，就可以註冊成全局組件,減少冗餘代碼
全局API Vue.component('組件名',組件對象);

1.7 - Vue常用附加知識點

1.7.1 - 附加功能:過濾器&監視改動

filter
- 將數據進行添油加醋的操作
- 過濾器分爲兩種
  - 1:組件內的過濾器(組件內有效)
  - 2:全局過濾器(所有組件共享)
- 先註冊,後使用
- 組件內 filters:{ 過濾器名:過濾器fn } 最終fn內通過return產出最終的數據
- 使用方式是 {{ 原有數據 | 過濾器名 }}
- 需求
  - 頁面input框輸入字符串, 另一邊顯示其反轉的內容
- 過濾器fn:
  - 聲明function(data,argv1,argv2...){}
  - 使用{{ 數據 | 過濾器名(參數1,參數2) }}
watch 監視單個
computed 監視多個

1.7.2 - 模塊化

webpack命令
npm init -y
npm install [email protected] --save-dev --registry https://registry.npm.taobao.org
package.json文件
"scripts": { "test": "webpack ./main.js ./build.js" },
命令行運行 npm run test

1.7.3 - ES6模塊

導入和導出只能存在頂級作用域
require引入是代碼執行的時候才加載
import 和export 都是提前加載，加載在代碼執行之前

1.7.4 - 箭頭函數和function

一方面箭頭函數是種簡寫形式
應用場景: 由於箭頭函數本身沒有this和arguments，通常用在事件類的回調函數上，讓其向上級function綁定this，而非事件對象
箭頭函數不可以作爲構造函數

1.7.5 - ES6函數簡寫

用在對象的屬性中

fn3() { //幹掉了:function,用在對象的屬性中
				console.log(this);
},

1.7.6 - key

使用子組件循環輸出一堆數據
不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。
建議v-for就寫，提升性能，避免vue運算,key就是記錄元素與dom間的位置關係

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

1.7.7 - slot

slot就是子組件裏給DOM留下的坑
<子組件>DOM</子組件>
slot動態的DOM、props是動態的數據

1.7.8 - 組件生命週期

需要頻繁的創建和銷燬組件
- 比如頁面中部分內容顯示與隱藏，但是用的是v-if
組件緩存
- 內置組件中
- 被其包裹的組件，在v-if=false的時候，不會銷燬，而是停用
- v-if=“true” 不會創建,而是激活
- 避免頻繁創建組件對象的性能損耗
成對比較
- created 和 beforeCreate
  - A 可以操作數據 B 數據沒有初始化
- mounted 和 beforeMount
  - A 可以操作DOM B 還未生成DOM
- updated 和 beforeUpdate
  - A 可以獲取最終數據 B 可以二次修改
- 頻繁銷燬創建的組件使用內置組件包裹

	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')
	},

1.7.9 - 獲取DOM元素

救命稻草, document.querySelector
1: 在template中標識元素 ref=“xxxx”
2: 在要獲取的時候, this.$refs.xxxx 獲取元素

創建組件,裝載DOM,用戶點擊按鈕

ref在DOM上獲取的是原生DOM對象
ref在組件上獲取的是組件對象
- $el 是拿其DOM
- 這個對象就相當於我們平時玩的this,也可以直接調用函數

1.8 - Vue小總結

總結:
 * Vue是一個漸進式的JS框架
 * 漸進式:本身實現的功能有限,只要引入相關的包或者是插件,就可以實現更多的功能
 * Vue借鑑了React和angular
 * Vue 不支持 IE8 及以下版本，因爲 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。
 * 
 * 
 * MVVM
 * M:model----數據模型
 * V:-----視圖
 * VM:----Vue的實例對象
 * 數據發生改變,視圖會發生相應的變化,中間是通過Vue的實例來完成的
 * 
 * Vue開發(編寫代碼)
 * 步驟(流程):
 
 * 1.安裝Vue相關的包(相關的文件)

 * 2.安裝三種方式:

 *  1) - 直接通過BootCDN引入
 *  在線方式
 * <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

 *  2) - 直接下載Vue的相關文件,引入vue.js文件
 *  在www.github.com中搜索Vue,然後找到對應的相關的文件,找master分支,直接下載壓縮包
 *  在該壓縮包中找dist目錄,裏面找vue.js文件,直接在自己的開發的html文件中引入即可

 *  3) - 下載腳手架的方式,直接可以在內部進行Vue的相關的開發(2的版本和3的版本)
 * 
 * 
 * DHTML----動態頁面

1.9 - Vue的配置裏可以寫幾種類型：

寫容器：el
寫數據：data
寫監聽：watch
寫方法：methods
計算屬性：computed

拎着蝸牛跑的殼兒

發佈了19 篇原創文章 · 獲贊 86 · 訪問量 8萬+

私信關注

Vue知識點系列一基礎知識總結