02

vue基礎-次日

01-反饋

姓名 意見或建議
*** 老師棒棒噠
*** 慢慢慢慢，信息量太大，求練習時間
*** 老師,您的筆記可不能夠寫的再詳細一點,初學Vue,可能一個很小的是知識點都很難理解,謝謝老師 *** 對於v-for理解誤差,剛哥,之後咱div裏面放h標籤好很差,總是放個P隔着屏幕都能聞到,啊 還有就是爲剛哥的漢語拼音操心發愁啊O(∩_ *** 周老師,ES6中的函數this指向不清楚.何時是指向window,何時是指向其餘的狀況呢? 謝謝~ *** 視頻雜音太大

• 筆記問題
• v-for 指令 加強標籤的功能 讓標籤具有遍歷的功能
• ES6中的函數-->箭頭函數-->實際上是沒有this-->使用的是當前定義的上一級的this
• 當前調用時 上一級的this指向誰箭頭函數內的this指向誰
• 插耳機 02-回顧
• vue是一個js框架
• 適合作spa類型系統
• mvvm框架 減小dom操做 數據驅動視圖 數據雙向綁定
• 使用vue有三個選項 new Vue({}) el data methods
• 插值表達式 {{}} 指令
• v-text v-html
• v-if v-show
• v-on 簡寫 @
• v-bind 簡寫 ：
• v-for
• v-model 語法糖 -> :value @input

03-vue基礎-v-bind-綁定class

• 語法： v-bind:class=「數據」 :class="數據"
• 數據：能夠是對象 能夠是數組
• 對象：數據格式--》{'類名'：‘布爾值’} 鍵就是類名 布爾值 true 添加 false 移除
• 數組：數據格式--》['類名'，‘類名’] 添加 加一項 移除 去除這一項

04-vue基礎-v-bind-綁定style

• 語法： v-bind:style=「數據」 :style="數據"
• 數據：能夠是對象 能夠是數組
• 對象：數據格式--》 {css屬性:css屬性的值，...}
• 數組：數據格式--》[{css屬性的鍵值對},{css屬性的鍵值對}]

05-vue基礎-v-cloak

• 是在視圖未渲染的時候去隱藏視圖使用插值表達式的地方
• 可是須要本身配合 寫一段樣式 ` [v-cloak]{ display: none; }

06-vue基礎-v-once

• 做用：使用該指令的元素只會渲染一次

07-表格案例-靜態頁面

• 瞭解結構
• 分析需求
  • 列表展現
  • 刪除
  • 添加
  • 搜索

08-表格案例-列表展現

• 步驟
  • 引入vue
  • 初始化實例
  • 指定數據 [{},{}]
  • 在tr的位置進行遍歷 使用的是 v-for ：key指定的是 item.id
  • 在tr內部去經過插值表達式 輸出內容

09-表格案例-添加品牌

• 步驟
  • 綁定添加事件
  • 綁定v-model數據 輸入框
  • 把輸入的內容 組織對象 push 追加list數據
  • 清空輸入框內容

10-表格案例-刪除品牌

• 步驟
  • 綁定事件 主要 阻止瀏覽器行爲
  • 獲取到索引- 經過id去查找（findIndex((item,i)=>item.id===ID)） this.list.splice(index,1)
  • 補充：提示沒有數據 v-if="list.length===0"

11-表格案例-其餘效果演示

• 處理時間格式
• 自動獲取焦點 給標籤加上 autofocus 屬性可是這是H5的方式 使用vue的方式來實現
• 搜索

12-過濾器-文檔分析

• 本身分析：做用是把原始數據按照必定的規則轉換成新格式的數據
• 在插值表達式但是使用 在v-bind的屬性也是可使用
• 使用語法：{{message | 過濾器}}

13-過濾器-全局過濾器

• 一個VM實例管理一個區域，可是可使用多個VM管理多個區域
• 定義的全局過濾器 能夠在任何視圖使用
• 若是 vm 管理的區域想使用 過濾器 須要在實例以前來定義過濾器
• 語法：Vue.filter('過濾器的名稱',function(管道符前的結果){//邏輯 return '返回結果'})

14-過濾器-局部過濾器

• 若是定義的是局部的過濾器 只能在當前定義過濾器的實例管理的視圖中使用
• 在 new Vue({}) 選項對象定義一個 選項 filters 指向對象 來定義過濾器
• key:function(v){}
• key的名字就是過濾器的名稱
• 函數就是處理函數必定須要返回值
• 函數中的v是管道符前的執行結果

15-過濾器-參數和串聯使用

• 串聯語法 {{message|upper|其餘過濾器}}
• 傳參 {{message|upper|其餘過濾器(參數) }}

16-表格案例-用過濾器轉換日期

• 本身去轉換日期
• 使用momnet.js

17-vue基礎-ref操做dom

• 給這個元素加一個屬性 ref="dom的標識"
• 在函數中 vm.$refs 的對象 你的dom就掛載在該對象
• 語法：this.$refs.dom的標識 去操做dom

18-自定義指令-全局指令

語法：Vue.directive('指令名稱',{inserted:function(){ //實現指令的功能 } }) 
複製代碼

19-自定義指令-局部指令

/* 
選項  directives:{key:value} 
key就是指令的名稱
value就是配置指令的對象 {inserted:function(el){//實現指令功能}}
*/
複製代碼

20-表格案例-用指令獲取焦點

Vue.directive('focus',{
    inserted(el){
      el.focus()
    }
  })
複製代碼

21-計算屬性-文檔分析

• 使用場景：當前插值表達式邏輯複雜是 使用 計算屬性 實現
• 計算屬性：會依賴data中的數據，經過必定的邏輯生成一個新數據

22-計算屬性-基本用法

• 在Vue({}) 選項中 computed 選項
• computed:{} 對象是用來定 若干個計算屬性的
• key:value組成
• key 計算屬性名稱
• value 處理邏輯的函數 函數的返回值就是計算屬性的值

23-計算屬性-methods方法區別

• 視圖更新時，操做的不是計算屬性的數據，那麼計算屬性不會再次計算 函數會再次執行
• 當屢次調用的時候 計算屬性會緩存 函數屢次調用

24-表格案例-商品搜索功能分析

• 獲取輸入的搜索關鍵字 v-model綁定
• 根據搜索關鍵字 去 data中的list 查找
• 使用計算屬性 去依賴list數據 獲取符合條件的數據也是一個數組
• 默認是全部的數據都符合條件 一開始就可使用 篩選後的數組

25-表格案例-回顧ES6高階函數

• Array.filter() 篩選數組中符合條件的選項返回一個新數組

• const arr = [1,2,3,4,5]
  // 篩選 大於 3 的選項  組成一個新數組
  // filter 也會遍歷
  const newArr = arr.filter((item,i)=>{
      return item > 3
  })
  
  // ES6的函數
  // findIndex()  
  // padStart(10,'-')  padEnd(10,'-')
  複製代碼

• String.includes() 判斷字符串中是否包含某段字符

• const str = 'abcd'
  const flag = str.includes('ab')
  複製代碼

26-表格案例-計算屬性實現搜索

見案例