1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript" src="vue.js"></script>
7
8 </head>
9 <body >
10 <div id="app">
11 <!--静态传递数据-->
12 <my-component message="hello" name="刘二狗" age="18"></my-component>
13 </div>
14 </body>
15
16 <script>
17 Vue.component('my-component',{
18 //子组件使用父组件的数据 message name age
19 props:['message','name','age'],
20 //用data选项对数据进行处理
21 data:function(){
22 return{
23 message1: this.message +'用data选项对数据进行处理'
24 }
25 },
26 //用计算属性选项对数据进行处理
27 computed:{
28 message2:function(){
29 return this.message + '用计算属性选项对数据进行处理'
30 }
31 },
32 template:'<div>' +
33 '<span>{{message1}}</span><br>'+
34 '<span>{{message2}}</span><br>'+
35 '<span>{{message}} {{name}}今年{{age}}了</span><br>'+
36 '</div>'
37 })
38 new Vue({
39 el:'#app'
40 })
41 </script>
42 </html>
43
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
<!--静态传递数据-->
<my-component message="hello" name="刘二狗" age="18"></my-component>
</div>
</body>
<script>
Vue.component('my-component',{
//子组件使用父组件的数据 message name age
props:['message','name','age'],
//用data选项对数据进行处理
data:function(){
return{
message1: this.message +'用data选项对数据进行处理'
}
},
//用计算属性选项对数据进行处理
computed:{
message2:function(){
return this.message + '用计算属性选项对数据进行处理'
}
},
template:'<div>' +
'<span>{{message1}}</span><br>'+
'<span>{{message2}}</span><br>'+
'<span>{{message}} {{name}}今年{{age}}了</span><br>'+
'</div>'
})
new Vue({
el:'#app'
})
</script>
</html>
