vue的el是什么及有什么作用

小天博客 • 02/27 17:29 • 开发 • 阅读 92

本篇内容介绍了“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.
exportdefault{
el:'#app'
}

//免费云主机域名正确写法
varvm=newVue({
el:'#app'
})

我们再看看项目中的index.html。


html>




backstage

打印vm.$el，会发现实例已经被挂载到el对于的元素中：“vue的el是什么及有什么作用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: php常用系统函数方法有哪些

这篇文章主要介绍了php常用系统函数方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇php常用系统函数方法有哪些文章都会有所收获，下面我们一起来看看吧。 php有自带的方法，其常用方法有：1、strlen方法，用于获取字符…