第六节：Vue模板template

最新推荐文章于 2024-05-12 18:49:24 发布

小戈&328

最新推荐文章于 2024-05-12 18:49:24 发布

阅读量3.1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43220836/article/details/126465447

版权

vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

第六节：Vue模板template

文章目录

- 第六节：Vue模板template

Vue组件和模板的区别

组件：

	封装的html/js/css

模块：

	具有独立动能的js文件

区别：

1.vue实例有el指定挂载元素，组件没有，因为组件也是通过调用在渲染页面，直接通过调用组件名渲染；

2.vue实例中data属性：data:{name:"xiaoge",age:28},

组件中的data属性：data(){ return{name:"xiaoge",age:28} },

3.vue实例的html元素是直接渲染到页面中，而组件的html元素是定义在template上，通过调用再渲染到页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id='app'>
        <!-- template 默认是不解析出标签样式 display:display; -->
        <template></template>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        /*
            template模版
        */
        new Vue({
            el: '#app',
            data: {
                title: 123
            },
            template: `<div>
                <h2> 这个是模版内容  </h2>
                <h3> 这个是三级标题！  </h3>
                <p>{{title}}</p>
                <p>{{title}}</p>
            </div>`
        })

    </script>
</body>

</html>

2、tamplate 第二种写法

tamplate 写法二

template 默认是不解析出标签样式 display:display;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id='app'>
        <!-- template 默认是不解析出标签样式 display:display; -->
        <!-- <template id="tp1">
            <div>
                <h2> 这个是模版内容 </h2>
                <h3> 这个是三级标题！ </h3>
                <p>{{title}}</p>
                <p>{{title}}</p>
            </div>
        </template> -->
    </div>

    <template id="tp2">
        <div>
            <h2> 这个是模版内容 </h2>
            <h3> 这个是三级标题！ </h3>
            <p>{{title}}</p>
            <p>{{title}}</p>
        </div>
    </template>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: 123
            },
            // template: '#tp1',
            template: '#tp2'
        })

    </script>
</body>

</html>

3、tamplate 第三种写法

tamplate 写法三

template 默认是不解析出标签样式 display:display;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id='app'>
        <!-- template 默认是不解析出标签样式 display:display; -->
        <template id='tpl'>
            <!-- 一下标签不会解析出来 -->
            <div>
                <h2> 这个是模版内容 </h2>
                <h3> 这个是三级标题！ </h3>
                <p>{{title}}</p>
                <p>{{title}}</p>
            </div>
        </template>
    </div>
    <script type="text/x-template" id='tp2'>
        <div>
            <h2> 这个是模版内容  </h2>
            <h3> 这个是三级标题！  </h3>
            <h3> 这个是三级标题！  </h3>
            <h3> 这个是三级标题！  </h3>
            <h3> 这个是三级标题！  </h3>
            <h3> 这个是三级标题！  </h3>
            <h3> 这个是三级标题！  </h3>
            <p>{{title}}</p>
            <p>{{title}}</p>
        </div>

    </script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: 123
            },
            template: '#tp2'
        })
    </script>

</body>

</html>

4、slot标签插槽

slot 标签插槽插槽：组件检签，原本写入内容是不显示的，通过slot标签来引入，会在对象的slot标签内容去显示组件定义的值；只写slot标签，没有给定名字的，叫作匿名插槽； name结合slot属性给插槽定义有名插槽；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">

        <h2> {{des}} </h2>
        <candy-luck>
            <span slot='name'>xiaoge</span>
            <span slot='age'>28</span>
            <span slot='obj'>没有对象呢！</span>
        </candy-luck>

    </div>
    <template id='tpl1'>
        <!-- 
            插槽：组件检签，原本写入内容是不显示的，通过slot标签来引入，
            会在对象的slot标签内容去显示组件定义的值；
                只写slot标签，没有给定名字的，叫作匿名插槽；
                name结合slot属性给插槽定义有名插槽；
         -->
        <div>
            <p> 我是 <slot name='name'></slot>
            </p>
            <p> 今年 <slot name='age'></slot>
            </p>
            <p> 对象： <slot name='obj'></slot>
            </p>
        </div>

    </template>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    des: 'slot插槽!!!'
                }
            },
            components: {
                'candyLuck': {
                    template: '#tpl1'
                }
            }
        })    
    </script>

</body>
</html>

小戈&328

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
第六节：Vue模板template

标签插槽插槽：组件检签，原本写入内容是不显示的，通过slot标签来引入，会在对象的slot标签内容去显示组件定义的值；只写slot标签，没有给定名字的，叫作匿名插槽；name结合slot属性给插槽定义有名插槽； template 默认是不解析出标签样式 display:display; template 默认是不解析出标签样式 display:display; 这个是模版内容写法一这个方法和 component 组件有点像。###1、template 第一种写法。
复制链接

扫一扫