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,
let qs = require('qs')
let postInfo = {
name: 'zhangsan'
}
axios.post('http://api.99314.com/api/index/test', qs.stringify(postInfo), {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(this.getYanzhenmaSucc)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 = common4.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)
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: hidden9. 过滤器中无法调用 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.id12.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
