vue.js/webpack/vue-cli/vuex知識點

------------------------------------------❀持續更新❀---------------------------------------------------------

第一章 vue基礎

vue的指令

01.v-cloak指令用法

使用v-clock解決插值表達式閃爍的問題（解決在網絡慢的情況下先出現了{{}}，再渲染數據的情況）

<style>
    [v-block]{
        display:none;
    }
</style>
<p v-clock>{{ msg }}</p>

02.v-cloak和v-text的區別

v-text沒有閃爍問題，但是會覆蓋元素中原本的內容

<p v-cloak>++++++++ {{ msg }} ----------</p>
<p v-text="msg">==================</p>

v-clock 會連同符號一起顯示： ++++++++ 123----------
v-text 會把等於號覆蓋只顯示msg: 123

03.什麼是雙向數據綁定，雙向綁定的使用場景

什麼是雙向數據綁定：

• 當數據發生變化的時候，視圖也就發生變化
• 當視圖發生變化的時候，數據也會跟着同步變化

雙向綁定的使用場景：
v-model是一個指令，限制在 <input>、<select>、<textarea>、 components（組件） 中使用

04.事件函數的調用，事件函數參數傳參

如果需要傳遞參數就使用say(),否則直接寫say更簡潔一些

如果事件綁定函數調用，那麼事件對象必須作爲最後一個參數顯示傳遞，並且事件對象的名稱必須是$event

05.事件修飾符

.stop 阻止冒泡
.prevent 阻止默認事件
.capture 添加事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回調
.once 事件只觸發一次

<!-- 使用  .stop  阻止冒泡，執行btnHandler不會連同div1Handler一起執行 -->
<div class="inner" @click="div1Handler">
  <input type="button" value="戳他" @click.stop="btnHandler">
</div>

<!-- 使用 .prevent 阻止默認行爲，不會再跳轉到百度頁面 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">跳轉百度</a>

<!-- 使用.capture 實現捕獲觸發事件的機制 -->
<!-- 點擊直接執行div1Handler，不會執行btnHandler -->
<div class="inner" @click.capture="div1Handler">
   <input type="button" value="戳他" @click="btnHandler">
</div>

<!-- 使用 .self 實現只有點擊當前元素時候，纔會觸發事件處理函數 -->
<!-- .self 只會阻止自己身上冒泡行爲的觸發，並不會真正阻止 冒泡的行爲 -->
<div class="inner" @click.self="div1Handler">
   <input type="button" value="戳他" @click="btnHandler">
</div>

<!-- 使用.once 只觸發一次事件處理函數，第一次點擊能阻止跳轉百度，第二次就不能了
<a href="http://www.baidu.com" @click.prevent.once="linkClick">跳轉百度</a>

06.常用按鍵修飾符

.enter => enter鍵
.tab => tab鍵
.delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right => 右

用法如下：

07.表單域修飾符用法

  <div id="app">
    <input type="text" v-model.number='age'>
    <input type="text" v-model.trim='info'>
    <input type="text" v-model.lazy='msg'>
    <div>{{msg}}</div>
    <button @click='handle'>點擊</button>
  </div>

 <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        age: '',
        info: '',
        msg: ''
      },
      methods: {
        handle: function(){
          //如果不使用修飾符，假如age是2，那麼打印結果爲213，變成字符串拼接了，加了修飾符結果爲：15
          // console.log(this.age + 13)
          
          // console.log(this.info.length)
        }
      }
    });
  </script>

trim：直白些就是當你在input 輸入框內輸入了多餘的空格，它能將你收尾的空格去除；
lazy：轉換成change事件之後，就是在輸入框失去焦點後才觸發事件，而不是每輸入一個字符就觸發一次；

08.自定義指令之獲取元素焦點

Vue.directive('focus', {
    inserted: function(el){
       // el表示指令所綁定的元素
       el.focus();
     }
 });

  <input type="text" v-focus>
  //這樣頁面一打開，輸入框就自動獲取焦點，不用再點擊一次input

09.數組相關API–變異方法/替換數組

1. 變異方法(修改原有數據，數據是響應式的，調用方法之後頁面的數組也會隨之發生變化)
   ⚫ push() ----向數組的末尾添加元素
   ⚫ pop() -----刪除數組中的最後一個元素
   ⚫ shift() ----刪除數組中的第一個元素
   ⚫ unshift() -----向數組的開頭添加元素
   ⚫ splice() ----去除數組中的指定數據
   ⚫ sort() ----數組排序
   ⚫ reverse() ----數組反轉

2. 替換數組(生成新的數組，不會影響原始數組，頁面展示的還是原始的，所以需要重新賦值才能發生變化，this.list = this.list.slice(0,2)😉
   ⚫ filter()
   ⚫ concat()
   ⚫ slice()

3. 修改響應式數據
   ⚫ Vue.set(vm.items, indexOfItem, newValue)
   ⚫ vm.$set(vm.items, indexOfItem, newValue)
   ① 參數一表示要處理的數組名稱
   ② 參數二表示要處理的數組的索引
   ③ 參數三表示要處理的數組的值

4. 案例：列表的增刪改

  <div id="app">
 	<label for="id">編號：</label>
	<input type="text" id="id" v-model='id' >
    <label for="name">名稱： </label>
    <input type="text" id="name" v-model='name'>
    <button @click='handle' >增加</button>
  </div>
  <tbody>
     <tr :key='item.id' v-for='item in books'>
         <td>{{item.id}}</td>
         <td>{{item.name}}</td>
           <a href="" @click.prevent='toEdit(item.id)'>修改</a>
           <a href="" @click.prevent='deleteBook(item.id)'>刪除</a>
         </td>
    </tr>
  </tbody>

   var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        books: [{
          id: 1,
          name: '三國演義',
          date: 2525609975000
        },{
          id: 2,
          name: '水滸傳',
          date: 2525609975000
        },{
          id: 3,
          name: '紅樓夢',
          date: 2525609975000
        }]
      },
      methods: {
        handle: function(){
            // 添加圖書
            var book = {};
            book.id = this.id;
            book.name = this.name;
            this.books.push(book)
        },
        toEdit: function(id){
          // 根據ID查詢出要編輯的數據
          var book = this.books.filter(function(item){
            return item.id == id;
          });
          // 把獲取到的信息填充到表單
          this.id = book[0].id;
          this.name = book[0].name;
          // 編輯圖書，就是根據當前的ID去更新數組中對應的數據
            this.books.some((item) => {
              if(item.id == this.id) {
                item.name = this.name;
                // 完成更新操作之後，需要終止循環
                return true;
              }
        },
        deleteBook: function(id){
          // 刪除圖書
          // 根據id從數組中查找元素的索引
          // var index = this.books.findIndex(function(item){
          //   return item.id == id;
          // });
          // 根據索引刪除數組元素
          // this.books.splice(index, 1);
          // -------------------------
          // 方法二：通過filter方法進行刪除
          this.books = this.books.filter(function(item){
            return item.id != id;
          });
        }
      },
    });

10. 組件命名方式

⚫ 短橫線方式

Vue.component('my-component', { /* ... */ })

⚫ 駝峯方式

Vue.component('MyComponent', { /* ... */ })

第二章 webpack

01.webpack指令

• 刪除全局webpack-cli：
  npm uninstall -g webpack-cli
• 刪除本地webpack-cli:
  npm uninstall webpack-cli
• 刪除全局webpack
  npm uninstall -g webpack
• 刪除本地webpack
  npm uninstall webpack
• 全局安裝webpack:（官網不推薦）
  npm install --global webpack
• 本地安裝webpack:
  npm install --save-dev webpack
• 本地安裝webpack -cli (使用 webpack 4+ 版本)
  npm install --save-dev webpack-cli
• 檢查webpack是否安裝成功,出現版本號爲成功。
  如果是全局安裝則：webpack -v
  如果是本地安裝則：node_modules.bin\webpack -v (注意是斜杆的方向)

02.webpack益處

webpack是一個流行的前端項目構建工具(打包工具)，可以解決當前web開發中所面臨的困境。
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能，從而讓程序員把工作的重心放到具體的功能實現上，提高了開發效率和項目的可維護性。

web開發中所面臨的困境：

第三章 vue-cli（vue腳手架）

01.安裝與查看版本號

安裝：

npm install -g @vue/cli

查看版本號：

vue -V

02.創建vue項目的方式一：基於交互式命令行

1.在你想要放置項目的路徑下打開cmd,執行命令：

vue create 項目名稱

2.執行完命令後會出現兩個選項，點擊上下箭頭可進行切換，然後回車進入下一步

• default：默認的幫你搭配好功能的，一鍵創建完畢；
• Manually：手動選擇安裝自己所需的功能，這裏我選擇手動安裝，好自由搭配自己想要的；
  
  3.上圖展示的是供你選擇的功能，打*號的代表安裝，空的括號代表不安裝，點擊空格鍵選中你需要的，然後回車下一步吧
  
  4.接下來會讓你選擇路由模式，這裏我選擇哈希模式的路由，所以執行命令n
  
  5.然後需要再選擇下ESLint的語法版本，這裏推薦選擇標準版，如下
  
  6.默認保存時進行ESLint語法校驗，所以選擇第一項
  
  7.再然後會詢問你， Babel, ESLint等等配置文件是單獨創建還是全部歸於package.json中，爲了更好的維護配置文件，選擇第一個選項
  
  8.最後，提示你是否將你剛剛選擇的配置保存爲一個模板，這樣下次你就不用再重複這些步驟，直接使用模版即可，y:是 n:否
  
  
  9.下載完成之後，執行命令cd vue_proj_01進入到項目路徑下，然後再執行命令npm run serve運行項目
  
  
  10.成功創建之後，你只需要在瀏覽器打開 http://localhost:8080/，就可以看到你剛創建的項目啦
  

03.創建vue項目的方式二：基於圖形化界面

介紹一種更爲直觀的創建vue項目的方法：
1.打開命令窗口執行命令 vue ui 會在瀏覽器打開一個創建項目的圖形化界面

2.不介紹了，我發現這個項目創建只能默認在C盤，我不願意，所以結束。。。。

04.分析項目結構

05.vue腳手架自定義配置

1.在項目的根目錄創建文件：vue.config.js
2.配置你所需要的配置項，例如端口號，啓動項目時是否自動打開網頁等等，如下所示：

3.更多配置內容，例如配置項目代理等請移步官網

第四章 vuex基礎

01.使用 Vuex 統一管理狀態的好處

① 能夠在 vuex 中集中管理共享的數據，易於開發和後期維護
② 能夠高效地實現組件之間的數據共享，提高開發效率
③ 存儲在 vuex 中的數據都是響應式的，能夠實時保持數據與頁面的同步

02. Vuex 的基本使用

1. 安裝 vuex 依賴包

npm install vuex --save

2. 導入 vuex 包

 import Vuex from 'vuex' 
 Vue.use(Vuex) 

3. 創建 store 對象

 const store = new Vuex.Store({ 
     // state 中存放的就是全局共享的數據 
     state: { count: 0 } 
 }

4. 將 store 對象掛載到 vue 實例中

new Vue({ 
  el: '#app', 
  render: h => h(app), 
  router, 
  // 將創建的共享數據對象，掛載到 Vue 實例中 
  // 所有的組件，就可以直接從 store 中獲取全局的數據了 
  store 
}) 

03. Vuex 的核心概念: State / Mutation / Action /Getter

(1) State 提供唯一的公共數據源，所有共享的數據都要統一放到 Store 的 State 中進行存儲。

 // 創建store數據源，提供唯一公共數據 
  const store = new Vuex.Store({ 
    state: { count: 0 } 
  }) 

組件訪問 State 中數據的第一種方式：

this.$store.state.全局數據名稱

組件訪問 State 中數據的第二種方式：

// 1. 從 vuex 中按需導入 mapState 函數 
import { mapState } from 'vuex' 

通過剛纔導入的 mapState 函數，將當前組件需要的全局數據，映射爲當前組件的 computed 計算屬性：

// 2. 將全局數據，映射爲當前組件的計算屬性 
computed: { 
  ...mapState(['count']) 
}

(2)Mutation 用於變更 Store中 的數據。
① 只能通過 mutation 變更 Store 數據，不可以直接操作 Store 中的數據
② 通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監控所有數據的變化。

 // 定義Mutation   
const store = new Vuex.Store({     
 state: { 
      	count: 0    
       },    
 mutations: {     
   add(state) { 
        // 變更狀態 
        state.count++     
    }    
 }  
 })       

 // 觸發mutation 
  methods: { 
    handle1() { 
      // 觸發 mutations 的第一種方式 
      this.$store.commit('add') 
    } 
  }

可以在觸發 mutations 時傳遞參數：

 const store = new Vuex.Store({     
 state: { 
      count: 0    
 },   
 mutations: {    
    addN(state, step) { 
        // 變更狀態 
        state.count += step     
    }   
}  })

 // 觸發mutation 
  methods: { 
    handle2() { 
      // 在調用 commit 函數， 
      // 觸發 mutations 時攜帶參數 
      this.$store.commit('addN', 3) 
    } 
  }    

this.$store.commit() 是觸發 mutations 的第一種方式，觸發 mutations 的第二種方式：

// 1. 從 vuex 中按需導入 mapMutations 函數 
import { mapMutations } from 'vuex' 

通過剛纔導入的 mapMutations 函數，將需要的 mutations 函數，映射爲當前組件的 methods 方法：

// 2. 將指定的 mutations 函數，映射爲當前組件的 methods 函數 
methods: { 
  ...mapMutations(['add', 'addN']) 
} 

(3)Action:用於處理異步任務
如果通過異步操作變更數據，必須通過 Action，而不能使用 Mutation，但是在 Action 中還是要通過觸發 Mutation 的方式間接變更數據。

 // 定義 Action   
 const store = new Vuex.Store({    
  // ...省略其他代碼    
   mutations: { 
      add(state) {         
      	state.count++       
      }     
    },   
   actions: {       
       addAsync(context) {        
      	  setTimeout(() => {           
        	context.commit('add')  
               }, 1000 }   
        } 
 })

 // 觸發 Action 
  methods: { 
    handle() { 
      // 觸發 actions 的第一種方式 
      this.$store.dispatch('addAsync') 
    } 
  }

觸發 actions 異步任務時攜帶參數：

// 定義 Action   
const store = new Vuex.Store({    
 // ...省略其他代碼     
	 mutations: { 
	      addN(state, step) {       
	        state.count += step    
	           }   
	},     
	actions: {     
     addNAsync(context, step) {    
           setTimeout(() => {         
                    context.commit('addN', step)        
            }, 1000) 
            }      
    } 
 })      

  // 觸發 Action 
  methods: { 
    handle() { 
      // 在調用 dispatch 函數， 
      // 觸發 actions 時攜帶參數 
      this.$store.dispatch('addNAsync', 5) 
    } 
  } 

this.$store.dispatch() 是觸發 actions 的第一種方式，觸發 actions 的第二種方式：

// 1. 從 vuex 中按需導入 mapActions 函數 
import { mapActions } from 'vuex' 

通過剛纔導入的 mapActions 函數，將需要的 actions 函數，映射爲當前組件的 methods 方法：

// 2. 將指定的 actions 函數，映射爲當前組件的 methods 函數 
methods: { 
  ...mapActions(['addASync', 'addNASync']) 
}

(4) Getter 用於對 Store 中的數據進行加工處理形成新的數據
① Getter 可以對 Store 中已有的數據加工處理之後形成新的數據，類似 Vue 的計算屬性。
② Store 中數據發生變化，Getter 的數據也會跟着變化。

 // 定義 Getter 
  const store = new Vuex.Store({ 
    state: { 
      count: 0 
    }, 
    getters: { 
      showNum: state => { 
        return '當前最新的數量是【'+ state.count +'】' 
      } 
    } 
  })

使用 getters 的第一種方式：

this.$store.getters.名稱

使用 getters 的第二種方式：

import { mapGetters } from 'vuex' 
 
computed: { 
  ...mapGetters(['showNum']) 
}