您的位置:首页 > 技术中心 > 前端框架 >

vue的template是什么

时间:2022-03-23 15:35

在vue中,template是一个字符串模板,作为vue实例的标识使用;该模板会替换挂载的元素,挂载元素的内容会被忽略,若模板包含多个顶级元素,或者包含普通文本,实例将会变成一个片段实例。

本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。

vue的template是什么

一个字符串模板作为Vue实例的标识使用。模板将会替换挂载的元素,挂载元素的内容都将被忽略。如下

<body>
  <div id="app">
    {{ }}
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
      },
      template: `<div id="app-10"></div>`
    })
  </script>
</body>

【结果】可以看到 el 被 template 代替了,即 template 的优先级要高于 el.

05.png

el是什么

提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器,也可以是一个HTML元素实例。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显示调用vm.$mount()手动开启编译

实例模板。模板默认替换挂载元素。如果 replace 选项为 false,模板将插入挂载元素内。两种情况下,挂载元素的内容都将被忽略,除非模板有内容分发 slot。

如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

注意在一些情况下,例如如模板包含多个顶级元素,或只包含普通文本,实例将变成一个片断实例,管理多个节点而不是一个节点。片断实例的挂载元素上的非流程控制指令被忽略。

【相关推荐:《vue.js教程》】

以上就是vue的template是什么的详细内容,更多请关注gxlsystem.com其它相关文章!

热门排行

今日推荐

热门手游