博客

• 
  
  data
  

export default {
  name: 'app',
  data () {
    return {
      message:"hi vue !"
    }
  },
  created(){
      this.$emit('mes', this.message)
  }
}

• 
  
  props
  

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项

// simple syntax
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// object syntax with validation
Vue.component('props-demo-advanced', {
  props: {
    // type check
    height: Number,
    // type check plus other validations
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

• 
  
  propsData
  

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

• 
  
  computed
  

在数据未发生变化时，优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。

new Vue({
   el:"#myDiv",
        data:{
            firstName:"Den",
            lastName:"wang",

        },
        computed:{
            fullName:function(){
                return  this.firstName  + " " +this.lastName;
            }
        }
})

setter 和 getter方法：（注意在vue中书写时用set 和 get）

• setter 方法在设置值是触发。
• getter 方法在获取值时触发

computed:{
    fullName:{
    //这里用了es6书写方法
        set(){
             alert("set");
        },
        get(){
           alert("get");
           return  this.firstName  + " " +this.lastName;
        },
    
    }
}

• 
  
  methods
  

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

• 
  
  watch
  

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。

new Vue({
  el: '#myDiv',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})