Vue2 模板template的四种写法总结（很重要）

绝地灬酷狼 2021-09-17 15:24 477阅读 0赞

### ** 使用template标签要特别注意了 ：** ###

### **官方解释：** ###

**[HTML][] `<template> `元素 **是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。

可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

虽然, 在加载页面的同时,解析器确实处理 **`<template>`**元素的内容，这样做只是确保这些内容是有效的; 然而,元素的内容不会被渲染。

**在使用Vue2调用 `<template>标签时，如果不跟着一个div标签，内容只显示一样！所以，一定要加上div标签！`**

<template id="kirin_template">
          <div>
              <p><span>{
       {children_kirin()}}</span></p>
              <p><button>{
       {component}}</button></p>
              <hr>
          </div>
        </template>

<div id="app"> 
     <h1>我是直接写在构造器里的模板1</h1> 
    </div> 
      
    <template id="demo3"> 
     <h1 style="color:red">我是选项模板3</h1> 
    </template> 
      
    <script type="x-template" id="demo4"> 
     <h1 style="color:red">我是script标签模板4</h1> 
    </script> 
      
    <script> 
     var vm=new Vue({ 
      el:"#app", 
      data:{ 
       message:1 
      }, 
      
      //第2种模板 写在构造器里 
      //template:`<h1 style="color:red">我是选项模板2</h1>` 
      
      //第3种模板 写在<template>标签里 
      //template:'#demo3' 
      
      //第4种模板 写在<script type="x-template">标签里 
      template:'#demo4' 
     }) 
    </script>

[HTML]: https://developer.mozilla.org/en-US/docs/Web/HTML

发表评论取消回复

表情：

评论列表（有 0 条评论，477人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中template的三种写法

第一种（使用模板字符串）早期字符串拼接年代 <div id="app"></div> new Vue({ el: "app"

浅浅的花香味﹌/ 2023年10月11日 14:37/ 0 赞/ 77 阅读

相关进程八种终止方式（很重要）

\----根据网络视频整理进程的终止 0、前言进程的返回值是给其父进程看的，main()函数的返回值，return 0; 这个0就是给父进程看的。我们在s

喜欢ヅ旅行/ 2023年01月13日 10:47/ 0 赞/ 129 阅读

相关 OpenFaaS实战之四：模板操作(template)

欢迎访问我的GitHub > 这里分类和汇总了欣宸的全部原创(含配套源码)：[https://github.com/zq2599/blog\_demos][https_g

谁借莪１个温暖的怀抱￠/ 2022年12月23日 00:58/ 0 赞/ 235 阅读

相关 vue的两种写法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti

旧城等待，/ 2022年09月10日 12:11/ 0 赞/ 302 阅读

相关对vue的template(模板)编译的理解

对vue的template(模板)编译的理解简单的说法：先转化为AST树，在得到的render函数中返回VNode（vue的虚拟DOM节点）详细步骤 ● 首先，通过c

心已赠人/ 2022年05月29日 07:45/ 0 赞/ 279 阅读

相关微信小程序模板template总结

没有看过微信小程序template的同学们可以先去[官网][Link 1]上了解一下。以下是对template的几点总结：一、 template，是一个wxml文件，

àì夳堔傛蜴生んèń/ 2022年05月22日 07:09/ 0 赞/ 272 阅读

相关 vue 的axios请求数据2种方式很重要

show:function(){ //post 方式 //赋值给变量self //使

系统管理员/ 2022年05月10日 16:12/ 0 赞/ 259 阅读

相关字符串模板、模板字符串、Vue中使用template等等。

1：模板字符串传统的JS语言，输出模板是这样写的： $('result').append( 'There are <b>' + baske

青旅半醒/ 2022年05月10日 08:20/ 0 赞/ 355 阅读

相关 template模板引擎基础总结

基础数据渲染引入  <script src="lib/jquery/jquery.min.js"></script>

浅浅的花香味﹌/ 2021年12月15日 11:43/ 0 赞/ 278 阅读

相关 Vue2 模板template的四种写法总结（很重要）

使用template标签要特别注意了：官方解释： [HTML][] `<template> `元素是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染

绝地灬酷狼/ 2021年09月17日 15:24/ 0 赞/ 478 阅读