1、配合模板:
(1) template:'<h2 @click="change">标题2->{{msg}}</h2>'
(2) 单独放到某个地方
a) type="x-template" x-template可以随意命名，但是不能没有type
<script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b) <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
2、动态组件:定义一个元素，动态更新各种组件
<component :is="组件名称"></component>
例子：
<body>
<div class="box">
<input type="button" value="体育" @click="sSign='ty'" />
<input type="button" value="音乐" @click="sSign='yy'"/>
<component :is="sSign"></component>
</div>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
sSign:"ty"
},
components:{
"ty":{
template:"<h3>这是体育新闻</h3>"
},
"yy":{
template:"<h3>这是音乐新闻</h3>"
}
}
})
</script>
</body>