2021-09-13 09:40 已编辑武汉大学前端工程师

关注

vue常用特性

1. 表单操作

表单域修饰符

number：转化为数值
trim：去掉开始和结尾的空格
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">

2. 自定义指令

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

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
   
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
   
    // 聚焦元素
    el.focus()
  }
})
//组件中使用
    <input v-focus>

3 . 计算属性

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('')
      }
    }

//控制台只打印一个computed,两个method

4 . 侦听器watch

4.1 侦听器的使用场景

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

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

  watch: {
    
  //监听fristname和lastname数据变化
      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='正在验证'
      }
    }

5 . 过滤器filter

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

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

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格式

/** * 对日期进行格式化， * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有： * y:年, * M:年中的月份(1-12), * d:月份中的天(1-31), * h:小时(0-23), * m:分(0-59), * s:秒(0-59), * S:毫秒(0-999), * q:季度(1-4) * @return String * @author yanis.wang * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/ */
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;
}

6.组件插槽

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

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

//Parent
<template>
  <child>
   <!--默认插槽-->
   <template v-slot>
     <div>默认插槽</div>
   </template>
   <!--具名插槽-->
   <template #header>
     <div>具名插槽</div>
   </template>
   <!--作用域插槽-->
   <template #footer="slotProps">
     <div>
      {
   {
   slotProps.testProps}}
     </div>
   </template>
  <child>
</template>

匿名插槽
具名插槽
作用域插槽

父组件对子组件加工处理
既可以复用子组件的slot，又可以使slot内容不一致
使用:
子组件模板中,元素上有一个类似props传递数据给组件的写法msg="xxx.
插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。如果父组件为这个插槽提供了内容，则默认的内容会被替换掉

7. axios的用法

axios官方文档

axios主要特征:

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

//执行get请求
// 为给定 ID 的 user 创建请求
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);
  });
  //执行post请求
  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)

// 发送 POST 请求
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])

// 发送 GET 请求（默认的方法）
axios('/user/12345');

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

{
   
  // `data` 由服务器提供的响应
  data: {
   },

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {
   },

   // `config` 是为请求提供的配置信息
  config: {
   },
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  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';

拦截器

请求拦截器:在请求发生之前设置一些信息
响应拦截器:在获取数据之前给数据做一些加工处理

// 添加请求拦截器
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);
  });

8.过渡动画

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

<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>