Vue 中可以定义组件模版的几种方式

前置知识回顾

new Vue({...options})一些基本知识
new Vue(options)的选项中,也可以拥有 data、methods、components、生命周期函数等等,和组件实例的 options 一样。如下例子

  {{uname}}
  

根实例的 template、render 不是必须的,如上例子就是.
它们的作用是接受一个根组件,然后将其编译后的内容填充到 el 内.
通过 template、render 引入一个根组件,从而组成一个由上至下的组件树结构
一般情况下,我们不在根实例中定义普通选项,根实例中常用的配置项有:

{
    el: "#app",
    router,
    store,
    render:h=>h(App)
  }

之所以说这些,是因为我下边的例子中,根实例有的没有用到 template、render
下边我们举例说一下vue都有哪些模板技术

方式 1: 模板-vue 单文件

使用构建工具 cli 创建项目，综合来看单文件组件应该是最好的定义组件的方式，而且不会带来额外的模版语法的学习成本。
如下,就一个完整的组件,使用的地方直接导入即可
import MyHeader from './my-header.vue'

方式 2: 模板-template

Vue 最简单直接的一种定义组件模版的方式，但是方式写起来很不友好，就像我们以前拼接 HTML 元素是一样的，很痛苦，所以我们并不常用
字符串模板,template 选项对象的属性,模板将会替换挂载的元素，挂载元素的内容都将被忽略

回忆过去

需要注意是的是,大概 2018 年的时候,脚手架创建的项目
vue 实例都是使 template 属性来指定根组件
不过现在都被 render 函数写法代替了

const app = new Vue({
  el: "#app",
  components: { App },
  template: "",
});

const app = new Vue({
  render: (h) => h(App),
}).$mount("#app");

展望未来

X-Template,本质上讲,它仍是字符串模板 template 技术,是属于字符串模板的辅助性技术
定义一个

方式 3: 模板-内联模板

与 「X-template」模版定义方式被称为模版定义的替代品，把内容定义在组件标签元素的内部，而不是作为 slot 内容分发，方式比较灵活，但是给让我们组件的模版与其他属性分离开。

  
    

      
      
{{uname}}
      
      
{{msg}}
    
  

方式 4: 模板-render 函数

单文件组件底层内部最终也是会被编译成 render 函数形式
render 函数将会替换挂载的元素，挂载元素的内容都将被忽略
模板-template的代替方案

Vue.component("MyHeader", {
  props: {
    title: "",
  },
  render(createElement) {
    // 此处可以替换为jsx,会更加简介
    return createElement("h1", this.title);
  },
});
var app = new Vue({
  el: "#app",
});

以上就是 Vue 中可以定义组件模版的几种方式，有人可能说，我特么要知道这么多干嘛，只要一种不就行了，我想说兄 die 多知道几种可以帮助我们在不同的条件下做出更好的选择。

比如：你就需要开发一个简单的页面，你非要弄个单文件组件，脚手架跑起来，何必呢，你说对不。

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如

、
、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. 、
和 ，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法：

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串模板 (例如：template: '...')
• 单文件组件 (.vue)
• 模板定义的替代品之 X-Template

解读官方文档的描述,意思是说,普通这种写法(我把它称之为html模板)是不行的

使用字符串模板(模板-template)来使用组件,是可以的

单文件组件 (.vue),是可以的

在x-template中，是可以的

但是以上所有，只要is属性，就都可以解决该问题。