Vue-template

最新推荐文章于 2024-08-13 08:01:11 发布

一支海棠

最新推荐文章于 2024-08-13 08:01:11 发布

阅读量257

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_45136861/article/details/117029544

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

temmplate 模板使用

1 这两种写法几乎一致只是是否简写

 const demo ={
        template:'<div> <h2>hello </h2></div>   '
    }
    const app = Vue.createApp(demo);
    app.mount("#app")

 Vue.createApp({
        template:`<h2>hello vue3</h2>`
    }).mount('#app')

2定义 script的 type为 x-template 使用起来和上门的1差不多

 <script type="x-template" id="tem">
        <div>
            <h2>{{msg}}</h2>
            <h2>{{counter}}</h2>
            <button @click='add'>+1</button>
            <button @click='jian'>-1</button>
        </div>
    </script>

在template中通过 id获取

template:'#tem',

3.最好用的方法在 body中直接使用 template 同样是在template中通过 id获取

<body>
    <div id="app">
    </div>
    <template id="tem">
        <div>
            <h2>{{msg}}</h2>
            <h2>{{counter}}</h2>
            <button @click='add'>+1</button>
            <button @click='jian'>-1</button>
            <button @click="btnClick">button</button>
            <button @click="btn2Click">2</button>
        </div>
    </template>
</body>