组件模版：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' } }); }; </script> </head> <body> <div id="box"> {{msg}} </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue1.0.js"></script> <script> Vue.component('my-aaa',{//组件这种写法 template:'<h3>我是组件</h3><strong>我是加粗标签</strong>' }); window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' } }); }; </script> </head> <body> <div id="box"> <my-aaa></my-aaa> {{msg}} </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> Vue.component('my-aaa',{//全局 template:'#aaa' }); window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' } }); }; </script> </head> <body> <template id="aaa"> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </template> <div id="box"> <my-aaa></my-aaa> {{msg}} </div> </body> </html>
组件定义方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> var Home={ //这是2.0组件 template:'#aaa' }; //Vue.extend() Vue.component('my-aaa',Home);//全局 window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' } }); }; </script> </head> <body> <template id="aaa"> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </template> <div id="box"> <my-aaa></my-aaa> {{msg}} </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> var Home={ //这是2.0组件 template:'#aaa' }; //Vue.extend() window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' }, components:{//局部 'aaa':Home } }); }; </script> </head> <body> <template id="aaa"> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </template> <div id="box"> <aaa></aaa> {{msg}} </div> </body> </html>
声明周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' }, methods:{ update(){ this.msg='大家好'; }, destroy(){ this.$destroy();//this是new Vue对象 } }, beforeCreate(){ console.log('组件实例刚刚被创建'); }, created(){ console.log('实例已经创建完成'); }, beforeMount(){ console.log('模板编译之前'); }, mounted(){ console.log('模板编译完成'); }, beforeUpdate(){ console.log('组件更新之前'); }, updated(){ console.log('组件更新完毕'); }, beforeDestroy(){ console.log('组件销毁之前'); }, destroyed(){ console.log('组件销毁之后'); } }); }; </script> </head> <body> <div id="box"> <input type="button" value="更新数据" @click="update"> <input type="button" value="销毁组件" @click="destroy"> {{msg}} </div> </body> </html>
vue2.0: bower info vue http://vuejs.org/ 到了2.0以后，有哪些变化? 1. 在每个组件模板，不在支持片段代码 组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素，包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </template> 2. 关于组件定义 Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——--------废弃 Vue.component(组件名称,{ 在2.0继续能用 data(){} methods:{} template: }); 2.0推出一个组件，简洁定义方式： var Home={ template:'' -> Vue.extend() }; 3. 生命周期 之前: init created beforeCompile compiled ready √ -> mounted beforeDestroy destroyed 现在: (创建----编译-----更新------销毁) beforeCreate 组件实例刚刚被创建,属性都没有 created 实例已经创建完成，属性已经绑定 beforeMount 模板编译之前 mounted 模板编译之后，代替之前ready * beforeUpdate 组件更新之前 updated 组件更新完毕 * beforeDestroy 组件销毁前 destroyed 组件销毁后