第六节: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上,通过调用再渲染到页面

目录

template 的三种写法

template写法一

template写法二

template写法三

###1、template 第一种写法

template写法一 这个方法和 component 组件有点像

<!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>
Logo

前往低代码交流专区

更多推荐