<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<mycpn1></mycpn1><!--使用自定义的组件名称-->
<mycpn1></mycpn1><!--使用自定义的组件名称-->
<mycpn1></mycpn1><!--使用自定义的组件名称-->
</div>
<body>
<!--<!–1 script标签，注意类型必须是:text/x-template–>-->
<!--<script type="text/x-template" id="cpn">-->
<!-- <div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>-->
<!--</script>-->
<!--2template标签-->
<template id="cpn1">
<div>
<h2>{{title}}</h2> <!--组件内部不能访问实例里的数据，Vue组件应该有自己保存数据的地方-->
<p>我是内容</p><p>我是安徽</p>
</div>
</template>
<script src="vue.js"></script>
<script>
//全局注册的语法糖的实现
Vue.component("mycpn1",{
template:'#cpn1',
// 组件的数据不能是对象类型，而应该是函数类型，从而返回实例的值
//在组件当中，组件的对象有data属性，methods等属性，
// 只是data 必须是一个函数
//而且这个函数必须要返回一个对象，对象内部保存着数据。
data(){
return {
title:'abc'
}
}
});
const app=new Vue({ /*看成root组件*/
el:'#app',
})
</script>
</body>
</html>
将组件中的数据进行动态绑定
猜你喜欢
转载自www.cnblogs.com/Damocless/p/11913998.html
今日推荐
周排行