1new Vue({
2 el: '#app',
3 data: {
4 text: 'Hello'
5 },
6 components: {
7 'child' : {
8 template: `<p>{{ myprop }}</p>`,
9 props: ['myprop'],
10 watch: {
11 myprop: function(newVal, oldVal) { // watch it
12 console.log('Prop changed: ', newVal, ' | was: ', oldVal)
13 }
14 }
15 }
16 }
17});
1var vm = new Vue({
2 el: '#demo',
3 data: {
4 firstName: 'Foo',
5 lastName: 'Bar',
6 fullName: 'Foo Bar'
7 },
8 watch: {
9 firstName: function (val) {
10 this.fullName = val + ' ' + this.lastName
11 },
12 lastName: function (val) {
13 this.fullName = this.firstName + ' ' + val
14 }
15 }
16})
1 computed: {
2 returnSomething: function () {
3 return this.something
4 }
5 }
1// ...
2computed: {
3 fullName: {
4 // getter
5 get: function () {
6 return this.firstName + ' ' + this.lastName
7 },
8 // setter
9 set: function (newValue) {
10 var names = newValue.split(' ')
11 this.firstName = names[0]
12 this.lastName = names[names.length - 1]
13 }
14 }
15}
16// ...
1export default {
2 computed:{
3 test(){
4 return this.course.image
5 }
6 }
7 ,
8 props:['course'],
9}
1var vm = new Vue({
2 el: '#example',
3 data: {
4 message: 'Hello'
5 },
6 computed: {
7 // a computed getter
8 reversedMessage: function () {
9 // `this` points to the vm instance
10 return this.message.split('').reverse().join('')
11 }
12 }
13})