2020-06-18 Vue

自定義指令

通過vue來封裝指令（directive）甘有，從而去擴展標簽原本的功能酗电。

語法：

全局指令
- 語法：Vue.directive(指令名稱,指令的配置對象)
- 指令名稱：定義的時候不需要v-适袜，但是使用的時候加上v-
- 指令的配置對象：{inserted(el){}} 等使用該指令的元素渲染完畢后（dom生成后）執(zhí)行
  - 在dom生成后才可為該dom擴展功能
  - el 就是使用指令的dom對象
局部指令
- 語法：new Vue({directives:{指令名稱:指令的配置對象,...}})
- 指令名稱：定義的時候不需要v-，但是使用的時候加上v-
- 指令的配置對象：{inserted(el){}} 等使用該指令的元素渲染完畢后（dom生成后）執(zhí)行
  - 在dom生成后才可為該dom擴展功能
  - el 就是使用指令的dom對象

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 需求：v-focus指令來為該input標簽實現(xiàn)自動獲取焦點功能 -->
      <input type="text" v-focus="{h:100,w:100}">
    </div>
    <script src="./vue.js"></script>
    <script>
      // 全局指令
      // Vue.directive('focus',{
      //   // inserted 函數(shù)使用該指令的元素渲染完畢后執(zhí)行
      //   inserted (el) {
      //     // el 使用該指令的DOM
      //     // 獲取焦點
      //     // 對dom擴展任意功能
      //     el.style.height = '200px'
      //     el.focus()
      //   }
      // })

      const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        // 局部 定義自定義指令
        directives: {
          // 屬性名：指令的名稱
          // 屬性值：指令配置對象
          focus: {
            inserted (el, binding) {
              // binding 指令的信息對象
              // 其中有一個 value 就是指令的值
              el.style.width = binding.value.w + 'px'
              el.style.height = binding.value.h + 'px'
              el.focus()
            }
          }
        }
      })
    </script>
  </body>
</html>

補充：

指令的參數(shù)怎么接收 inserted(el,binding){} binding就是指令信息

計算屬性

作用：

根據(jù)data當中的數(shù)據(jù)骡澈，經(jīng)過一定的邏輯處理罚勾，得到一項新數(shù)據(jù)（計算屬性）。
當data中的數(shù)據(jù)發(fā)生變化的時候托启，計算屬性也會更新宅倒。
計算屬性也是響應式數(shù)據(jù)，改變的時候也會驅動視圖的更新屯耸。
當多次獲取計算屬性的時候拐迁，處理邏輯不會重新執(zhí)行蹭劈，因為有緩存。

定義：

語法：new Vue({computed:{ 書寫計算屬性 }})
書寫計算屬性：
- myMsg () { // 處理邏輯 return ‘處理后的數(shù)據(jù)’ }
使用：和data中的數(shù)據(jù)一致

代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <!-- 邏輯復雜线召，可讀性差铺韧，違背初心（使用簡單的js表達式） -->
      <h1>{{ message.split('').reverse().join('') }}</h1>
      <!-- 通過計算屬性來優(yōu)化 -->
      <hr>
      <h1>{{reverseMsg}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        // 數(shù)據(jù)
        data: {
          message: 'hi vue'
        },
        methods: {},
        // vue的配置選項：computed
        // 計算屬性
        computed: {
          // 屬性名 計算屬性的名稱
          // 屬性值 計算屬性的處理函數(shù)
          // reverseMsg : function () {
          reverseMsg () {
            // 依賴data中的數(shù)據(jù)，進行一定的邏輯處理缓淹，得到一個新數(shù)據(jù)
            const newMsg = this.message.split('').reverse().join('')
            // 必須將新數(shù)據(jù)返回出去
            return newMsg
          }
          // reverseMsg 就是數(shù)據(jù)名稱哈打，在模板中使用data中數(shù)據(jù)一致
        }
      })
    </script>
  </body>
</html>

總結：

使用場景：當你依賴data里面的數(shù)據(jù)，經(jīng)過較為復雜的邏輯處理讯壶，得到一個新的數(shù)據(jù)料仗，此時可以使用計算屬性來實現(xiàn)。

computed和methods區(qū)別

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <h1>{{reverseFn()}}</h1>
      <h1>{{reverseFn()}}</h1>
      <h1>{{reverseFn()}}</h1>
      <h1>{{reverseMsg}}</h1>
      <h1>{{reverseMsg}}</h1>
      <h1>{{reverseMsg}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          message: 'hi vue'
        },
        methods: {
          // 反轉字符的函數(shù)  模板中使用{{reverseFn()}}
          reverseFn () {
            console.log('reverseFn')
            return this.message.split('').reverse().join('')
          }
          // 每使用一次伏蚊，會調(diào)用一次函數(shù)立轧，重新執(zhí)行內(nèi)部邏輯，得到數(shù)據(jù)
        },
        computed: {
          // 反轉字符計算屬性 模板中使用{{reverseMsg}}
          reverseMsg () {
            console.log('reverseMsg')
            return this.message.split('').reverse().join('')
          }
          // 當多次調(diào)用的時候躏吊，之后執(zhí)行一次邏輯氛改，或走緩存
        }
      })
    </script>
  </body>
</html>

總結：

函數(shù)也可以實現(xiàn)數(shù)據(jù)邏輯處理得到新數(shù)據(jù)，但是多沒使用一次執(zhí)行一次邏輯比伏，性能不優(yōu)平窘。
計算屬性，在多次使用的時候凳怨，會走緩存瑰艘，性能更好。
將來對數(shù)據(jù)進行（較為復雜）邏輯處理肤舞，建議使用計算屬性紫新。

接口規(guī)則-Resetful

目標：了解一種接口定義規(guī)范resetful

接口規(guī)范：如何定義接口地址，請求方式李剖，傳參方式芒率，對應不同的請求操作行為。

具體規(guī)則：

接口地址	請求方式	操作行為
/brands	GET	查詢所有列表
/brands/:id	GET	查詢單個詳情 `/brands/1`
/brands	POST	添加篙顺，提交的參數(shù)在請求體
/brands/:id	DELETE	刪除 `/brands/1`
/brands/:id	PUT	修改 `/brands/1` + 請求體{name,cTime} 全部修改
/brands/:id	PATCH	修改 `/brands/1` + 請求體{name} 個別修改

這個表格可以作為接口調(diào)用的參考偶芍。

09-插件-axios

axios是什么：

是一個js插件，專注于網(wǎng)絡通信（前端的xhr）德玫。
它可以在前端瀏覽器使用匪蟀，也可以在后臺nodejs環(huán)境中使用。
如果在前端使用它是基于：xhr + promise 實現(xiàn)的

axios的下載：

文檔 https://www.kancloud.cn/yunye/axios/234845
資源 https://unpkg.com/axios/dist/axios.min.js

axios的使用：

查詢所有
查詢單個
添加操作
刪除操作
修改操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script src="./axios.min.js"></script>
  <script>
      // - 查詢所有
      // axios.get('http://localhost:3000/brands').then(res=>{
      //   // res 響應報文對象（響應狀態(tài)行+響應頭+響應主體）
      //   // res.data 就是響應主體（返回的數(shù)據(jù)）
      //   console.log(res.data)
      // }).catch(err=>{
      //   // 錯誤對象
      //   console.log(err)
      // })


      // - 查詢單個
      // axios.get('http://localhost:3000/brands/2').then(res=>{
      //   console.log(res.data)
      // }).catch(err=>{
      //   console.log(err)
      // })



      // - 添加操作
      // 第二個參數(shù)：請求體傳參對象
      // axios.post('http://localhost:3000/brands',{
      //   name: '奧拓',
      //   cTime: new Date()
      // }).then(res=>{
      //   console.log('添加成功')
      // })



      // - 刪除操作
      // axios.delete('http://localhost:3000/brands/4').then(res=>{
      //   console.log('刪除成功')
      // })



      // - 修改操作
      // 第二個參數(shù)：請求體傳參對象
      // axios.patch('http://localhost:3000/brands/3',{
      //   name: '奧拓'
      // }).then(res=>{
      //   console.log('修改成功')
      // })

      // axios.put('http://localhost:3000/brands/3',{
      //   name: '奧迪',
      //   cTime: new Date()
      // }).then(res=>{
      //   console.log('修改成功')
      // })

      // - 帶查詢參數(shù)
      // 1. 自己手動在地址欄拼接?后的鍵值對  ?id=2&name=寶馬
      // 2. 可以傳對象提交多個篩選條件 
      // 3. get()中第二個參數(shù)可以用來提交參數(shù)對象  {params:{更多篩選條件}}


      // json-server提供模糊查詢  字段_like
      axios.get('http://localhost:3000/brands',{
        params:{
          name_like: '奧'
        }
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err)
      })

  </script>
</body>

</html>