vue生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data:{}, //实例化后，数据还没有初始化 beforeCreate:function(){ console.log('beforeCreate') }, //数据初始化后 created:function(){ console.log('created') }, //未知标签进行关联之前 beforeMount:function(){ console.log('beforeMount') }, //实例和标签进行关联后 mounted:function(){ console.log('mounted') }, //数据更新前 beforeUpdate:function(){ console.log('beforeUpdate') }, //数据更新后 Updated:function(){ console.log('Updated') }, }) </script> </body> </html>
组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <demo></demo> <!--直接引用组件 --> <demo></demo> <demo></demo> <demo></demo> <demo></demo> <demo></demo> <demo></demo> </div> <script src="vue.js"></script> <script> Vue.component('demo',{ template:'<h1 @click="change">test{{msg}}</h1>', data:function(){ return {msg:'_msg'} //只会改变一个组件 }, methods:{ change:function(){ this.msg = 'test1' } } }) new Vue({ el:'#app' }) </script> </body> </html>
ref属性和组件的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div ref='test'>test111</div> <input type="button" @click='change' value="点击后f12查看"> <div>-------计数累加器------</div> <test ref="a"></test> <test ref="b"></test> <div>{{count}}</div> <input type="button" value="test" @click="change1"> </div> <script src="vue.js"></script> <script> Vue.component('test', { template: '<div><span @click="add">{{number}}</span></div>', data: function () { return { number: 0 } }, methods: { add: function () { this.number++ } } }) new Vue({ el: '#app', data: { count:0 }, methods: { change: function () { console.log(this.$refs) //ref属性 拿到一个map对象，可以拿到页面中所有使用ref属性的标签 console.log(this.$refs.test) //拿到对象下都div }, change1:function(){ console.log(this.$refs.a.number) this.count = this.$refs.a.number + this.$refs.b.number } } }) </script> </body> </html>
父子组件之间触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div ref='test'>test111</div> <input type="button" @click='change' value="点击后f12查看"> <div>-------计数累加器------</div> <test ref="a" @lll="countadd"></test> <!--触发的事件绑定方法--> <test ref="b" @lll="countadd"></test> <div>{{count}}</div> </div> <script src="vue.js"></script> <script> Vue.component('test', { template: '<div><span @click="add">{{number}}</span></div>', data: function () { return { number: 0 } }, methods: { add: function () { this.number++ this.$emit('lll') //向父组件触发事件 } } }) new Vue({ el: '#app', data: { count:0 }, methods: { change: function () { console.log(this.$refs) //ref属性 拿到一个map对象，可以拿到页面中所有使用ref属性的标签 console.log(this.$refs.test) //拿到对象下都div }, countadd:function(){ this.count++ } } }) </script> </body> </html>