VUE小知识点

1、通过data中的list循环图片IMG

　　在data中需要添加 require(),如  {name:"打卡",src:require("@/assets/pages/projectImages/qd.png")}

2、获取元素的data属性

　　前台：

 <a :data-rel="site.src" @click="jump($event)" >

　　JS：

jump(e){
      var a=e.currentTarget.dataset.rel;
      console.log(a);
    }

　3、JS里进行跳转

html :
    <button @click="hreftwo" class="test-one">点我到第二个页面</button>js   :
    methods:{
         //跳转页面
         hreftwo(){
             this.$router.push({path:'/two'})
         }
     }

　　4、向data中赋值

let that=this;
that.center=0;//center为data中的属性

　　5、VUE中循环list

 <div class="list" v-for="v in deviceList" v-bind:key="v.ID">　　
        <div class="qingkuang">
          <a href="#" class="yc">故障</a>
        </div>
        <div class="item">
          <label class="label">设备编号</label>
          <div class="block">{{v.Number}}</div>
        </div>
        <div class="item">
          <label class="label">安装位置</label>
          <div class="block">{{v.Local}}</div>
        </div>
        <div class="item">
          <label class="label">登录时间</label>
          <div class="block">{{v.LastLoginTime}}</div>
        </div>
        <span class="chakan">
          <a>
            <van-icon name="notes-o" size="25" />查看
          </a>
        </span>
        <span class="xiugai">
          <a>
            <van-icon name="edit" size="25" />修改
          </a>
        </span>
      </div>

　　6、获取URL中的参数

    var id=this.$route.query.id;

　　7、编写全局可调用方法

以调用Vant的Notify为例。
在main.js中，先import：
import { Notify } from 'vant';
Vue.use(Notify);
然后，再设置上全局方法：
Vue.prototype.Notify = function(msg) {
  Notify(msg)
}

这样在任何一个VUE页面中，可this.Notify('通知')
即可全局调用