vue中el是什么?

vue官方API文档

对el描述:https://cn.vuejs.org/v2/api/#el

el 的作用大家都知道,用于指明 Vue 实例的挂载目标。我们重点关注上面两个红色叹号部分,总结一下就是:如果存在 render 函数或 template 属性,则挂载元素会被 Vue 生成的 DOM 替换;否则,挂载元素所在的 HTML 会被提取出来用作模版

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="myapp"></div>
  </body>
</html>

示例1: render 函数渲染的 DOM 替换 <div id=”myapp”></div>

new Vue({
  el: '#myapp',
  router,
  store, 
  render: h => h(App)
})

示例2:字符串模版替换 <div id=”myapp”></div>

new Vue({
  el: '#myapp',
  router,
  components: { App },
  template: '<App/>'
})

示例3:手动挂载且不存在render函数和template属性

new Vue({
  router,
  store,
}).$mount('#myapp')

本文转载于网络 如有侵权请联系删除

相关文章

  • HTTP接口测试还可以这么玩[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。1、背景  随着H5在各行业领域的运用,无论是在APP内嵌入H5页面的hybrid应用还是直接在微信公众号或者轻应用中使用H5页面都是非常的常见(比如前端页面通过HTTP接口调用拉取数据进行交互,实现前后台分离)。而随着此类 技术的应用和发展,作为一个 测试人员,跟上时代的变化,除了保证前端页面UI的正确性,也要保证HTTP接口的正确性,从而保证了整个业务功能逻辑的正确性,而接口如果手工测试,不仅 工作量很大,而且效率比较地下,而它的特点更适合通过搭建自动化框架来测试,既能提升效率,又能保证质量。  HTTP接口一般有两种请求方式,一种是POST,一种是GET,需要关注发起请求headers(POST请求还要关注post数据)和响应的headers和body,一般情况下返回的数据都是json格式。从Chrome的Network去分析一个网页的请求加载顺序大概就能看出,目前很多网页的请求顺序都是先去请求html,从html里得到css和js的地址,去请求css和js,从js里的http接口去请求相关的数据,如果拉取回来的数据还有很多图片或其他地址,

  • 谈谈C语言中的杂项运算符

    在C语言中,还有一些重要的运算符,例如:sizeof()、&、*、?:。我们把上述的这些运算符归为杂项运算符,下面我将详细介绍这些杂项运算符。下面的表格列出了C语言支持的所有杂项运算符:运算符解释例子sizeof()返回变量的大小sizeof(int)将返回4&返回变量的地址&a;将给出变量的实际地址*指向一个变量*a;将指向一个变量?:条件表达式如果条件为真?则值为X:否则值为Y下面的实例,展示了C语言支持的所有杂项运算符:#include<stdio.h> intmain() { inta=5; shortb; doublec; int*ptr; /*&和*运算符实例*/ ptr=&a;/*'ptr'现在包含'a'的地址*/ printf("a的值是%d\n",a); printf("*ptr是%d\n",*ptr); /*三元运算符实例*/ a=10; b=(a==1)?20:30; printf("b的值是%d\n",b);

  • PowerMock(一):PowerMock的使用

    您好,我是码农飞哥,感谢您阅读本文!本文主要介绍PowerMock的基本使用。环境引入依赖注解说明mock普通方法mock抛出异常mock新建对象mock无返回值的方法mock被final修饰的方法参数模糊匹配mock静态方法mock私有方法总结参考为啥要使用PowerMock现在流行的测试驱动开发TDD(Test-DrivenDevelopment),是敏捷开发中一项核心实践和技术。也是一种设计方法论。其中最重要的一环就是使用单元测试。单元测试是保证代码质量的一个重要手段,通过单元测试我们可以快速的测试代码的各个分支,各种场景,代码重构时只需要重新跑下单元测试就是能知道代码潜在的问题。单元测试是通过Mock的方式调用被测试的方法,其有如下几个优点:Mock可以解除测试对象对外部服务的依赖(比如数据库,第三方接口等),使得测试用例可以独立运行。不管是单体应用还是微服务,这点都特别重要。Mock的第二个好处就是替换外部服务调用,提升测试用例的运行速度。因为任何外部服务调用至少是跨进程级别的消耗,甚至是跨系统、跨网络的消耗,而Mock可以把消耗降低到进程内。Mock的第三个好处就是提升测试

  • 回答网友提问:如何自学 SAP 电商云,销售云,营销云这些产品的业务知识?

    问题你好,我们公司是一家XXXX的制作型企业,我是XXX部门的一名业务数据分析师。 由于公司马上要上线SAP的marketingcloud,commercecloud,salescloud,请问我该如何提前学习这些cloud的业务知识?Jerry的回答我之前曾经写过一篇文章,介绍SAPC/4HANA应用套件,包含五朵云:SAPC/4HANA到底包含哪些产品?五朵云如上图所示。关于这五朵云业务知识和技术知识的讲解,在SAP帮助网站上能够找到。以SalesCloud为例,浏览器访问help.sap.com,输入关键字SalesCloud:打开这些带有SAPLearningJourneys的搜索结果链接:这里就能打开SAP为这些产品准备的系统的自学材料了,分为Consultant(顾问),developer(开发者)和Administrator(管理员)这几个角色。提问的这位朋友是业务数据分析师,那么应该看Consultant分类下的材料。注意,很多课程是OpenSAP上的在线课程,视频基于英语的,所以需要学习者有一定的英文基础。除了学习视频以外,当然也有在线文档,比如这个链接:https:

  • 一篇文章带你了解Android Usb摄像头

    在实际项目中,有些客户可能需要支持usb摄像头功能,如果你也遇到usb摄像头支持的问题,那这篇文章一定能帮助到你。目前android是支持uvc协议的,也就是只要我们采用的usb摄像头是支持uvc协议的,那就可以在android上跑起来的。一、我们先来了解下啥是uvc?UVCUVC全称为USBVideoClass,即:USB视频类,是一种为USB视频捕获设备定义的协议标准。是Microsoft与另外几家设备厂商联合推出的为USB视频捕获设备定义的协议标准,已成为USBorg标准之一。(简单来说,就是一种协议标准)二、来看看usb摄像头长啥样?下面2张图片就是我目前手头上用的usb摄像头。三、关于uvcCamera的开源项目?GitHub开源项目: https://github.com/saki4510t/UVCCamera目前网上关于uvcCamera的例子,基本是基于这个开源项目来的,整个项目包含了so库的实现代码,以及包含了8个测试程序代码。四、基于开源uvcCamera的项目,个人写的demo?(亲手撸的demo,在android9.0上验证过各个功能正常)支持的功能:1)预览2

  • 分布式架构设计篇(十)-柔性事务之事务消息详解

    -概述-​在《柔性事务之TCC详解》和《柔性事务之Saga详解》两文中我们详细剖析了柔性事务的第一个分支补偿型事务。在《刚性事务总结和柔性事务概述》中我们介绍过的柔性事务包含补偿型事务和通知型事务。通知型事务主要包含事务消息和最大努力通知事务两个组成。通知型事务的主流实现机制是通过MQ来通知其他事务参与者自己事务的执行状态。MQ组件的引入有效的讲事务参与者解耦开,各个参与者都可以异步执行,所以通知型事务又称为异步事务。通知型事务主要适用于那些需要异步更新数据,并且对数据的实时性要求较低的场景。事务消息主要适用于内部系统的数据最终一致性保障,因为内部相对比较可控,比如订单和购物车、收货与清算、支付与结算等等场景;而最大努力通知事务主要用于外部系统,因为外部的网络环境更加复杂和不可信,所以只能尽最大努力去通知实现数据最终一致性,比如充值平台与运营商、支付对接等等跨网络系统级别对接。普通消息是无法解决本地事务执行和消息发送的一致性问题的。因为消息发送是一个网络通信的过程,发送消息的过程就有可能出现发送失败、或者超时的情况。超时有可能发送成功了,有可能发送失败了,消息的发送方是无法确定的,所以

  • 文本框根据输入内容自适应高度

    jQuery实现(function($){ $.fn.autoTextarea=function(options){ vardefaults={ maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度 minHeight:$(this).height()//默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示 }; varopts=$.extend({},defaults,options); return$(this).each(function(){ $(this).bind("pastecutkeydownkeyupfocusblur",function(){ varheight,style=this.style; this.style.height=opts.minHeight+'px'; if(this.scrollHeight>opts.minHeight){ if(opts.maxHeight&&

  • 响铃:2019年第一匹黑马:它给游戏行业带来哪些思考?

    文|曾响铃 来源|科技向令说(xiangling0815)把人气端游改编成手游,总能时不时给予市场惊喜。近日,完美世界联手腾讯游戏打造的自由飞行战斗MMORPG手游《完美世界》上线,该产品上线前就有超过千万的玩家预约。上线后很快就出现了全线服务器火爆飘红的情况。作为从一款拥有14年积累的经典端游改编而来的手游,《完美世界》手游首秀即取得亮眼成绩,有望成为2019年游戏行业第一匹黑马。为什么这么说,且听我慢慢分解。好产品不嫌晚,《完美世界》手游延续了端游精雕细琢的态度在端游历史上,2005年起到之后数年,是3DMMORPG+无缝世界被视作高端网游的年代,作为国内开发商运用自主研发引擎开发的无缝世界3DMMORPG游戏,《完美世界》端游2005年问世后获得业界热烈反响,技术上在国内游戏界无出其右,甚至超越部分韩国游戏,称得上中国网游史上里程碑式的作品。此后多年里,与《魔兽世界》同台竞技的《完美世界》端游丝毫不虚,凭借以《山海经》为背景所刻画的经典国风,加上在PC配置普遍不佳时代环境下仍呈现出的优秀画质,以及最早的游戏社交创意设计(如后来在很多RPG网游中出现的双人坐骑),《完美世界》端游确

  • 新鲜出炉的8月前端面试题

    基础题题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。怎么去设计一个组件封装组件封装的目的是为了重用,提高开发效率和代码质量低耦合,单一职责,可复用性,可维护性前端组件化设计思路js异步加载的方式渲染引擎遇到script标签会停下来,等到执行完脚本,继续向下渲染defer是“渲染完再执行”,async是“下载完就执行”,defer如果有多个脚本,会按照在页面中出现的顺序加载,多个async脚本不能保证加载顺序加载es6模块的时候设置type=module,异步加载不会造成阻塞浏览器,页面渲染完再执行,可以同时加上async属性,异步执行脚本(利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在ES6模块之中)css动画和js动画的差异代码复杂度,js动画代码相对复杂一些动画运行时,对动画的控制程度上,js能够让动画,暂停,取消,终止,css动画不能添加事件动画性能看,js动画多了一个js解析的过程,性能不如css动画好XSS与CSRF两种跨站攻击xss跨站脚本攻击,主要是前端层面的,用户在输入层面插入攻击脚本,改变

  • postgresql-xl基础命令整合

    参考地址 https://www.postgres-xl.org/documentation/tutorial-createcluster.html//创建表时该表的数据将在各个数据节点均存储一份,即一百条数据将在各个节点均为100条数据。 CREATETABLErepltab(col1int,col2int)DISTRIBUTEBYREPLICATION;//创建表时指定该表按照字段col1进行哈希算法负载至各个存储节点上 CREATETABLEdisttab(col1int,col2int,col3text)DISTRIBUTEBYHASH(col1);//重新分配该表的数据在各个存储节点数据占比 ALTERTABLEdisttabADDNODE(dn3);//去掉该表在dn3的数据分配, ALTERTABLEdisttabDELETENODE(dn3);//将REPLICATION的表进行分配为基于hash的各数据分配各节点的方式。这里仅会初始到集群默认安装时的那几个存储节点中,不会使用后来新增的数据节点。 ALTERTABLErepltabDISTRIBUTEBYHASH(co

  • 模块化与解耦(转)

    本文主要讲述了在iOS开发过程中,模块化工程架构的一种组织方式,本文主要讲述基于cocoapods来做模块化的方案,详细讲述了iOS开发怎么进行模块划分的内容,主要会在以下方面做阐述:为什么要做模块化模块设计原则模块化开发有哪些优点和缺点解耦与通信1.为什么要做模块化?我们都知道最基本的代码设计原则:“Don’trepeatyourself!”,每一个工程都会有自己的架构,即使你是刚入门的开发者,写几天代码也会发现要把一些常用到的重复代码单独拿出来放在一个叫common的地方,实现代码复用。这样看来每个开发者其实都或多或少的做过架构方面的事情,每个团队至少有1~2个人在做这样的事情。说到app代码架构,记得Samurai的开发者郭虹宇在群里说过这段精辟的话,引用一下: 一派是说app开发并不需要什么狗P架构,第二派说我们有自己NB的架构,第三派说只要模块化够好,每个模块应该有自己的架构。这三个观点的出发点,我觉得也比较好理解,第一种应该是一些个人开发者,个人能力很强,经常一个人很快搞出来一个app,他的映像中不需要弄太多的框框框住自己,但是其实他也是有一套自己的架构的。第二派应该是一些

  • iOS开发之SQLite--C语言接口规范(四) —— Result Values From A Query

      数据库的在上一篇博客中《SQLite之C语言接口规范(三)——BindingValuesToPreparedStatements》用到了如何从查询结果中取出结果值。今天的博客就详细的介绍一下sqlite3_column_*()的方法。在SQLite数据库C语言接口中,从查询结果中取出不同类型的值需要不同的接口函数。  一.sqlite3_column_*()介绍    1.下图是sqlite3_column_*()所包含的方法,由下图容易的看出取出不同类型的值需要不同的接口函数。可以取出的类型有blob,bytes,bytes16,double,int,int64,text,text16等。接口的第一个参数是我们预编译的SQL语句(sqlite3_stmt的对象),第二个参数是要取出值得行数(从左往右,起始于0)。上面这些接口返回的信息是当前查询行中某列的值。在所有情况下,第一个参数确切的说是指向预编译语句(由sqlite3_prepare_v2()函数返回的sqlite3_stmt*)的指针。第二个参数是应该返回信息在行中的列索引(结果集的最左边的列索引0)。结果集中的列的数量可

  • Latex使用笔记

      有些公式网上难找的话,直接在word里面用公式的“专用”模式写好,然后再转成线性,就能得到LaTeX代码。   latex编写数学公式要用环境:   \usepackage{amsmath} 数学公式 左对齐 \begin{align*} f(x)&=x\\ &=1 \end{align*}复制 非斜体 \text{s.t.}复制 矩阵 \left[ \begin{matrix} 1&2\\ 3&4\\ \end{matrix} \right]复制 公式序号 \begin{gather} a=2\label{}\\ b=c\label{}\\ x+5=y\tag{*} \end{gather}复制 \begin{align} &\nabla_wL(w,b,\xi,\alpha,\mu)=w-\sum\limits_{i=1}^{N}\alpha_iy_ix_i=0\\ &\nabla_bL(w,b,\xi,\alpha,\mu)=-\sum\limits_{i=1}^{N}\alpha_iy_i=0\notag\\

  • 根据字节截字符串,仅供工作中参考,如有侵权,联系作者

    /** *处理select文字过长显示省略号 *@param{*}_class *@param{*}_this *@param{*}_len1显示字节长度 */ exportfunctionshowEllipsis(_class,_this,_len1){ letinputDom=document.querySelectorAll(_class) //console.log(inputDom) inputDom.forEach(item=>{ _this.$nextTick(()=>{ if(getByteLen(item.value)>_len1){ //console.log(reBytesStr(item.value,_len1)+'...') item.value=reBytesStr(item.value,_len1)+'...' } }) }) }复制   /** *字符串根据字节截取字符串 *@param{*}str *@param{*}len */ exportfunctionreBytesStr(str,len){ if((!str&a

  • 正则表达式匹配解析过程探讨分析(正则表达式匹配原理)

    已经有多篇关于正则表达式介绍的文章,随着我们越来越多使用正则表达式,想对性能做优化、减少我们正则表达式书写匹配Bug。我们不得不进一步深入了解正则表达式执行过程了。下面我们一起学习,分析下正则表达式执行过程。我们会用regexbuddy测试工具分解执行过程,具体工具使用,可以看:正则表达式性能测试工具推荐、优化工具推荐(regexbuddy推荐)。要了解正则表达式解析过程前,我们先来熟悉几个概念。 常见正则表达式引擎 引擎决定了正则表达式匹配方法及内部搜索过程,了解它至关重要的。目前主要流行引擎有:DFA,NFA两种引擎,我们比较区分下。 引擎区别点 DFADeterministicfiniteautomaton 确定型有穷自动机 DFA引擎它们不要求回溯(并因此它们永远不测试相同的字符两次),所以匹配速度快!DFA引擎还可以匹配最长的可能的字符串。不过DFA引擎只包含有限的状态,所以它不能匹配具有反向引用的模式,还不可以捕获子表达式。代表性有:awk,egrep,flex,lex,MySQL,Procmail NFANon-determinist

  • Centos8.x yum 源配置 解决 yum 不可用

    镜像下载、域名解析、时间同步请点击阿里云开源镜像站 备份 [root@iZ2ze1e3u7m7oe426pyndaa~]#cd/etc/yum.repos.d/ [root@iZ2ze1e3u7m7oe426pyndaayum.repos.d]#ll total48 -rw-r--r--1rootroot635Nov202020CentOS-AppStream.repo -rw-r--r--1rootroot619Nov202020CentOS-Base.repo -rw-r--r--1rootroot701Nov202020CentOS-centosplus.repo -rw-r--r--1rootroot1329Nov202020CentOS-CR.repo -rw-r--r--1rootroot668Nov202020CentOS-Debuginfo.repo -rw-r--r--1rootroot227Nov202020CentOS-epel.repo -rw-r--r--1rootroot663Nov202020CentOS-Extras.repo -rw-r--r--1ro

  • 系统调用(一): 重写WriteProcessMemory

    BOOLWriteProcessMemory( HANDLEhProcess, LPVOIDlpBaseAddress, LPCVOIDlpBuffer, SIZE_TnSize, SIZE_T*lpNumberOfBytesWritten );复制 首先分析一下kernel32中的WriteProcessMemory,这里不管检查部分 pusheax;NumberOfBytesWritten pushebx;NumberOfBytesToWrite push[ebp+Buffer];Buffer push[ebp+lpBaseAddress];BaseAddress pushedi;ProcessHandle callds:NtWriteVirtualMemory复制 分析ntdll中的NtWriteVirtualMemory ZwWriteVirtualMemoryprocnear moveax,115h;NtWriteVirtualMemory movedx,7FFE0300h calldwordptr[edx] retn14h复制 这里用到了_KUSER_SHARED

  • 合肥市房产市场信息平台跳转链接解密

    难度:★☆☆☆☆1星一、目标目标网站:http://60.173.254.126/这算是一个列表页,展示了一些小区,然后单击小区跳转到小区详情,但是跳转链接被加密了,是通过JS算出来的:本篇文章的目标就是破解这个加密。二、分析上一小节的图里可以看到,在单击链接的时候绑定了一个事件reurl,在开发者工具的console上输入reurl并回车:拿到代码:functionreurl(a){ a.href="/item/"+recode(a.id) } 复制可以看到在这里修改了链接的地址,用到了链接里的一个id属性:<aid="2714"style="cursor:pointer"onclick="reurl(this)"target="_blank"title="清樾园">清樾园</a>复制同时id的解密还依赖了recode,同样的套路拿到它的代码:functionrecode(a){ varn=nscaler(a); varc=SetObjNum(String(a).length); vard=SetObjNum(String(a).length); n=pars

  • sql server 数据库正在使用该文件的解决办法

    今天在帮朋友还原数据库时遇到了一个问题。朋友用的是sqlserver2008数据库,本身有一个数据库,他在修改程序的时候,想修改数据库的内容。但是又不想在原数据库中修改。想备份还原出一个数据库然后再修改。 一开始操作一样,先备份,再还原到一个新建的数据库。备份成功,但是在还原时出现下面错误: 错误原因是因为在默认的位置还原数据库。解决办法: 1.新建数据库,在新建数据库时,修改数据库文件默认的保存位置: 将上图的默认路径改为其它的路径。如本例中的d:\data 2.还原数据库,选中还原数据库后,在“选项”中选择“覆盖现有数据库”。如下 然后再修改还原为的位置,由默认路径   改为新建数据库时的路径。点击旁边的按钮选择文件就可以了。如本例改为:

  • 小组项目需求调查结果的分析

          项目简介:经过前几日的小组讨论和分析,小组最终决定做一款主要面向当今大学生,丰富大学生音乐情操的手机音乐在线听歌和分享软件。项目的功能主要有在线搜歌,K歌,音乐合唱以及基于端到端即P2P的音乐分享功能等。我们小组主打的是高品质的音乐及用户之间的音乐社区。      为了更好的了解用户对项目的需求,为此我们小组在问卷网上制作了问卷,了解当今用户对音乐软件的感受以及对手机音乐软件的更高期望和所存在的不足。      问卷调查结果:此次调查,最终的受调查用户为262名。           1.目标客户:调查显示目标用户大多集中在18-25岁,占据了受调查人群的80%以上。             &n

  • 装系统

    1. 2. 3. 4. 5.  6.  

相关推荐

推荐阅读