vue的选项的el疑惑

clipboard.png

vue的选项的el文档这两句话是什么意思?
1、提供的元素只能作为挂载点。不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。
2、如果 render 函数和 template 属性都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库。

阅读 21.2k
5 个回答

提供的元素只能作为挂载点
意思是说,el所对应的DOM元素,vue在渲染的时候会把template或者render函数返回值塞进这个DOM元素里面,说白了,el就是一个容器。

不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上
这句话意思是说,你的el不能挂载到body或者html元素上,因为最后渲染的时候vue会把挂载的元素被template或者render替换掉。W3C规定页面元素一定要包括<html>和<body>标签,如果你挂载到这两个元素上,页面没<html>标签或者<body>标签,那肯定报错了。

挂载点就是被vue 输出替换的 dom 节点

vue 编译打包有两种 一种是 runtime-only 这个只能在 .vue 单页文件能用,之后挂载的元素就会提取单页文件里面的 html。一种就是 runtime + compiler 这个需要 template 和 render 属性才行

el就是需要挂载的节点,一般是id名称。
若没有el,也可以用$mount()手动挂载节点

  1. 提供的元素只能作为挂载点。 意思是如果你选了某一个元素作为挂载点,例如el:'#app',那么id="app"的这个元素只能被用来作为挂载点,表现为,无论你在该元素内写什么,最终都会被替换掉,不会显示出来。后面的就是说明1.x2.x版本的区别,以及推荐做法,至于为什么推荐这么做,建议看源码。
  2. 参考 @zen_n 说的。

比如:

<div id='app'></div>
 new Vue({
    el:"#app",
    data:{
        a:2
    }
})

由此可以看出el挂在的数据就是你要渲染的区域

推荐问题
宣传栏