總結Vue第一天：簡單介紹、基本常用知識、輔助函式
總結Vue第一天：簡單介紹、基本常用知識、輔助函式
遇到不熟悉的可以先看一下官網，然後再看一下一些別人寫的優質博文
一、簡單介紹：
（1）vue.js ：本質就是一個js 核心類庫【跟咱使用的其他元件外掛而安裝他們】：
■ 安裝方式：
CDN引入【也是通過js標籤的src】
下載引入 【也是通過js標籤的src】
NPM安裝管理
■ 方式一：直接CDN引入
□ 你可以選擇引入開發環境版本還是生產環境版本
<!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
■方式二：下載和引入
開發環境https://vuejs.org/js/vue.js
生產環境https://vuejs.org/js/vue.min.js
■ 方式三：NPM安裝
後續通過webpack和CLI的使用，我們使用該方式。
❀ 學習過程一開始就是通過下載引入：
<script type="text/javascript" src="../js/vue.min.js"></script>
（2）小demo瞭解一下vue.js:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: goldenrod; } .line{ font-style:italic; } </style> </head> <body> <div id="app" >{{message}} <!-- <button @click="{{message + ''">+文字</button>--> <a :class="{'active':isActive,'line':isLine }">沒毛病</a> <!-- 封裝成一個getClass函式 --> <!-- <div class="tt" :class="getClass()">謝謝</div>--> <!-- <button @click="btnActive">變變變</button>--> <div class="tt" :class="getClass()">哈哈哈</div> </div> </body> <script type="text/javascript" src="../js/vue.min.js"></script> <script> let app= new Vue({ el: '#app', data: { message:'漂亮', isActive: true, isLine: true, active: 'active', line: 'line' }, methods: { btnActive: function () { this.isActive = !this.isActive; }, //物件 // getClass: function () { // return{active: this.isActive, line: this.line} // } //陣列 getClass: function () { return [this.active, this.line]; } } }); </script> </body> </html>
□ 閱讀script標籤中的程式碼，會發現建立了一個Vue物件。
建立Vue物件的時候，傳入了一些options：{}
□{}中包含了el屬性：該屬性決定了這個Vue物件掛載到哪一個元素上，很明顯，我們這裡是掛載到了id為app的元素上
{}中包含了data屬性：該屬性中通常會儲存一些資料
這些資料可以是我們直接自定義出來的，也可能是來自網路，從伺服器載入的。
（3）響應式：
■ “響應式”，是指當資料改變後，Vue 會通知到使用該資料的程式碼（例如這裡的介面的dom元素）。
■ 效果：就是在介面上可以直觀的看見-----資料改變，介面變成使用改變過的資料。
■ 原理：可以看一下官網+優質博文分析
（4）簡單瞭解一下vue的生命週期
二、基本常用的知識：
■ 插值操作 {{ }} 將值插入到我們模板的內容當中
■ 繫結屬性 v-bind （簡寫：）
■ 事件監聽 v-on （簡寫 @）
■ v-if、v-else-if、v-else 【v-show】、v-for
■ v-model 表單的雙向繫結
■ 條件判斷
■ 迴圈遍歷
■ 計算屬性 computed
原因：計算屬性會進行快取，如果多次使用時，計算屬性只會呼叫一次。
■ 監聽屬性 watch
■ 過濾屬性 filters
html 頁面的使用：引數 | 過濾函式名
1、繫結屬性 v-bind （簡寫：）☆ 通過繫結屬性（資料可以從vue例項中獲取）
（1）舉例：我們的圖片路徑、標籤的樣式、類選擇器等等不希望寫死，希望實現動態繫結，從vue例項中獲取資料：
（2）v-bind繫結class
■ 繫結class有兩種方式：
□ 物件語法
□ 陣列語法
● 繫結方式：物件語法
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
（和普通的類同時存在，並不衝突）
□我們可以利用v-bind:style來繫結一些CSS內聯樣式【跟繫結class差不多，只是要記得那種屬性有連字元- 要給它加單引號‘’】
2，事件監聽 v-on （簡寫 @）：常用的就是監聽點選事件【也可以監聽自定義事件】
□ 我們可以將事件指向表示式，也可以是一個在methods中定義的函式
● v-on:click可以寫成@click
□ 事件指向method 帶引數問題：
□ v-on修飾符：① .stop ② .prevent ③ .native ④ .once 等
3，v-if、v-else-if、v-else 【v-show】
(1) v-if、v-else-if、v-else
----快取問題：Vue在進行DOM渲染時，出於效能考慮，會盡可能的複用已經存在的元素，而不是重新建立新的元素。
-----如果我們在有輸入內容的情況下，切換了型別，我們會發現文字依然顯示之前的輸入的內容。
------解決：加上唯一的key屬性：
(2) v-show:
□ 當需要在顯示與隱藏之間切片很頻繁時，使用v-show (本質上就是使用了cloak)
□ 當只有一次切換時，通過使用v-if
（3）v-for 遍歷陣列、遍歷物件：
語法格式：v-for=(item, index) in items
4，v-model 雙向繫結的本質
（① 繫結input回顯value屬性=message ② 監聽輸入事件，同時事件指向表示式【dom中輸入的值賦值給message】）
<input type="text" v-model="message"> <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
① v-model：radio
② v-model：checkbox （單個勾選框：v-model即為布林值。當是多個複選框時，因為可以選中多個，所以對應的data中屬性是一個數組）
③v-model：select
■ v-model的修飾符：① lazy ② number ③ trim
5，計算屬性 computed
原因：計算屬性會進行快取，如果多次使用時，計算屬性只會呼叫一次。【快取作用】
--------- 使用計算屬性，可以讓我們的程式碼變得更加簡潔（將一大串的方法呼叫，封裝到計算屬性中去【計算屬性本質就是一個物件（省略了setter方法）】）
三、❀ 輔助函式
（1-1）響應式函式 （陣列更新檢測）
□ push()
□ pop()
□ shift()
□ unshift()
□ splice()
□ sort()
□ reverse()
（1-2）（物件更新檢測）
□ 使用Vue.set(object, propertyName, value) 或者 例項.$set(object, propertyName, value);
例如：Vue.set(this.stu，’love’，’sing’)；
□ 使用Object.assign( )
例如：this.stu = Object.assign({ }, this.stu, { name: ‘玉’， love：‘money’ })
（1-3）js 中的高階函式 map、filter、reduce：
□ filter：
filter的引數是一個回撥函式，回撥函式的引數（當前陣列的元素），要求回撥函式必須返回一個布林值，為true時，當前回撥函式的引數（即當前的元素）新增到內部陣列中，為false則過濾掉。
□ map：
map的引數是一個回撥函式，回撥函式的引數（當前陣列的元素），回撥函式的返回值作為內部陣列的元素。
□ reduce ：
reduce實現彙總，引數是一個回撥函式（上一次return的值preValue， 當前元素）和一個初始值，回撥函式的返回值作為preValue。