本篇内容介绍了“vue的el是什么及有什么作用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 在vue中,el是element的缩写,可称之为挂载点。el的作用是提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标,可以是CSS选择器,也可以是一个HTMLElement实例;在实例挂载之后,元素可以用“vm.$el”访问。el是element的缩写,可称之为挂载点。原理来自于:MVC架构中,使用一个标签当做容器包住一些标签,使得标签被重新渲染,同时保留一些必要的属性。每个vue2.0项目中我们都会看到入口文件(即main.js)中,在生成根实例时会配置el属性,而我们自己创建的组件中则不能配置该属性,下面引用了官方文档中对el属性的说明:类型:string | Element
限制:只在用 new
创建实例时生效。详细:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el
访问。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount()
手动开启编译。简单来说el的作用就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中,el属性的值可以是css选择器的字符串,或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性,而我们在组件中只是export一个配置对象,如果设置了el则会报错。
//错误使用方式,在组件中设置el //提示错误:[Vuewarn]:option"el"canonlybeusedduringinstancecreationwiththe`new`keyword. exportdefa免费云主机、域名ult{ el:'#app' } //正确写法 varvm=newVue({ el:'#app' })
我们再看看项目中的index.html。
html>backstage
打印vm.$el,会发现实例已经被挂载到el对于的元素中:“vue的el是什么及有什么作用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
本篇内容主要讲解“vue的key怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue的key怎么使用”吧!在vue中,key是DOM对象的标识,是给每一个vnode的唯一id,也是diff的一种优化策略;可…