【Vue】02_Vue实例

Vue实例

创建Vue实例

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。

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

选项/数据

完整的选项列表

1、data

类型：Object | Function

限制：组件的定义只接受 function

Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。

object

var data = {
    a: 1 }

// 直接创建一个实例
var vm = new Vue({
   
  data: data
})

//在控制台调用
vm.a // => 1

一个组件被定义，data 必须声明为返回一个初始数据对象的函数

• 因为组件可能被用来创建多个实例。

function

extend参考

• 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
• data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

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

2、props

类型：Array<string> | Object

• 对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

作用：用于接收来自父组件的数据。

对象中的选项：

• type：类型检查，不正确则抛出警告。（原生构造函数）
  • String、Number、Boolean、Array、Object、Date、Function、Symbol、…
  • 更多props类型
• default：为该 prop 指定一个默认值。（任意类型）
  • 如果该 prop 没有被传入，则换做用这个值。
  • 对象或数组的默认值必须从一个工厂函数返回。
• required：定义该 prop 是否是必填项。（Boolean类型）
  • 在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
• validator：自定义验证函数会将该 prop 的值作为唯一的参数代入。（Function类型）

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

使用实例：

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