2020-06-18 Vue

自定义指令

通过vue来封装指令（directive），从而去扩展标签原本的功能。

语法：

全局指令
- 语法：Vue.directive(指令名称,指令的配置对象)
- 指令名称：定义的时候不需要v-，但是使用的时候加上v-
- 指令的配置对象：{inserted(el){}} 等使用该指令的元素渲染完毕后（dom生成后）执行
  - 在dom生成后才可为该dom扩展功能
  - el 就是使用指令的dom对象
局部指令
- 语法：new Vue({directives:{指令名称:指令的配置对象,...}})
- 指令名称：定义的时候不需要v-，但是使用的时候加上v-
- 指令的配置对象：{inserted(el){}} 等使用该指令的元素渲染完毕后（dom生成后）执行
  - 在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标签实现自动获取焦点功能 -->
      <input type="text" v-focus="{h:100,w:100}">
    </div>
    <script src="./vue.js"></script>
    <script>
      // 全局指令
      // Vue.directive('focus',{
      //   // inserted 函数使用该指令的元素渲染完毕后执行
      //   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>

补充：

指令的参数怎么接收 inserted(el,binding){} binding就是指令信息

计算属性

作用：

根据data当中的数据，经过一定的逻辑处理，得到一项新数据（计算属性）。
当data中的数据发生变化的时候，计算属性也会更新。
计算属性也是响应式数据，改变的时候也会驱动视图的更新。
当多次获取计算属性的时候，处理逻辑不会重新执行，因为有缓存。

定义：

语法：new Vue({computed:{ 书写计算属性 }})
书写计算属性：
- myMsg () { // 处理逻辑 return ‘处理后的数据’ }
使用：和data中的数据一致

代码：

<!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>
      <!-- 通过计算属性来优化 -->
      <hr>
      <h1>{{reverseMsg}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        // 数据
        data: {
          message: 'hi vue'
        },
        methods: {},
        // vue的配置选项：computed
        // 计算属性
        computed: {
          // 属性名 计算属性的名称
          // 属性值 计算属性的处理函数
          // reverseMsg : function () {
          reverseMsg () {
            // 依赖data中的数据，进行一定的逻辑处理，得到一个新数据
            const newMsg = this.message.split('').reverse().join('')
            // 必须将新数据返回出去
            return newMsg
          }
          // reverseMsg 就是数据名称，在模板中使用data中数据一致
        }
      })
    </script>
  </body>
</html>

总结：

使用场景：当你依赖data里面的数据，经过较为复杂的逻辑处理，得到一个新的数据，此时可以使用计算属性来实现。

computed和methods区别

<!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: {
          // 反转字符的函数  模板中使用{{reverseFn()}}
          reverseFn () {
            console.log('reverseFn')
            return this.message.split('').reverse().join('')
          }
          // 每使用一次，会调用一次函数，重新执行内部逻辑，得到数据
        },
        computed: {
          // 反转字符计算属性 模板中使用{{reverseMsg}}
          reverseMsg () {
            console.log('reverseMsg')
            return this.message.split('').reverse().join('')
          }
          // 当多次调用的时候，之后执行一次逻辑，或走缓存
        }
      })
    </script>
  </body>
</html>

总结：

函数也可以实现数据逻辑处理得到新数据，但是多没使用一次执行一次逻辑，性能不优。
计算属性，在多次使用的时候，会走缓存，性能更好。
将来对数据进行（较为复杂）逻辑处理，建议使用计算属性。

接口规则-Resetful

目标：了解一种接口定义规范resetful

接口规范：如何定义接口地址，请求方式，传参方式，对应不同的请求操作行为。

具体规则：

接口地址	请求方式	操作行为
/brands	GET	查询所有列表
/brands/:id	GET	查询单个详情 `/brands/1`
/brands	POST	添加，提交的参数在请求体
/brands/:id	DELETE	删除 `/brands/1`
/brands/:id	PUT	修改 `/brands/1` + 请求体{name,cTime} 全部修改
/brands/:id	PATCH	修改 `/brands/1` + 请求体{name} 个别修改

这个表格可以作为接口调用的参考。

09-插件-axios

axios是什么：

是一个js插件，专注于网络通信（前端的xhr）。
它可以在前端浏览器使用，也可以在后台nodejs环境中使用。
如果在前端使用它是基于：xhr + promise 实现的

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 响应报文对象（响应状态行+响应头+响应主体）
      //   // res.data 就是响应主体（返回的数据）
      //   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)
      // })



      // - 添加操作
      // 第二个参数：请求体传参对象
      // 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('删除成功')
      // })



      // - 修改操作
      // 第二个参数：请求体传参对象
      // 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('修改成功')
      // })

      // - 带查询参数
      // 1. 自己手动在地址栏拼接?后的键值对  ?id=2&name=宝马
      // 2. 可以传对象提交多个筛选条件 
      // 3. get()中第二个参数可以用来提交参数对象  {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>