vue项目补充

1. 报错, 解决方法, 在css下html中加入 touch-action: none; 即可

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

---

 

2. 跳转

methods: { goback() { this.$router.go(-1) }, forwards() { this.$router.go(1) }, goto() { this.$router.push({path: '/center'}) } }

---

 

3. axios 异步提交， 分get和post2种方式， 先使用 axios  模块实现ajax , 安装 npm install axios --save ，然后导入  import axios from 'axios'

  3.1 get提交

axios.get('/api/index.json').then(this.getHomeInfoSucc)

  3.2 post提交， 需要先安装 qs, npm install qs --save, 

import axios from 'axios' ------------------------------- let qs = require('qs') let postInfo = { name: 'zhangsan' } let postUrl = "http://api.99314.com/api/index/test"; axios.post(postUrl, qs.stringify(postInfo), { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).then(res=>{ console.log(res); })

---

4. 给项目添加全局变量

  4.1 新建 src/common/common.js, 在里面导出方法

export default{ setCookie (name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); }, getCookie (name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; }, delCookie (name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); }, //获取jint日期 getTodayDate() { const myDate = new Date(); const year=myDate.getFullYear(); //获取完整的年份(4位,1970-????) const month=myDate.getMonth()+1; //获取当前月份(0-11,0代表1月) const date=myDate.getDate(); //获取当前日(1-31) const str = year + '年' + month + '月' + date + '日' + "星期" + "日一二三四五六".charAt(new Date().getDay()); return str; }, //获取明天日期 getTomorrowDate() { const myDate = new Date(); myDate.setTime(myDate.getTime() + 24*60*60*1000); const year=myDate.getFullYear(); //获取完整的年份(4位,1970-????) const month=myDate.getMonth()+1; //获取当前月份(0-11,0代表1月) const date=myDate.getDate(); //获取当前日(1-31) const str = year + '年' + month + '月' + date + '日' + "星期" + "日一二三四五六".charAt(myDate.getDay()); return str; }, HTTPHOST: "http://api.99314.com" }

  4.2 在main.js中引入

//引入公共js import common from '@/common/common.js' Vue.prototype.common = common

  4.3 在项目中使用

alert(this.common.HTTPHOST)

---

5. 倒计时30秒

//把状态设置为不可点击 const that = this this.yanzhen_flag = false var num_dao = 30 var set_dao = setInterval(function(){ if(num_dao > 0){ // console.log(num_dao) that.yanzhen_name = num_dao + '秒再次申请' num_dao = num_dao - 1 }else{ clearInterval(set_dao) that.yanzhen_flag = true that.yanzhen_name = "获取验证码" } }, 1000)

---

6. 页面刷新 this.$router.go(0)

在苹果里面有bug，要用

window.location.reload()

---

7. input焦点事件 this.$refs.gain.focus()

html <input type="search" ref='gain' class="weui-search-bar__input" placeholder="搜索" required=""> --------------------------------------- js <script> export default { name: "TestContent", data() { return { showSearch: true } }, methods: { clickSearch() { this.showSearch = false this.$nextTick(() => { this.$refs.gain.focus() }) } } }; </script>

---

8. css过长隐藏 

white-space: nowrap text-overflow: ellipsis overflow: hidden

---

9. 过滤器中无法调用 data中的对象

//1. 先申明一个全局变量 <script> let app0; import axios from 'axios'; export default { .... //2. 在 beforeCreate 中申明 beforeCreate: function () { app0 = this } //3. 在过滤中，使用app0，替换this。 filters: { replace_word: function (word) { return word.replace(app0.searchDetail, '<span>' + app0.searchDetail + '</span>'); } },

---

10. 在 v-html中使用过滤器

filters: { replace_word: function (word) { return word.replace(app0.searchDetail, '<span class=zred>' + app0.searchDetail + '</span>'); } }, //使用 <div class="search-content" v-html="$options.filters.replace_word(item.arc_body)"></div>

---

11. 设置路由并获取到值

export default new Router({ routes: [ { path: "/news/:id", name: "News", component: News }, .... //获取 this.$route.params.id / // 还有一种 ?id=1 这种方式用如下获取 this.$route.query.id

---

12.vue点击事件,阻止子元素事件触发父元素事件

如果绑定了一个父级元素后，点击子元素时，会触发父元素的点击事件，如果需要点击子元素时不触发父元素事件，有两种方法

1. 原理: 在JS中，event.currentTarget获取到的是click事件绑定的DOM对象，event.target获取到的为当前所点击的DOM对象。

　在父元素中判断event.currentTarget == event.target是否为true

 2.在子元素中，绑定一个阻止冒泡的点击事件 @click.stop

---

13.vue返回上一页面时回到原先滚动的位置的方法

1. app.vue中

<div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>

2. index.js路由

export default new Router({ routes: [{ path: '/', name: 'index', component: index, meta: { keepAlive: true } },

 这样在index.vue中，mounted方发只走一次，在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试，发现没用，解决手机上实现目的的方法

//在页面离开时记录滚动位置 beforeRouteLeave(to, from, next) { this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop next() }, //进入该页面时，用之前保存的滚动位置赋值 beforeRouteEnter(to, from, next) { next(vm => { document.body.scrollTop = vm.scrollTop }) },

---

14. 页面缓存之后，多了一个 activated 函数，created生命周期函数只运行一次，需要把 created改成 activated。

---

15. vue项目距离顶部的高度，控制y轴距离 document.documentElement.scrollTop

---

16. 返回上一页，如果有的话返回，没有的话返回首页

//返回如果没有上一页,就返回到首页去. if (window.history.length <= 2) { //看资料是 <= 1,但是自己测试，是小于等于2 this.$router.push({path:'/'}) return false } else { this.$router.go(-1) }

---

17. js对url中文 转码 encodeURI， 解码用 decodeURI 

---

18. 离开当前页面触发的事件

//离开当前页面后执行 destroyed: function () { console.log('离开'); },