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`  改变后调用
})

相关文章

  • 第3章 Vue 基础精讲

    3-1 Vue实例 vue实例是根实例,组件也是vue实例,所以说页面是由很多vue实例组成的data(): 以d...

  • vue基础知识

    new Vue() 创建 Vue 实例,其中 Vue.components() 也可以创建 Vue 实例。 Vue...

  • vue实例

    Vue实例化 1.创建一个Vue实例 通过Vue构造函数new 一个新的vue实例, 当你创建一个vue实例,你可...

  • Vue.js学习笔记(2)

    Vue 实例 创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的:...

  • Vue.js 数据绑定、指令、事件

    Vue 实例和数据绑定 通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue 应用。Vue 实例...

  • vue实例和数据绑定

    vue实例和数据绑定 vue实例和数据绑定 通过script便签引入vue 通过vue构造函数来创建一个vue实例...

  • Vue引入、指令、挂载点、模板、实例和绑定事件

    Vue实例 创建一个Vue实例,每个Vue应用都是通过 Vue 函数创建一个新的Vue实例 开始的:var vm ...

  • Vue实例与模板语法

    Vue实例 新建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的:let data =...

  • Vue学习的第二天

    创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的,所有的Vue组件都是Vue实例,...

  • Vue入门系列(二)Vue实例和组件

    Vue实例是Vue应用的启动器,Vue组件是Vue实例的扩展。 1. Vue实例 通过构造函数可以创建一个Vue的...

网友评论

    本文标题:Vue 实例

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