1 改变富文本样式和vant组件样式需要注意的地方
使用vue的v-html属性后.想改变富文本里面的样式,不能把样式写在scope里面
想改变vant组件的样式只能用css语法去更改样式,同时注意层级关系
2 阻止页面滚动
@touchmove.prevent
3 DropDown组件使用时,子选项无法绑定事件的处理
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-check" @click.native='func'>双皮奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check" @click.native='choose'>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
4 限制结束日期不能大于开始日期 -element-ui
data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},
}
}
5 使用element-ui之后无法回车问题
<input v-model="form.name" placehoder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placehoder="昵称" @keyup.enter.native="submit"></el-input>
6子组件不可用修改父组件传过来的值,解决方法是可以emit一个方法到父组件中,通过父组件传参重新赋值给子组件
8使用v-lazy实现图片懒加载
<ul>
<li v-for="(item,index) in demoArr" :key = "index">
<!-- 循环一定不能放图片上!!!! -->
<!-- 使用v-lazy代替src -->
<img v-lazy = "item"/>
</li>
</ul>
9一:Vue的双向绑定原理答:利用数据劫持和发布者-订阅者模式监听数据值的变化,并且利用Object.defineproperty来重新定义对象的Get和Set方法。二:那Vue能不能监听到数组或者对象值的变化。答:不能.
10Vue不能监听到数组变化有两种情况,
一:直接改变arr的值 如我在button事件中写的(arr[0]=1000)
解决方法 将this.arr[0]=1000改写为Vue可以监听的形式 this. s e t ( t h i s . a r r , 0 , 1000 ) t h i s . set(this.arr,0,1000) this. set(this.arr,0,1000)this.set接受三个参数,第一个是需要操作的数组对象,第二个是需要修改的数据的数组下标,第三个是修改后的值。
二:直接修改数组的长度 如this.arr.length=3
解决方法使用js中数组方法arr.splice操作数组达到修改长度的目的。
Vue中无法监听对象属性的改变
解决方法:this.$set(obj,name,‘xxx’)对对象进行操作时,set接受三个参数,第一个为对象的名称,第二个为对象的key值,第三个为key对应的value值。
如果需要同时插入多个值。
this.obj=Object.assign({},this.arr,{
age:21,
major:'soft'
})
11vue中的事件委托
vue提供的特殊变量$event相当于js中addEventListenr()方法回调函数中的event参数
<div @click="change($events)">
<span id="a">one</span>
<span id='b'>two</span>
</div>
methods:{
change(e){
if(e.target.id === 'a'){e.target.innerHTML = 'c'}
if(e.target.id === 'b'){e.target.innerHTML = 'd'}
}
}
12自定义组件触发原生事件
Dom元素中自身支持的事件如:click,keyup,这些事件直接绑定在元素上就可以生效,但是在vue中,如果你往自己写的组件中绑定如@click等原生事件,是不会触发的。
解决的办法就是,利用native修饰符来触发事件:
<self-item @click.native="changeSize" />
13主动触发视图更新
在使用Element的table时,遇到一个问题,动态改变table内的数据,但table并不会马上更新。后来经查阅,发现其实是ES5的Object.defineproperty方法缺陷,Vue在初始化实例时会将属性转为getter/setter,所以属性必须在 data 对象上才能让 Vue 转换它,才能让它是响应的。
数据改变后,重新定义data中的数据:(比如我的tableData经过一连串的逻辑后,它里面的数据是有改变的,但是视图没触发变化)
解决方法如下
method:{
reloadData(){
this.$set(this.tableData,'name',username)
}
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。
举个栗子
<template>
<div>
<p ref="p_1">{{msg}}</p>
<button @click="fn">change</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 1
}
},
methods: {
fn: function () {
this.msg = 33
console.log(this.$refs.p_1.innerHTML) //输出为1
this.$nextTick(function () {
console.log(this.$refs.p_1.innerHTML) //输出为33
}
)
}
}
}
</script>
14,h5 border 1px 和 1rem 在移动端显示问题
问题:把 border 值设置为 1px solid #ccc,在苹果手机上不显示边框但在安卓手机上能显示,把单位换成 rem 能正常在苹果手机显示,但是在安卓手机上就不显示了,有什么解决方案能让其在两种设备都正常显示吗?
有!,
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
this.$toast('是否是Android:'+isAndroid);
this.$toast('是否是iOS:'+isiOS);
15,h5中android机document.documentElement.scrollTop不生效,尽量使用scrollintoview实现锚点跳转
16,vue h5通过input上传文件,重复上传同一文件无反应可以通过修改input的显示隐藏来达到清除input的value
17,vue css3实现页面平滑过渡效果
//js
this.scrollTo(offsetTop, 1000
scrollTo (top, duration) {
if (top) {
window.scrollTo(0, top)
return false
}
},
//css
html,
body {
scroll-behavior: auto;
scroll-behavior: smooth;
}
##18,微信jsdk分享文案获取本地资源图片
NUtil.getShareImg = function () {
let url = location.href.split('#')[0].replace('index.html', '')
let img = require('../../src//assets/img/share.jpg').replace('./static', 'static')
console.log(url + img)
return url + img
}