<div id="tabName">
<p>{{message}}</p>
</div>
new Vue({
el: '#tagName',
data: {
message: "show message"
}
beforeCreate () {
console.log('==============' + 'beforeCreated' + '===================')
},
created () {
console.log('==============' + 'created' + '===================')
},
beforeMount () {
console.log('==============' + 'beforeMount' + '===================')
},
mounted () {
console.log('==============' + 'mounted' + '===================')
},
beforeUpdate () {
console.log('==============' + 'beforeUpdate' + '===================')
},
updated () {
console.log('==============' + 'updated' + '===================')
},
beforeDestroy () {
console.log('==============' + 'beforeDestroy' + '===================')
},
destroyed () {
console.log('==============' + 'destroyed' + '===================')
},
router,
store,
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
},
computed:{
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
},
watch:{
message:function(newMessage){
console.log(newMessage)
}
},
components:{
'component-a': ComponentA,
'component-b': ComponentB
}
)