在组件中创建dom:

      let a=document.querySelector('.test');
let newDom=document.createElement("div"); // 创建dom
newDom.setAttribute("class","testAdd" ); // 添加样式
a.appendChild(newDom); // 插入dom

数组与对象的更新:

 this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

或者:数组原生方法触发视图更新:

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

使用computed实现过滤器:

computed: {
filteredNames: function () {
let filter = new RegExp(this.findName, 'i')
return this.names.filter(el => el.match(filter))
}
}

vue源码查看:

在你的vue项目里,谷歌命令行键入

Object.getOwnPropertyNames(Vue)  //可以看定义在对象上的所有属性名/方法名
Vue.config
Vue.util
Vue.set.toString() //我们平常在控制台上是看不了一个函数到底源码怎么样的,用toString()就可以啦

vue零碎收集的更多相关文章

  1. Vue依赖收集引发的问题

    问题背景 在我们的项目中有一个可视化配置的模块,是通过go.js生成canvas来实现的.但是,我们发现这个模块在浏览器中经常会引起该tab页崩溃.开启chrome的任务管理器一看,进入该页面内存和c ...

  2. 三、vue依赖收集

    Vue 会把普通对象变成响应式对象,响应式对象 getter 相关的逻辑就是做依赖收集,这一节我们来详细分析这个过程 Dep Dep 是整个 getter 依赖收集的核心,它的定义在 src/core ...

  3. Vue 依赖收集原理分析

    此文已由作者吴维伟授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Vue实例在初始化时,可以接受以下几类数据: 模板 初始化数据 传递给组件的属性值 computed wat ...

  4. Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  5. Vue零碎总结

    1.Vue指令里的bind钩子是生成了vnode,但是将它插入/更新到浏览器dom树之前的操作,因此对于一些需要插入dom树后执行的操作它是不支持的,如el.focus()方法,这些要放在insert ...

  6. 零碎收集cocos知识

    Configuration类 返回环境变量 local function menuCallback(tag, pSender) printInfo("selected item tag:%d ...

  7. 从vue源码看Vue.set()和this.$set()

    前言 最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$se ...

  8. 【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...

  9. vue强制组件重新渲染

    有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue ...

随机推荐

  1. F​l​a​s​h​ ​M​e​d​i​a​ ​L​i​v​e​ ​E​n​c​o​d​e​r​参​数​表

    Flash Media Live Encoder命令行推流Flash Media Live Encoder NotesFlash Media Live Encoder 除了直接以 GUI 方式操作之外 ...

  2. 预处理-04-#if defined和#if !defined

    因为对于一个大程序而言,我们可能要定义很多常量( 不管是放在源文件还是头文件 ),那么我们有时考虑定义某个常量时,我们就必须返回检查原来此常量是否定义,但这样做很麻烦. if defined 宏正是为 ...

  3. list 用法的随手记

    在list 用法中.1. add是直接添加 一个变量.不能添加一个 集合元素,比如数组 这种写法是错误的 ,因为不能添加集合 这种写法是对的,因为直接添加元素 2. 但是addrannge 是添加一个 ...

  4. Spring注解@Value数值取值转换字符串失败

    配置文件(yml)中,配置项如下: cebconfig: INST_CODE: 08801001 SFT_NOTIFY_CEB_CHANNEL: 123456 期望INST_CODE: 0880100 ...

  5. C# break语句

    一.C# break语句 break语句用于终止它后面的所有循环语句,使控制流程跳转到break语句所在层的外面,以便结束本层的所有循环.如果有多个循环语句进行嵌套,break语句则会跳到它所在层的外 ...

  6. linux下jdk的安装配置

    1.下载jdk:地址 选中你选择的版本,下载linux版本对应你系统的32位或64位. 我这里选择的是64位. 2.使用你的ssh直连工具把安装包丢到/usr/local/目录下 3.解压安装jdk ...

  7. C# 委托知识总结【转】

    1.什么是委托,为什么要使用委托 我正在埋头苦写程序,突然想喝水,但是又不想自己去掉杯水而打断自己的思路,于是我就想让女朋友去给我倒水.她去给我倒水,首先我得让她知道我想让她干什么,通知她之后我可以继 ...

  8. Linux自带mariadb卸载

    MySQL安装过程中报错: dpkg: regarding mysql-community-server_5.6.39-1debian9_i386.deb containing mysql-commu ...

  9. SSH & 文件传输 & 远程桌面管理

    SSH   Windows Linux MacOS Android IOS                                     https://www.ssh.com http:/ ...

  10. ethereum(以太坊)(十三)--异常处理/元祖

    pragma solidity ^0.4.4; contract Students{ uint[] data= new uint[](4); address _owner = msg.sender; ...