Vue 实例

作者: 廖马儿 | 来源:发表于2017-12-08 15:50 被阅读2次

    Vue 的实例选项:

    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    </script>
    

    我们可以看到,参数有el,datamethods等。
    除此之外还有:

    filters  # 过滤器
    
    

    Vue实例

    构造器

    每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的:

    var vm = new Vue({
      // 选项
    })
    

    1)属性与方法

    每个Vue实例都会代理其data对象中的所有的属性:

    var data = { a: 1 }
    var vm = new Vue({
      data: data
    })
    vm.a === data.a // -> true
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3
    

    除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分

    var data = { a: 1 }
    var vm = new Vue({
      el: '#example',
      data: data
    })
    vm.$data === data // -> true
    vm.$el === document.getElementById('example') // -> true
    // $watch 是一个实例方法
    vm.$watch('a', function (newVal, oldVal) {
      // 这个回调将在 `vm.a`  改变后调用
    })
    

    相关文章

      网友评论

        本文标题:Vue 实例

        本文链接:https://www.haomeiwen.com/subject/debeixtx.html