组件之间的传值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <sakula v-bind:nadao="tulong"></sakula> 11 <hr> 12 <pg></pg> 13 </div> 14 <script src="vue.js"></script> 15 <script> 16 let bus = new Vue({}); 17 let HHH =({ 18 template:`<button v-on:click="songdao">屠龙宝刀，点击就送！</button>`, 19 methods:{ 20 songdao:function () { 21 alert(123); 22 bus.$emit('nadao'); 23 } 24 } 25 }); 26 let PGONE=({ 27 template:`<div>{{num}}</div>`, 28 data:function () { 29 return{ 30 num:0, 31 } 32 }, 33 mounted:function () { 34 let _this = this; 35 bus.$on('nadao',function () { 36 _this.num+=1; 37 }) 38 } 39 }) 40 let app = new Vue({ 41 el:'#app', 42 data:{ 43 message:'', 44 checked:false, 45 46 }, 47 components:{ 48 sakula:HHH, 49 pg:PGONE, 50 }, 51 52 53 }) 54 </script> 55 </body> 56 </html>
vue声明周期钩子函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>生命周期钩子函数</title> 5 </head> 6 <body> 7 8 <div id="app"> 9 <p>{{name}}</p> 10 </div> 11 12 13 14 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 16 17 <script> 18 19 var app = new Vue({ 20 el: '#app', 21 data: { 22 name: 'zsq' 23 }, 24 // 数据属性的声明 25 beforeCreate:function(){ 26 console.log('这是beforeCreate钩子函数'); 27 console.log(this.name) 28 }, 29 created(){ 30 console.log('这是created钩子函数'); 31 console.log(this.name) 32 }, 33 beforeMount(){ 34 console.log('这是beforeMount钩子函数'); 35 console.log(document.getElementById('app').innerHTML) 36 }, 37 mounted(){ 38 console.log('这是Mounted钩子函数'); 39 console.log(document.getElementById('app').innerHTML) 40 } 41 }) 42 </script> 43 </body> 44 </html>
vue 子组件触发父组件中的原生事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>02子组件触发原生事件</title> 5 </head> 6 <body> 7 8 <div id="app"> 9 <zsq v-on:click.native='hehe'></zsq> 10 11 12 <zsqsb v-on:xin='hehe'></zsqsb> 13 </div> 14 15 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 16 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 17 18 <script> 19 var app = new Vue({ 20 el: '#app', 21 data: { 22 name: 'zsq', 23 age: 9000 24 }, 25 components: { 26 zsq: { 27 template: `<button>HHHHH</button>` 28 }, 29 zsqsb: { 30 template: `<button v-on:click='jiekele'>skaaasdadasda</button>`, 31 methods:{ 32 jiekele:function(){ 33 this.$emit('xin') 34 } 35 } 36 } 37 }, 38 methods:{ 39 hehe:function(){ 40 alert(123); 41 } 42 } 43 }) 44 45 </script> 46 </body> 47 </html>