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>
结果只会显示：
在父组件中定义子组件的模板
在父组件中声明的数据
在子组件中声明的数据
网友评论