template的用法，适用场合，为什么会出bug，怎么改

最新推荐文章于 2023-02-01 10:45:55 发布

hamimelon2020

最新推荐文章于 2023-02-01 10:45:55 发布

阅读量325

点赞数

分类专栏： JavaScript vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/119250734

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
<script type="text/javascript"></script>
<script>
    let o = document.getElementById("tem");
    console.log(o.content.nodeName);//#document-fragment
    console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到一个类数组
    console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div>
    console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>'
</script>

Running] node "/Users/ivyone/122.html"
/Users/ivyone/122.html:1
<template id="tem">
^

SyntaxError: Unexpected token '<'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

[Done] exited with code=1 in 0.055 seconds

<div id="app">
    <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
    <!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天生不可见-->
<template><div>我是template</div></template>
<abc>我是自定义表现abc</abc>
    <template>
        <div>我是template</div>
        <div>我是template</div>
    </template>
<!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return
        }
    }).mount('#app')
</script>

template里的内容在浏览器中不显示
那为什么有的template的内容显示呢，因为是v-if、v-for等内容。

所以并不是所有的模板都是模板吗？只有遇到这几个关键词了才有模板吗？
这就是所谓的模板语法吗？
不需要模板的时候，就还是div走天下吗

为什么template内的内容要不显示呢？这个标签搞个不显示的有什么意义呢

<div id="app">
    <template v-if="true">
    <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签-->
        <div>我是template</div>
        <div>我是template</div>
    </template>
    <div v-if="true">
    <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签-->
        <div>我是template</div>
        <div>我是template</div>
    </div>
    <!--此处会输出6个‘我是template’并且dom结构中不存在template标签-->
    <template v-for="a in 3">
        <div>我是template</div>
        <div>我是template</div>
    </template>

</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return
        }
    }).mount('#app')
</script>

自己写的错的：

<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: ''
        }
    }).mount('#app')
</script>

一会儿改一下。

<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: ""
        }
    }
    }).mount('#app')
</script>

改了一下，还不行。

<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}<div>
    <div v-else>111<div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: true
        }
    }
    }).mount('#app')
</script>

又改了一下，把frag改成true，怎么还啥也没有？
那写这写msg有啥意义？

<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}</div>
    <div v-else>111</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: true
        }
    }
    }).mount('#app')
</script>

在下面声明了template，注册了template id，终于出来了

<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}</div>
    <div v-else>111</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: true
        }
    },
        template: "#first"
    }).mount('#app')
</script>

frag是有啥用的？

如果是false，就是111

<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
    <div v-if="flag">{{msg}}</div>
    <div v-else>111</div>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "HelloWorld",
                flag: false
        }
    },
        template: "#first"
    }).mount('#app')
</script>

true，是helloworld。

又一个，有错

<div id="app">
    <template v-if="!isLogin">
        <form>
            <p>username: <input type="text"></p>
            <p>password: <input type="password"></p>
        </form>
    </template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                isLogin:false
        }
    },
        template: "#first"
    }).mount('#app')
</script>

为什么template first这行不要，因为前面没有template id吗？

<div id="app">
    <template v-if="!isLogin">
        <form>
            <p>username: <input type="text"></p>
            <p>password: <input type="password"></p>
        </form>
    </template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                isLogin:false
        }
    }
    }).mount('#app')
</script>

以上就有了。
很漂亮。因为是false，所以有了，把false改成true，就没有了。console里的内容也没有了。
再改一下。把！isLogin的！去掉，试试。
果然有了
同时把true改成false，果然又没有了。

那为什么要用!，是不是多此一举，什么场景下会需要用到非？

isLogin是变量吗？还是逻辑啥，是与非的两个选择。

是一个属性吧？具有是与非的属性？怎么理解。是内置的吗，是特殊的吗，是与非是值吗？

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
template的用法，适用场合，为什么会出bug，怎么改

<template id="tem"> <div id="div1">我是template</div> <div>我是template</div></template><script type="text/javascript"></script><script> let o = document.getElementById("tem"); console.lo
复制链接

扫一扫