vue使用经验

2020-03-31  本文已影响0人  五四青年_4e7d

1.关于element-ui框架的el-dialog弹出框被遮罩层挡住了添加属性

:modal-append-to-body='false'

2.下载axios

cnpm install axios --save

main.js引入:

/导入axios
import axios from 'axios'
//配置baseURL地址
axios.defaults.baseURL = ''
//配置axios(把axios挂载到vue)
Vue.prototype.$http = axios
Vue.config.productionTip = false


  const res = await this.$http.post('http://localhost:85/user/login',data)

3.router-link传参接收

 <router-link :to="{path: '/about', query: {video:'' }}"  class="video1">
  console.log(console.log(this.$route.query.video))

4.video隐藏下载按钮

  <video  controls="controls" ref="video" :poster="item.photo" :src="item.href"   class="meyub"   controlslist="nodownload  noremoteplayback" oncontextmenu = "return false"></video>

css

video::-webkit-media-controls {
    overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 62px);
    margin-left: auto;
}

5.用fromdata方式提交post请求:

方法(emilform){
let param = new URLSearchParams()
param.append('ids',this.emilform.ids)

}

6.使用nodejs快速一个get接口:

var express=require('express');
var app=express();
//问号
var questions = { code:200,info:'响应成功',date:[{id:1,name:'成功'},{id:2,name:'失败'},{id:3,name:'进行中'}]};
app.get('/all',function(req,res){
    console.log(req.url);
    res.json(questions)
})
app.listen(3000,function(){
    console.log(3000);
})

7vue的回车事件:

 @keyup.enter

8.对数组的操作增加和删除:

 <div>
      <input type="text" v-model="val" @keyup.enter="add">
      <button >增加</button>
      <ul>
          <li v-for="(item,i) in list" :key="i">
 <span>{{i+1}}</span>  <span>{{item}}</span><span @click="remove(index)">删除</span>
          </li>
      </ul>
  </div>
export default {
data () {
      return {
          msg:'111',
          val:'111',
          list:['数据一个','数据二个','数据三个']
      } 
},
methods:{
 add(){
     this.list.push(this.val)   //增加
   },
  remove(index){
    this.list.splice(index,1)  //删除
  }
}
}
上一篇 下一篇

猜你喜欢

热点阅读