Vue学习之内联模板

在vue框架中，模板的位置有两种，一种是在组件内部定义，一种是在组件外部定义。
我们首先来看内部的定义，即常见的定义方式：

      Vue.component('child-component',{
                   template:'<div><p>Welcome to Vue!</p></div>',
                       data:function(){
                        return {
                            msg:'在子组件中声明的数据'
                        }
                       }
        });

在这里，我们的模板是在创建一个全局组件时定义在template中的，我们为你来看一下整个代码：

<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
    <p>{{message}}</p>
        <child-component>
            
        </child-component>
    </div>
    <script>
        Vue.component('child-component',{
                   template:'<div><p>Welcome to Vue!</p></div>'
                    });
        var app=new Vue({
            el:'#app',
            data:{
                message:'在父组件中声明的数据'
            }
        });
    </script>
</body>
</html>

渲染之后，结果为：

 <div id="app">
    <p>在父组件中声明的数据</p>
    <div>
        <p>Welcome to Vue!</p>
    </div>
    </div>

那么，我们来看另一种方式：

Vue提供了一种内联模板的功能，在使用组件时，给标签加上inline-complate特性，组件就会把它的内容当作模板，而不是当内容分发。
简单的说（自己的理解）：不在创建一个组件时定义它的模板，而是在声明的外部创建。
下面看一个实例：

<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <child-component inline-template>
             <div>
                <h2>在父组件中定义子组件的模板</h2>
                <p>{{message}}</p>
                <p>{{msg}}</p>
             </div>
        </child-component>
    </div>
    <script>
        Vue.component('child-component',{
                       data:function(){
                        return {
                            msg:'在子组件中声明的数据'
                        }
                       }
        });
        var app=new Vue({
            el:'#app',
            data:{
                message:'在父组件中声明的数据'
            }
        });
    </script>
</body>
</html>

注意，此例创建一个新的组件时，并没有通过template来定义模板。

<child-component inline-template>
             <div>
                <h2>在父组件中定义子组件的模板</h2>
                <p>{{message}}</p>
                <p>{{msg}}</p>
             </div>
        </child-component>

此例时通过在child-component标签中加入inline-component特性，来定义一个模板。
渲染后：

<div id="app">
   <div>
       <h2>在父组件中定义子组件的模板</h2>
       <p>在父组件中声明的数据</p>
       <p>在子组件中声明的数据</p>
   </div>
   </div>

如果有朋友可能心思比较活，尝试两种定义方式一起用，但是，结果只显示inline-complate所定义的
实例如下：

<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <child-component inline-template>
             <div>
                <h2>在父组件中定义子组件的模板</h2>
                <p>{{message}}</p>
                <p>{{msg}}</p>
             </div>
        </child-component>
      
    </div>
    <script>
        Vue.component('child-component',{
            template:'<p>Hello </p>',
                       data:function(){
                        return {
                            msg:'在子组件中声明的数据'
                        }
                       }
        });
        var app=new Vue({
            el:'#app',
            data:{
                message:'在父组件中声明的数据'
            }
        });
    </script>
</body>
</html>

结果只会显示：