加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

API(选项/数据 选项/dom)

发布时间:2020-12-16 23:21:50 所属栏目:百科 来源:网络整理
导读:h2 id="选项数据"选项/数据 h3 id="data"data 类型: Object | Function 限制: 组件的定义只接受function var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // = 1 vm.$data === data // = true // Vue.extend() 中 data 必

<h2 id="选项数据">选项/数据
<h3 id="data">data

  • 类型: Object | Function
  • 限制: 组件的定义只接受function

      var data = { a: 1 }
    

    // 直接创建一个实例
    var vm = new Vue({
    data: data
    })
    vm.a // => 1
    vm.$data === data // => true

    // Vue.extend() 中 data 必须是函数
    var Component = Vue.extend({
    data: function () {
    return { a: 1 }
    }
    })

  • 类型:Array
  • 详细:
  • props可以是数组或对象,用于接收来自父组件的数据。props可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测,自定义校验和设置默认值

      // 简单语法
      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
    }
    }
    }
    })

  • 类型:{[key:string]:any}
  • 限制:只用于new创建的实例中
  • 详细:创建实例时传递props。主要作用是方便测试

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

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

  • propsData Option 全局扩展的数据传递

      

    PropsData Option Demo


  • 我们用propsData三步解决传值
  • 1,在全局扩展里加入props进行接收。propsData:{a:1}
  • 2、传值时用propsData进行传递。props:['a']
  • 3、用插值的形式写人模板。{{a}}

      var header_a = Vue.extend({
      template:`

    {{message}}--{{a}}

    `,data:function(){ return { message: 'Hello,I am Header' } },props: ['a'] }); new header_a({propsData:{a:1}}).$mount('header');

  • 类型:{[key:string]:Function | {get: Function,set:function}}
  • 详细:计算属性将被混入到vue实例中。所有getter和setter的this上下文自动地绑定为vue实例
  • 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖(比如非响应式属性)在改实例范畴之外,则计算属性是不会被更新的

      var vm = new Vue({
        data: { a: 1 },computed: {
          // 仅读取
          aDouble: function () {
            return this.a * 2
          },// 读取和设置
          aPlus: {
            get: function () {
              return this.a + 1
            },set: function (v) {
              this.a = v - 1
            }
          }
        }
      })
      vm.aPlus   // => 2
      vm.aPlus = 3
      vm.a       // => 2
      vm.aDouble // => 4

Computed Option

    

Computed Option 计算选项


  • 类型:{[key:string]:Function}
  • 详细:
  • methods将混入到vue实例中,可以直接通过VM实例访问这些方法,或者在指令表达式中使用。方法中的this自动绑定为Vue实例

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

Methods Option

Methods Option 方法选项


  • 类型:{[key:string]:string | Function | Object | Array }
  • 详细:
  • 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性

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

watch

    

Watch 选项 监控数据


今日温度:{{temperature}}°C

穿衣建议:{{this.suggestion}}

  • 用实例属性写watch监控

      app.$watch('xxx',function(){})

  • 类型:string | HTMLElement
  • 限制:只在new创建的实例中遵守
  • 详细
  • 提供一个页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器,也可以是一个HTMLElement实例
  • 在实例挂载之后,元素可以用vm.$el访问
  • 如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显示调用vm.$mount()手动开启编译

  • 类型:string
  • 详细
  • 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
  • 如果值以 # 开始,则它将被用作选择符,并使用匹配元素的 innerHTML 作为模板。常用的技巧是用