vue中template的三种写法

浅浅的花香味﹌ 2023-10-11 14:37 21阅读 0赞

第一种（使用模板字符串）早期字符串拼接年代

<div id="app"></div>

new Vue({
                el: "#app",
                template: '<div>\
                                <h1>{
       {message}}</h1>\
                            <div>',
                data: {
                    message: '字符串拼接'
                }
            })

\#\#\#\#第二种（使用script元素）HTML5标准之前的写法 \`\`\`

<script type="text/x-template" id="tem">
        <div>
            <h1>{
       {message}}</h1>
        </div>
    </script>

new Vue(\{  
el: "\#app",  
template: '\#tem',  
data: \{  
message: 'HTML5标准之前的写法，存在一定弊端（可自行google）  
之后HTML5发布的template元素弥补了此方式的缺点'  
\}  
\})

<br>
    
    ####第三种（使用template元素）HTML5标准之后的写法【第二种的升级版】

<template id="tem">
        <div>
            <h1>{
       {message}}</h1>
        </div>
    </template>

new Vue(\{  
el: "\#app",  
template: '\#tem',  
data: \{  
message: 'HTML5中的template标签 ,注意：  
template是HTML5中的标签，  
不是自定义标签，  
也不是Vue中的组件  
MDN-docs：[https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template][https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element_template] '  
\}  
\})

[https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element_template]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template

发表评论取消回复

表情：

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

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

相关阅读

相关 vue中template的三种写法

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

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

相关 vue中el和data的两种写法

首先做一个简单的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-

绝地灬酷狼/ 2023年09月26日 10:15/ 0 赞/ 48 阅读

相关 HTML中CSS的三种写法

原文网址：[HTML中CSS的三种写法\_IT利刃出鞘的博客-CSDN博客][HTML_CSS_IT_-CSDN] 简介本文介绍在前端HTML中写CSS的三种方法。

红太狼/ 2023年09月23日 17:01/ 0 赞/ 135 阅读

相关 vue: 组件中 template 定义

Vue.component( 　　'button-counter', \{ 　　　　 template: '<button v-on:click="coun

╰半夏微凉°/ 2023年08月17日 17:09/ 0 赞/ 120 阅读

相关 className多种样式的三种写法

1、 className 利用 `${ }` className={ `${ style.fruit} ${ style.apple}`} 2、 cla

青旅半醒/ 2023年02月10日 05:10/ 0 赞/ 171 阅读

相关 Vue中执行事件的两种写法

①标准写法 <button v-on:click="方法()">点击执行方法</button> ②简写写法 <button @click="方法(

柔情只为你懂/ 2022年12月25日 00:49/ 0 赞/ 158 阅读

相关 for循环的三种写法

1、遍历循环 for (循环变量类型循环变量名称；循环条件；更新语句) 循环体 String[] arr = { "a", "b", "c", "d" };

青旅半醒/ 2022年10月11日 13:36/ 0 赞/ 298 阅读

相关 vue的两种写法

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

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

相关 Vue中的三种模板

因为现在学的还比较基础，总结的也都是一些基础的东西，主要还是把学过的东西回顾一下，整理到一起，方便以后回头看，所以仅适合初学者哈 1、html模板： html模板：基

谁借莪１个温暖的怀抱￠/ 2022年05月20日 04:17/ 0 赞/ 278 阅读

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

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

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