您的位置：首页 > 产品设计 > UI/UE

【17】vue.js — 组件（模板）

2017-09-08 11:27 411 查看

使用script标签制作模板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<my-data></my-data>
</div>
<script type="x-template" id="aaa">
<h2 @click="change">标题2 -> {{msg}}</h2>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</script>
</body>
<script>
var vm = new Vue({
el: '#box',
components: {
'my-data': {
data() {
return {
msg: 'welcome vue'
}
},
methods: {
change() {
this.msg = 'changed';
}
},
template: '#aaa'
}
}
});
</script>
</html>

使用template标签制作模板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<my-data></my-data>
</div>
<template id="aaa">
<h1>{{msg}}</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
</body>
<script>
var vm = new Vue({
el: '#box',
components: {
'my-data': {
data() {
return {
msg: 'welcome vue',
arr: ['cat','dog','sheep']
}
},
template: '#aaa'
}
}
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue vue定义模板 vue模板

相关文章推荐

新的分享

章节导航