vue 相关知识点

侦听器初始化深度监听

 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");
     }

document.title="" 当前网页的标题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 组件中的 data 为什么是函数 组件是用来复用的,组件中的data应是互不影响的,防止data复用。 v-if和...
    拖孩阅读 225评论 0 0
  • 1.vue有哪些优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开...
    千锋小书童阅读 327评论 0 0
  • 1 什么是mvvm模式 mvvm是Model-View-ViewModel缩写,是一种设计思想,model代表...
    笑傲江湖拎壶冲阅读 575评论 0 0
  • 1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...
    叶苏芒阅读 427评论 0 1
  • VUE相关知识点vue是一个用于构建用户界面的框架,采用MVVM模式(model-view-viewmodel),...
    shanshanfei阅读 650评论 0 0