简单说说vue中的el属性 | 您所在的位置:网站首页 › element中el_menu标签 › 简单说说vue中的el属性 |
每个vue2.0项目中我们都会看到入口文件(即main.js)中,在生成根实例时会配置el属性,而我们自己创建的组件中则不能配置该属性,下面引用了官方文档中对el属性的说明: el类型:string | Element 限制:只在用 new 创建实例时生效。 详细: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。 在实例挂载之后,元素可以用 vm.$el 访问。 如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。 简单来说el的作用就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中,el属性的值可以是css选择器的字符串,或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性,而我们在组件中只是export一个配置对象,如果设置了el则会报错。 // 错误使用方式,在组件中设置el // 提示错误: [Vue warn]: option "el" can only be used during instance creation with the `new` keyword. export default { el: '#app' } // 正确写法 var vm = new Vue({ el: '#app' })我们再看看项目中的index.html。 backstage打印vm.$el,会发现实例已经被挂载到el对于的元素中:
|
CopyRight 2018-2019 实验室设备网 版权所有 |