vue常用特性总结

程序员Better
402 阅读4分钟

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

表单域修饰符

  1. number：转化为数值
  2. trim：去掉开始和结尾的空格
  3. lazy：将input事件切换为change事件，可以设置input失去焦点的时候触发
 <input type="text" v-model.number="number">
 <input type="text" v-model.trim="trim">
 <input type="text" v-model.lazy="msg">

inserted：被绑定元素插入父节点时调用
举例:当页面加载时，该元素将获得焦点


Vue.directive('focus', {
  
  inserted: function (el) {
    
    el.focus()
  }
})

    <input v-focus>

3.1 使用场景

模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
例子:如果要将一个字符串翻转,在插值表达式中写数据的处理逻辑会让模板过重且难以维护

computed: {
      reversedMessage(){
        return this.message.split('').reverse().join('')
      }
    }

<div>    {{reversedMessage}}</div>

计算属性与方法的区别

  • 计算属性是基于它们的依赖进行缓存的
  • 方法不存在缓存
<div>{{reversedMessage}}</div>
    <div>{{reversedMessage}}</div>
    <div>{{reversedString()}}</div>
    <div>{{reversedString()}}</div>

methods: {
      
      reversedString(){
        console.log('method')
        return this.message.split('').reverse().join('')
      }
    },
    computed: {
      reversedMessage(){
        console.log('computed')
        return this.message.split('').reverse().join('')
      }
    }

4.1 侦听器的使用场景

一般用于异步或者开销较大的操作
watch 中的属性 一定是data 中 已经存在的数据
Watch 中的属性不能自定义

名:<input type="text" v-model="fristname">
姓:<input type="text" v-model="lastname">
{{fullname}}

  watch: { 
  
      fristname(value) {
        this.fullname = `${value} ${this.lastname}`
      },
      lastname(value) {
        this.fullname = `${this.fristname} ${value} `
      }
    }

上面的列子也能用计算属性实现

 fullname() {
        return `${this.fristname} ${this.lastname} `
      }

侦听器处理异步的案例:输入用户名调用接口验证用户用户名是否可用

用户名: <span><input type="text" v-model.lazy="usename"></span><span>{{tip}}</span>

 methods: {
     
      checkName(usename) {
        
        setTimeout (()=>{
       this.tip=  usename === 'admin' ? "该用户名已经存在" :'用户名可以使用'
        },100)
      }
    },
 watch: {
   usename(val) {
     this.checkName(val)
     this.tip='正在验证'
      }
    }

格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等

impicture_20210817_161359.png 定义过滤器:
一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

全局定义

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  
})

使用

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

案例:将日期格式化为YYY-MM-DD格式


function dateFormat(date, format) {
    if (typeof date === "string") {
        var mts = date.match(/(\/Date\((\d+)\)\/)/);
        if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
        }
    }
    date = new Date(date);
    if (!date || date.toUTCString() == "Invalid Date") {
        return "";
    }
    var map = {
        "M": date.getMonth() + 1, 
        "d": date.getDate(), 
        "h": date.getHours(), 
        "m": date.getMinutes(), 
        "s": date.getSeconds(), 
        "q": Math.floor((date.getMonth() + 3) / 3), 
        "S": date.getMilliseconds() 
    };

    format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
        var v = map[t];
        if (v !== undefined) {
            if (all.length > 1) {
                v = '0' + v;
                v = v.substr(v.length - 2);
            }
            return v;
        } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
}

父组件向子组件传递内容:

impicture_20210817_161421.png

v-slot详解
子组件用法保持不变，父组件中


<template>
  <child>
   <!--默认插槽-->
   <template v-slot>
     <div>默认插槽</div>
   </template>
   <!--具名插槽-->
   <template #header>
     <div>具名插槽</div>
   </template>
   <!--作用域插槽-->
   <template #footer="slotProps">
     <div>
      {{slotProps.testProps}}
     </div>
   </template>
  <child>
</template>
  1. 匿名插槽
  2. 具名插槽
  3. 作用域插槽
  • 父组件对子组件加工处理
  • 既可以复用子组件的slot，又可以使slot内容不一致
  • 使用:
    子组件模板中,元素上有一个类似props传递数据给组件的写法msg="xxx.
    插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。 如果父组件为这个插槽提供了内容，则默认的内容会被替换掉

axios官方文档

axios主要特征:

  • 基于promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据
    使用方式


axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
  function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    
  }));

常用API

axios(config)


axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])


axios('/user/12345');

某个请求的响应包含以下信息

{
  
  data: {},

  
  status: 200,

  
  statusText: 'OK',

  
  headers: {},

   
  config: {},
 
  
  
  
  request: {}
}

项目中使用的例子:

getInfo() {
      console.log(666)
      axios({
        url: url.getDetailGoodsInfo,
        method: 'post',
        data: {
          goodsId: this.goodsID,
        },
      })
        .then((response) => {
          console.log(response)
          response.data.code === 200 && response.data.message
            ? (this.goodsInfo = response.data.message)
            : Toast('服务器错误，数据取得失败')
          console.log(this.goodsInfo)
        })
        .catch((error) => {
          console.log(error)
        })
    },

配置默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

  1. 请求拦截器:在请求发生之前设置一些信息

  2. 响应拦截器:在获取数据之前给数据做一些加工处理


axios.interceptors.request.use(function (config) {
    
    return config;
  }, function (error) {
    
    return Promise.reject(error);
  });


axios.interceptors.response.use(function (response) {
    
    return response;
  }, function (error) {
    
    return Promise.reject(error);
  });

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了<transition name="my-transition">，那么v-enter会替换为 my-transition-enter。

impicture_20210817_161501.png

<template>
  <div>
      <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
  </div>
</template>

<script>
  export default {
    data () {
      return {
          show: true
      }
    }
  }
</script>

<style scoped>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
avatar
文章
阅读
粉丝