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选项,export default {}定义其他组件的配置选项

PropAndPropData.vue

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







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: '
{{ message }}-child
'
}) // template: '' 一个作用 //创建Vue实例,并在内部使用组件,组件的.vue文件定义的,import进来的对象 var vm = new Vue({ el: '#app', components: { PropAndPropData }, template: '' }) Vue.component('the-child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中通过 this.message 来使用 template: '
{{ message }}-child:{{childmsg}}
'
, computed: { childmsg: function () { return this.message +'\'s child' } } } ) // 通过computed进行属性计算 // Vue.component('the-child', { // // 声明 props // props: ['message'], // // 同样也可以在 vm 实例中通过 this.message 来使用 // template: '
{{ message }}-child:{{childmsg}}
',
// computed: { // childmsg: function () { // return this.message +'\'s child' // } // } // } // ) //PropData 属性多用于测试创建出来的组件数据传递是否成功 类型:{ [key: string]: any } //声明一个组件 var Comp = Vue.extend({ props: ['msg'], template: '
{{ msg }}
'
}) //可以全局注册也可以不全局注册 //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: `
    
class="example"> <div v-on:click="plus">点我呀div > <div>{{aDouble}}
{{aPlus}}
`, 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: '',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      //触发当前实例上的事件(支持自定义的)。附加参数都会传给监听器回调。
      this.$emit('increment')
    }
  },
})


new Vue({
  el: '#app',
  template: `
  <div class="app">

{{ total }}

on:increment="incrementTotal">button-counter> 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

你可能感兴趣的:(客户端,vue,js)