Vue学习之路(2)-数据定义选项

引言

测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用

data选项:Vue 实例的数据对象(对象的成员变量)

类型：Object | Function

var vm = new Vue({
    data: function () {
      return {
        'a': 'a',
        'b': 'b'
      }
    }
})

//实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

//以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

//建议通过function声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
//如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
//通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象.
//外部定义的去全局对象,对象在生命周期中参数都是双重绑定的,有变化会全局变化的(如果有共享对象需求可以选择)
//注意，不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }})。
//理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.myProp 将是 undefined。

//js中访问:
console.log(vm.$data.a)
console.log(vm.$data.b)
vm.$data.a = 'hello'
console.log(vm.$data.a)
console.log(vm.a)
console.log(vm.b)


//template语法访问:
{{ a }}
{{ b }}

props和propsData选项:(类似构造方法中,对外部的参数定义,成员变量的一部分)

// props 用于作为组件的参数声明
// 可以是数组或对象，起到组件间的通信作用
// 用于接收来自外部父组件的数据。
// 对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

类型：Array<string> | Object



// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供校验
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})


//创建一类组件,在内部使用子类组件


//vue文件对外导出时通过vue-loader转成一个组件对象
//<template></template> 定义组件的template选项,export default {}定义其他组件的配置选项

PropAndPropData.vue
<template>
  <div id="example">
    <h1>{{msg}}</h1>
    <h2>{{ message }}</h2>
    <the-child :message="message"></the-child>
  </div>
</template>
//传递常量
//message="message"
//从父组件中获取数据往子组件传递数据写法,并且支持父组件数据变换能监控到
//不推荐加法等计算表达式的做法在参数传递中使用,比如:message="message+1"数字和字符串相加会报错
//计算过程应通过computed计算属性,。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。以便于调试开发,避免类型报错(String和Number)
//:message="message"

<script>
  export default {
    name: 'PropAndPropData',
    data () {
      return {
        msg: 'PropAndPropData',
        message: 'parent'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>


import Vue from 'vue'
import PropAndPropData from  './components/PropAndPropData'

Vue.config.productionTip = false

// 全局声明注册子组件,引进来放进所有对象的components中放进
// 第一个参数是注册的组件名称,第二个是组件定义数据
Vue.component('the-child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<div>{{ message }}-child</div>'
})

// template: '<prop-and-prop-data/>' 一个作用


//创建Vue实例,并在内部使用组件,组件的.vue文件定义的,import进来的对象
var vm  = new Vue({
  el: '#app',
  components: { PropAndPropData },
  template: '<PropAndPropData/>'
})

Vue.component('the-child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<div>{{ message }}-child:{{childmsg}}</div>',
  computed: {
    childmsg: function () {
      return this.message +'\'s child'
      }
    }
  }
)
// 通过computed进行属性计算
// Vue.component('the-child', {
//   // 声明 props
//   props: ['message'],
//   // 同样也可以在 vm 实例中通过 this.message 来使用
//   template: '<div>{{ message }}-child:{{childmsg}}</div>',
//   computed: {
//     childmsg: function () {
//       return this.message +'\'s child'
//       }
//     }
//   }
// )


//PropData 属性多用于测试创建出来的组件数据传递是否成功
类型：{ [key: string]: any }


//声明一个组件
var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})
//可以全局注册也可以不全局注册
//Vue.component('comp',Comp);

//测试组件实例化,并传递参数
var testchild = new Comp({
  propsData: {
    msg: 'hello'
  }
})
console.log(testchild.msg);

computed选项:计算属性

类型：{ [key: string]: Function | { get: Function, set: Function } }


//计算属性将被混入到 Vue 实例中。
//所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

//注意，不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。
//理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

//计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
//注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
var vm = new Vue({
  el: '#app',
  data: { a: 1 },
  template: `
    <div class="example">
      <div  v-on:click="plus">点我呀</div >
      <div>{{aDouble}}</div>
      <div>{{aPlus}}</div>
    </div>
  `,
  methods: {
    plus: function () {
      this.a++
    }
  },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})

console.log(vm.a)
console.log(vm.aPlus)
vm.aPlus = 4;

console.log(vm.a)
console.log(vm.aPlus)

methods选项:事件处理器

类型：{ [key: string]: Function }


// methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
//方法中的 this 自动绑定为 Vue 实例。

//注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。
//理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

import Vue from 'vue'

Vue.config.productionTip = false

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      //触发当前实例上的事件(支持自定义的)。附加参数都会传给监听器回调。
      this.$emit('increment')
    }
  },
})


new Vue({
  el: '#app',
  template: `
  <div class="app"><p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter></div>
  `,
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

watch选项:监听器

类型：{ [key: string]: string | Function | Object | Array }

//一个对象，键是需要观察的表达式，值是对应回调函数。
//值也可以是方法名，或者包含选项的对象。
//Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

Vue.config.productionTip = false

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  methods: {
    someMethod:function (val, oldVal) {
      console.log('b new: %s, old: %s', val, oldVal)
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('a new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) {
        console.log('c new: %s, old: %s', val, oldVal)
      },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) {
        console.log('d new: %s, old: %s', val, oldVal)
      },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) {
        console.log('e handle1 new: %s, old: %s', val, oldVal)
      },
      function handle2 (val, oldVal) {
        console.log('e handle2 new: %s, old: %s', val, oldVal)
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) {
      console.log('e.f.g new: %s, old: %s', val.g, oldVal.g)
    }
  }
})
vm.a = 2
vm.b = 3
vm.c = 4
vm.d = 5
vm.e.f= {g:8}
vm.c = 9
vm.a = 3