在本文中，我将解释使用DOM作为模板的问题，并提供一些使用Vue.js框架的替代方法。
Vue应用程序通常使用DOM作为模板，因为它是建立最快最简单的体系结构。
然而，这种做法带来了一些问题，这使得它成为任何重大项目的不良选择。例如，您为DOM模板编写的标记并不总是在运行应用程序时获得的。
在本文中，我将解释使用DOM作为模板的问题并提供一些替代方法。
DOM作为模板
该el选项用于将Vue实例挂载到DOM中的元素。如果没有template或render选项存在，Vue将使用安装元素中的任何现有内容作为模板。
!DOCTYPEhtmlhtmlheadmetacharset=UTF-8titletitle/title/headbodydivid=app!--Thismarkupwillbethetemplateoftherootinstance--h1MyVue.jsApp/h1p{{message}}/p/div/body/html
newVue({el:#app,data:{message:Helloworld}});
这种方法可以让您快速启动，但是您应该从此过渡，因为：
你写的标记并不总是你得到的语法与模板引擎发生冲突与服务器端呈现不兼容运行时模板编译是必需的
标记！=DOM
让我们来区分标记和DOM。标记是你写的HTML。浏览器将解析并将其转换为DOM。
Vue使用DOM作为模板，而不是您编写的标记。为什么这是一个问题？DOM解析器和Vue并不总是同意什么是可接受的标记。非标准的标记可能会改变或从页面中删除，导致不可预知的结果。
例如，你可能有一个自定义的组件my-row，呈现为一个tr和将在逻辑上使用像这样：
tablemy-row/my-row/table
由于只tr允许在a内部table，所以my-row在解析文档时，浏览器会提取表格上方的元素。在Vue运行的时候，你会有这样的：
my-row/my-rowtable/table
对于DOM解析器将去掉的Vue模板，也有非常酷的非标准特性：
自闭标签：
如果你的组件不需要插槽，Vue允许你使它成为一个自闭的元素。
!--WillbediscardedbytheDOMparser--my-