用Vue编写首个项目经验(踩坑)总结

今天开始正式编写Vue了,gogogo,just go.

编写Vue的一些技巧

一些基本技巧

  1. template标签只能包含一个根标签.
  2. Vue的指令绑定事件在没有参数的时候是不需要括号的,而angular是需要括号的,刚开始写Vue的时候一度给我造成了很多的困扰。
  3. 使用v-route跳转时,在使用路由是要使用this.$router.push,接受路由参数时要使用this.$route,注意在使用是$router,在接收时是$route,少了一个r。
  4. porps这个对象的作用是限制数据的数据类型.

     props: {
         max: Number,
         title: String,
         options: {
             type: Array,
         },
         name: String,
     }
    
  5. vue自定义过滤器有两个或两个以上的参数时,参数跟在过滤器名称后面,并用括号阔起来.

     {{message | filter}}
    
  6. 阻止默认事件

     e.preventDefault();
    
  7. watch 是VUE的一个对象,这个对象里面的方法可以用来监视值的变化,如果监视的值有变化,则会执行对象的函数,该函数接受两个参数,第一个参数的监视的值的当前的值,第二个参数是监视的值的之前的值.

     watch: {
         keyword: function(nowVal, oldVal) {
             // keyword: 监视的值
             // nowVal: keyword当前的值
             // oldVal: keyword上一次改变前的值
             // 如果keyword的值有改变就会执行这里的函数...
         }
     }
    

一些踩过的坑

  1. 做分页功能时,使用了mint组件库的infinite scroll组件,它的使用方式和inoic的ion-infinite标签是不一样的
    • ionic:单独一个标签,放在模板最下面,用ng-if判断是否继续请求数据;
    • vue: infinite scroll的相关属性都是写在包括要渲染数据的父标签里,用infinite-scroll-disablede判断是否继续请求数据
  2. mint-ui组件库MessageBox组件的踩坑总结

    • 对于alert、conftim、promt三个方法,可以传三个参数,(message,title,option)
    • message:string 提示框内容
    • title:string 提示框标题
    • option:object 其他API
    • 在返回的promise中可以传两个参数(都是函数),第一个参数是点击确定按钮的回调,第二个是点击取消的回调,如果第二个参数不传,会报错,所以一般传一个空函数进去。
    • 为什么说这个组件坑,因为它的官网文档只给出了使用两个参数的例子,甚至连提都没有提到还有option这第三个参数,如果不是看源码,根本找不到它设置其他API的方法。
  3. 对于module的一些理解

    • export一个对象和每个方法单独export是等价的,没有区别,但是export整个对象可读性更强;
    • export default 会导出一个默认的方法,在import的时候可以使用任何名字都是import这个方法,但是要注意不能带分号;
    • import的时候有几种方法,
      • import * as *** from 引入所有方法,
      • import { 需要哪个引入方法就写哪个方法 } from ,
      • import 任意名字 from … 引入默认的方法.

一些学习资料

  1. rn flux布局
  2. 常用的、炫酷的第三方组件

一些什么东西

  1. 判断对象是否是空对象的方法,可以用对象的原生方法Object.getPropertyNames()来检测,这个方法返回的是一个所有的元素键的数组,如果该数组长度为0,则表示对象为空
Objbect.getOwnPropertyNames(传入你要检测的对象).length;

遇到的问题

  1. 三级联动选择地区插件不能使用