侦听器初始化深度监听
watch: {
scrollTop: function() {
console.log(this.scrollTop);
}
},
watch: {
form_log: { //监听的属性为对象
handler: function () {
this.init()
},
deep: true, //深度监听
immediate: true, //初始化监听
},
},
全局监听事件 也可实现兄弟组件通讯
1、vm.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
2、vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调，如果没有参数，形式为vm.$emit(event)
3、vm.$off( [event, callback] )
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
在main.js 中 window.myevent = new Vue(); 定义全局事件
在父组件 window.myevent.$emit("class_report_reload",""); 发起事件第一个参数是 事件,第二个参数是值
子组件在mounted 监听window.myevent.$on("class_report_reload",()=> {
this.init();
});
如果页面显示的数据为对象时如何判断是否有数据
v-if="Object.keys(rawdara).length > 0"
Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组
let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person) // ["name", "age", "address","getName"]
父组件传给子组件的对象,如果子组件更改了对象值的话,即使没有传值给父组件也会影响到父组件里的对象数据
//可使用深拷贝
let form_log = JSON.parse(JSON.stringify(this.form_log));
将数组转换成数组套对象
let arrList = [];
for (let i in this.subData.check_fences) {
var j = {};
j.fence_id = this.subData.check_fences[i]
arrList.push(j);
}
强制刷新组件之$forceupdate、v-if、key属性三种方式的适用
1.$ forceupdate()仅针对当前组件以及其插槽相关子组件。
作用：例如当data中的某个内容进行了改变，但是页面没有进行实时的刷新，而我又通过打印能确定数据确实改变了，因此可以使用$ forceupdate()来迫使当前组件刷新。
2.v-if通过变量控制的形式，可以触发 被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期，但是由于v-if指令的原因，会导致其控制的内容会发生显示与隐藏操作。虽然可以达到刷新的效果，但是把其当作刷新这个功能,在项目中还是比较少见的。
3.通过key属性来进行刷新操作，在web中的效果是最理想的，因为页面根本感觉不到组件的销毁与创建过程，但是确实满足了组件的刷新功能。
操作方式：在data中定义某个变量，然后将该变量放置在组件的key属性中，要实现该组件刷新时，只需改变变量的值即可。
注意：当key值改变的时候，child子组件实际上经历了新的child的创建过程以及旧的child的销毁过程
<template>
<child ref="child1" :key='indexKey'></child>
</template>
<script>
import child from "./child";
export default {
components: { child },
data() {
return {
indexKey: 0 // 只需要通过操作如点击事件改变这个值，child子组件就会刷新，而且视觉上不会有变化
};
},
}
</script>
if语句扩展
v-if="
(info_details.resourceclass == 1 ||
info_details.resourceclass == 2) &&
info_details.converted == 1
"
text-align: lefe; 用于块元素
span 标签设置不可用
cursor:not-allowed;//是禁用的样式 一个圆圈中间一个斜杠 //其中还有一个属性也是这个样式 cursor:no-drop;
for循环去掉最后一个符号
for (let i = 0; i < this.ques_model.questionPoints.length - 1; i++) {
this.html += this.ques_model.questionPoints[i].pointname + "|";
}
this.html += this.ques_model.questionPoints[
this.ques_model.questionPoints.length - 1
].pointname;
后台返回的数据自动换行 white-space: pre-wrap;
{{ row.usersex == 1 ? "男" : row.usersex == 2 ? "女" : "未知" }}
三木运算符 :class="['group_name', classdisabled ? 'class-disabled' : '']"
:class="[ 'user-info-title',chatItem.userid == sectionInfo.teacherid
? 'theme_color': '']"
:class="{ 'ivu-layout-sider-active': isCollapsed }" //如果后面的变量成立，类名生效
html 空格
关于v-if 的知识点，在弹窗情况下，每次都会重新渲染数据，解决滚动条在底部的话，再次打开弹窗数据重新渲染（会回到顶部）
在当前路由保存搜索信息，详情页返回列表时保留搜索信息
//注意 返回当前路由的方法不能用push或replace 会删除保存的路由信息 用go（-1） 返回上一页
keepAlive() {
// 获取当前路由 信息直接存在url里
let path = this.$route.path;
let query = this.$route.query;
let form_data = JSON.stringify(this.form_data);
let newQuery = {
form_data
};
query = Object.assign({}, query, newQuery);
this.$router.replace({
path,
query
});
},
//初始化获取路由信息
if (this.$route.query.form_data) {
this.form_data = JSON.parse(this.$route.query.form_data);
}
//要在路由表里添加 （有的huihui）
// 重写路由 解决 push报错问题
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error => error);
};
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};
Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。
this.box={
a: 1,
b: 2
}
let data = {
c: 3,
a: 4
};
let baz = Object.assign(this.box, data);
console.log(baz); //a: 4,b: 2,c: 3
给数组添加属性（变为响应式数据）
//set 方法 第一个参数原数据 、第二个参数属性名、 第三个参数为值
this.$set(obj, "s_m", parseInt(theTime1));
删除属性(加$会视图更新)
this.$delete(this.testData,"name")
在URL上存日期或时间戳，取的时候要new Date转成日期对象（日期选择器要求传入的是日期对象格式）
img图片加载出错处理 https://blog.csdn.net/milli236/article/details/78930720
设置页面滚动高度
document.querySelector(".content_inner2").scrollTop = 0;
document.body.scrollTop = 0;
map详解
直接调用子组件的方法并传值
//优点就是可以直接子组件里的init方法并且传值
//缺点就是子组件一直在运行 不能控制复用（还是用v-if哈哈）
this.$refs.add_or_update.init(this.form_bank);
vue项目创建https://www.zhuawaba.com/post/17
vue 播放器https://www.npmjs.com/package/vue-aliplayer-v2
vue里面本身带有两个回调函数：
一个是Vue.nextTick(callback)，当数据发生变化，更新后执行回调。
另一个是Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。
v-for 可以循环数字
$setMySkin 换肤技术
if (theme == "blue" || !theme) {
//当前路径与html文件在同一层
this.$setMySkin("./theme/default.css");
} else if (theme == "red") {
this.$setMySkin("./theme/haverRed.css");
}
网友评论