vue里面的el

在Vue的开发中,经常会遇到el的概念。el即element,它是Vue实例所管理的DOM元素。Vue实例通过el属性来指定自己所控制的DOM元素,Vue会将该DOM元素及其内部的所有节点作为Vue实例的模板。

new Vue({
  el: '#app'
})

vue里面的el

这里的el可以是一个CSS选择器字符串,或者是一个实际的DOM元素。如果是一个CSS选择器字符串,Vue会在DOM元素中查找对应的元素,如果是一个DOM元素,则Vue会直接使用它作为模板。

new Vue({
  el: document.getElementById('app')
})

当Vue实例被创建时,它会自动将el所指定的DOM元素作为根节点加入到文档中,并且开始对内部的模板进行编译。在实例化Vue时,Vue会遍历DOM元素,找到模板中的所有指令或数据绑定,然后将其转换为虚拟DOM,并建立与真实DOM的映射关系。之后,每次数据发生变化时,Vue会重新生成虚拟DOM,然后与旧虚拟DOM进行比较,找出需要更新的节点,并将其更新到真实DOM中。

换句话说,Vue的响应式系统是建立在el这一抽象层之上的。当我们对Vue实例的数据进行修改时,Vue会自动更新所关联的虚拟DOM,并更新与DOM的映射,最终更新真实DOM。

在Vue中,el属性是可选的。如果我们不指定el,则Vue不会将实例挂载到具体的DOM元素上,这时我们需要手动调用vm.$mount方法来手动挂载实例。

new Vue({
  template: '
hello world
' }).$mount('#app')

在这个例子中,我们没有指定el属性,而是使用$mount方法手动挂载Vue实例到DOM元素上。

需要注意的是,如果我们使用vm.$mount来手动挂载Vue实例,那么我们需要保证在挂载之前,模板已经被编译成虚拟DOM,并且数据已经被正确地绑定到了模板中的所有指令和表达式中。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...