1 更改富文本样式和vant组件样式时需要注意的事项
使用vue的v-html属性后。 如果要更改富文本上的样式，则不能将样式写在范围上
如果想要改变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一个方法给父组件，通过父组件传递参数，重新形成参数给子组件 7.添加滚动风暴后记得去掉 8.使用 v-lazy 实现图片懒加载
<ul>
<li v-for="(item,index) in demoArr" :key = "index">
<!-- 循环一定不能放图片上！！！！ -->
<!-- 使用v-lazy代替src -->
<img v-lazy = "item"/>
</li>
</ul>
91：Vue的单向绑定原理答案：利用数据绑架和发布者-订阅者模式窃听数据值的变化，利用Object.defineproperty重新定义对象的Get和Set方法。 二：Vue 能否窃听链表或对象值的变化。 答案：不能。 10 有两种情况Vue无法监听链表的变化。
一：直接按照我在按钮风暴中写的那样改变arr的值（arr[0]=1000）
解决方案是将 this.arr[0]=1000 重写为 Vue 可以窃听的方式 this.set(this.arr,0,1000)this.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') 对对象进行操作时elementui样式重复，set 接受三个参数，第一个是对象的名称，第二个是对象的键值，第三个是对象的键值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的表时，遇到了一个问题，动态改变表中的数据，但是表不会立即更新。 经过检查，我发现虽然是ES5的Object.defineproperty方法的缺陷，但是Vue在初始化实例时会将属性转换为getter/setter，所以属性必须在数据对象上，这样Vue才能将其转换为它反应灵敏。
数据发生变化后elementui样式重复，重新定义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边框1px和1rem在移动端显示问题
问题：设置边框值为1pxsolid#ccc，边框在苹果手机上不会显示但在安卓手机上可以显示，单位可以改为rem，在苹果手机上可以正常显示，但在Android手机上不会显示。 有哪些解决方案可以使其在两种设备上正常显示？
有！，
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的值 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
}
19git指定回滚到某个版本
git重置--hard c9f2fb23c52b1efe115bcc4391e7fe673d571aa4
最后也是最后。 可以的话请点个赞，也可以加我交流技术问题
发表评论