字符串转dom、dom转字符串、在js写vue模版

字符串转dom

利用innerHtml和childNodes

let dom = document.createElement('div')
dom.innerHtml = str
let newDom = dom.childNodes

dom转字符串

利用innerHtml

let dom = document.createElement('div')
dom.appendChild(node)
let str = dom.innerHtml

innerHtml在js中有双向功能：获取对象的内容或向对象插入内容

在js写vue模版

字符串模版和非字符串模版

vue教程中提到字符串模版和非字符串模版，以下你原文：

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)

Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>

如果你使用的是字符串模版，则没有这些限制

上面的意思是组件的命名是驼峰式命名，但是因为html模版不区分大小写所以需要写成kebab-case，js是区分大小写的，所以可以直接写成kebabCase 。
字符串模版就是写在js中的字符串模版，非字符串模版就是写在html中
写在js中的字符串模版会被当作字符串来处理，根据xml语法来解析，所以js写vue模版，直接跟html中写的就是一模一样的，例：

import Vue from 'vue'
let vm = new Vue({
    el:'#newDom',
    template:
    `<div>
         <div v-for="item in list">
               <img :src="item.zpPath">
              <div>
                     <p><span>姓名：{{item.name}}</span></p>
                     <p><span>身份证号：{{item.idCard}}</span></p>
                     <p><span>预警资源：{{item.rType}}</span></p>
              </div>
        </div>
    </div>`
})

注意：el必须挂载到html中的dom上，而不是在js中新创建的dom，template模版就是用来写字符串模版。
一开始我把v-for写在最外层的div上，报错：cannot use v-for on stateful component root element because it renders multiple elements
中文：不能在有状态组件根元素上使用v-for，因为它会呈现多个元素。
意思是不能在根组件上写v-for，因为这样子就会写多个根组件，但是创建一个vue实例只有一个根组件。