码迷,mamicode.com
首页 > 其他好文 > 详细

将组件中的数据进行动态绑定

时间:2019-11-22 21:03:07      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:template   动态绑定   one   pre   语法糖   method   dash   自定义   title   

<!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>
<!--&lt;!&ndash;1 script标签,注意类型必须是:text/x-template&ndash;&gt;-->
<!--<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>

将组件中的数据进行动态绑定

标签:template   动态绑定   one   pre   语法糖   method   dash   自定义   title   

原文地址:https://www.cnblogs.com/Damocless/p/11913998.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!