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>