一.vue中遇到的一些问题

Posted on

1.定义全局过滤器

1
2
3
4
5
6
7
8
9
10
11
import moment from 'moment'

Vue.filter('dateFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {

  return moment(dataStr).format(pattern)

})



<span>发表时间：{{ item.add_time | dateFormat }}</span>

2.使axios请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
created(){

      axios.get("/api/getnewslist")

       .then(({data})=>{

           if(data.status == 0){

              this.newslist = data.message;

               console.log(this.newslist)

           }

     });
  }

在body中要使用 v-for检索的时候 , 要注意使用 :key

  • 3.exort defalut

    • export default 向外暴露的成员，可以使用任意的变量来接收
    • 在一个模块中，export default 只允许向外暴露1次
    • 在一个模块中，可以同时使用 export default 和 export 向外暴露成员
    • export default只能直接输出，不能先定义再输出。

    4.axios的封装问题

    (1) 陈旧的方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    axios.get("/api/getlunbo")
    .then(({ data }) => {

        if (data.status == 0) {

          this.bannerlist = data.message;
          
        }
        
       });

    (2) 封装之后的方法

      import myaxios,{lunboURL} from "../tool/myaxios"

async created() {

     let {data} = await myaxios("GET",lunboURL);

        if (data.status == 0) {

        this.bannerlist = data.message;
  }

    5.通过id传参

    a. router-link的配置

    通过字符串的拼接的方式

    b. 路由的配置

    {

    `path: "/home/newsinfo/:id",`

`component: NewsInfo`

    },

    c. 获取id

    this.$route.params.id

    6.$route和$router对象的区别

    (1) $route 表示(当前路由信息对象)

    表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。
    路由信息对象：即$router会被注入每个组件中，可以利用它进行一些信息的获取。

    (2)$router对象

    • $route为当前router跳转对象里面可以获取name、path、query、params等。
    • $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法，返回上一个history使用$router.go方法。跟上面说的一样，这里的$router就管理路由的跳转，英文里er结尾的都表示一种人，这里你可以把这个想象中一个管理者，他来控制路由去哪里（push、go），这样就比较容易记。

    全局的路由实例，是router构造方法的实例。
    在 Vue 实例内部，你可以通过 $router 访问路由实例

    7.关于横向滚动条的报错

    mui.min.js?44c0:8 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    解决办法如下 , 在APP.vue的css中添加:

    \* {

    touch-action: none;

    }

    8.严格模式

    在 babel 把 es6 的代码转换成 es5 的代码的时候 , 会默认启用严格模式 , 严格模式下是不可以使用 caller callee 这些东西的 , 但是 mui.js 中已经使用的这些 , 所以我们在不能更改 mui.js 的情况下 , 加上上面的语句 , 在火狐浏览器中只是警告 , 谷歌浏览器中会报错

    babel.config.js 中加入

    ignore:[“./lib/mui/js/mui.js”]

    9.图片的懒加载

    当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载 ( v-lazy )

    1
    2
    3
    4
    5
    6
    7
    8
    9
    img[lazy="loading"] {

         width: 40px;

         height: 300px;

         margin: auto;

       }
    ( 1 ) 作用

    减少或延迟请求数，缓解浏览器的压力，增强用户体验。

    ( 2 ) 实现方式

    1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
    2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
    3､ 当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址

    10. 区域滑动

    1
    2
    3
    4
    5
    <div class="mui-scroll-wrapper">
    	<div class="mui-scroll">
    		<!--这里放置真实显示的DOM内容-->
    	</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
       //引入需要的mui
    import mui from "../../../node_modules/mui/js/mui.js";


    mounted() {

        // 当组件中的DOM结构被渲染好并放到页面中后 ，会执行这个钩子函数 , 保证页面已经存在了

        // 如果要操作元素最好在 mounted 里面，因为这里时候的DOM元素是最新的

        mui(".mui-scroll-wrapper").scroll({

          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006

        });

      },



    .abc{

      position: relative;

      height: 98%;

    }

    在 app.vue 中 :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    html,body{

      height: 100%;

    }

    .container{

      height: 100%;

    }

    11.只在当前页面生效css : scoped

    12.动画的过程获取位置信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    //动画的钩子函数
        beforeEnter(el) {
          el.style.transform = "translate(0, 0)";
        },
        enter(el, done) {
          el.offsetWidth;
          // 获取小球的在页面中的位置
          const ballPosition = this.$refs.ball.getBoundingClientRect();
          // 获取徽标在页面中的位置
          const badgePosition = document
            .getElementById("badge")
            .getBoundingClientRect();

          const xDist = badgePosition.left - ballPosition.left;
          const yDist = badgePosition.top - ballPosition.top;

          el.style.transform = `translate(${xDist}px, ${yDist}px)`;
          el.style.transition = "all 1s ease";
          done();
        },
        afterEnter(el) {
          this.ballFlag = !this.ballFlag;
        },
        addToCart(){
          this.ballFlag = true;
        }