vue25---vue2.0變化
阿新 • • 發佈：2017-06-11
生命周期 red ble imu led use pre mount 關於
組件模版：
<!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 組件銷毀後
vue25---vue2.0變化