第六节：Vue模板template


文章目录

  • 第六节：Vue模板template
  • Vue组件和模板的区别
  • 目录
  • 2、tamplate 第二种写法
  • 3、tamplate 第三种写法
  • 4、slot标签插槽


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>