<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vueApp">
<h1>Vue.js组件Vue.component简单学习</h1>
<h4>如果我们自己定义属于我们自己的html标签，这是不是一件非常酷的事情</h4>
<h4>下面我们来用Vue.js来实现这个小愿望</h4>
<myelement v-for="value in array" v-bind:text="value"></myelement>
//value是一个个对象让text对象指向value对象并使用我们自一定义的组件myelemnt里面text对象对应的模板语法填充到DOM之中去
<h4>但是好像自己命名的组件名称只能小写，哈哈，html里也都是小写啊</h4>
</div>
</body>
<script>
Vue.component('myelement',{
props:['text'],
template:"<li>{{text.data}}</li>"//这是一个模板语法
});
let vueApp=new Vue({
el:"#vueApp",
data:{
array:[
{data:"你好"},
{data:"Vue.js"},
{data:"我们将会一起来学习"}
],
}
});
</script>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
