vue学习3

组件之间的传值

 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>

触发原生事件