User Tools

Site Tools


js:learn-vuejs

全局配置

Vue.config 是一个对象,包含Vue的全局配置。可以在启动应用之前修改下面属性:

debug

类型:Boolean
默认值:false
用法: Vue.config.debug = true;

在调试模式中,Vue会:
1 为所有的警告打印栈追踪。
2 把所有的锚节点以注释节点显示在DOM中,更易于检查渲染结果的结构。

注意:只有开发版本可以使用调试模式

delimiters

类型:Array<String>
默认值:["{{", "}}"]
用法: Vue.config.delimiters = ['${', '}']   //ES6 模板字符串
修改文本差值的定界符

unsafeDelimiters

类型:Array<String>
默认值:["{{{", "}}}"]
用法:Vue.config.unsafeDelimiters = ['{!!', '!!}']
修改原声HTML插值的定界符

silent

类型:Boolean
默认值:false
用法: Vue.config.silent = true
取消Vue.js所有的日志与警告

async

类型:Boolean
默认值:true
用法:Vue.config.async = false
如果关闭了异步模式,Vue在检测到数据变化时同步更新DOM。在有些情况下着有助于调试,但是也可能导致性能下降,
并且影响watcher回调的调用顺序。 async:false 不推荐用在生产环境

devtools

类型: Boolean
默认值:true (生产版为 false)
用法:Vue.config.devtools = true   //在加载 Vue 之后立即同步的设置
配置是否允许 vue-devtools检查代码。开发版本默认为true,生产版本默认为false。生产版设为true 可以启用检查

全局API

Vue.extend(options)

参数:{Object} options
用法:创建基础Vue构造器的“子类”。参数是一个对象,包含组件选项。
这里要注意的特例是:el和 data 选项 -- 在 Vue.extends中他们必须是函数。

html:  <div id="mount-point"></div>
js:
//创建可复用的构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lasteName}}  aka {{alias}}</p>'
})
//创建一个Profile实例
var profile = new Profile({
  data: {
    firstName: 'Morgan',
    lasteName: 'Liao',
    alias: 'Buddy'
  }
})
//挂载到元素上
profile.$mount('#mount-point')

结果:
<p>Morgan Liao Buddy</p>

Vue.nextTick(callback)

参数:{Function} callback
用法:
延迟回到在下一次DOM更新循环之后执行。在修改数据之后立即使用这个方法,等待DOM更新。

js:
//修改数据
vm.msg = 'Hello';
//DOM 没有更新
Vue.nextTick(function() {
  //DOM 更新了
})

Vue.set(object, key, value)

参数: {Object} object, {String} key, {*} value
返回值:设置的值
用法:
设置对象的属性。如果对象是响应的,将触发视图更新。这个方法主要用于解决不能检查到属性添加的限制。

Vue.delete(object, key)

参数:{Object} object, {String} key
用法:删除对象的属性。如果对象是响应的,将触发试图更新。这个方法主要用于解决不能检测到属性删除的限制。

Vue.directive(id, [definition])

参数:{String} id, {Function | Object} [definition]
用法:注册或获取全局指令

//注册
Vue.directive('my-directive', {
  bind: function() {},
  update: function(){},
  unbind: function(){}
})
//注册,传入一个函数
Vue.directive('my-directive', function() {
  //this will be called as 'update'
})

//getter, 返回已注册的指令
var myDirective = Vue.directive('my-directive')

Vue.elementDirective(id, [definition])

参数:{String} id, {Object} [definition]
用法:
注册或获取全局的元素指令
//注册
Vue.elementDirective('my-element', {
  bind: function() {},
  unbind: function() {}
})
//getter,返回已注册元素指令
var myElment = Vue.elementDirective('my-element')

Vue.filter(id, [definition])

参数:{String} id, {Function | Object} [definition]
用法:注册或获取全局过滤器。
//注册
Vue.filter('my-filter', function(value) {
  //返回处理后的值
})

//双向过滤器
Vue.filter('my-filter', {
  read: function() {},
  write: function() {}
})

//getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

Vue.component(id, [definition])

参数:{String} id, {Function | Object} [definition]
用法:注册或获取全局组件
//注册组件,传入一个扩展的构造器
Vue.component('my-component', Vue.extends({ /*... */}));

//注册组件,传入一个选项对象(自动调用Vue.extend)
Vue.component('my-component', {/* ... */})

//获取注册的组件(始终返回构造器)
var myComponent = Vue.component('my-component')

Vue.transition(id, [hooks])

参数: {String} id, {Object} [hooks]
用法:注册或获取全局的国度钩子对象
//注册
Vue.transition('fade' {
  enter: function() {},
  leave: function() {}
})
//获取注册的钩子
var fadeTrasition = Vue.transition('fade')

Vue.partial(id, [partial])

参数:{String} id, {String} [partial]
注册或获取全局的partial
//注册
Vue.partial('my-partial', '<div>Hi</div>')

//获取注册的 partial
var myPartial = Vue.partial('my-partial')

Vue.use(plugin, [options])

参数:{Object | Function} plugin, {Object} [options]
用法:安装Vue.js插件。如果插件是一个对象;必须有一个install方法。
如果它是一个函数,他会被作为安装方法。安装方法以Vue为参数

Vue.mixin(mixin)

参数:{Object} mixin
用法:全局应用一个混合,将影响所有Vue实例。插件作者可以用它向组件注入自定义逻辑,不推荐用在应用代码中

选项/数据

data

类型:Object | Function
限制:在组件定义中只能是函数。
详细:
Vue实例的数据对象。Vue.js会递归地将它全部属性转为getter/setter,从而让它能响应数据变化。这个对象必须是普通对象;原生对象,getter/setter及原型属性会被忽略。不推荐观察复杂对象。

在实例创建之后,可以用 vm.$data访问原始数据对象。Vue实例也代理了数据对象所有的属性。

在定义组件时,同一个定义将创建多个实例,此时 data必须是一个函数,返回原始数据对象。如果 data仍然是一个普通对象,则所有的实例将指向同一个对象!换成函数后,没当创建一个实例时,会调用这个函数,返回一个新的原始数据对象的副本。
名字以 _ 或 $ 开始的属性 不会被Vue实例代理,因为他们可能与Vue的内置属性或API方法冲突。 用vm.$data._property 访问它们。

可以通过将vm.$data传入 JSON.parse(JSON.stringify(...)) 得到原始数据对象。
示例:
var data = {a : 1}
var vm = new Vue({
  data : data
})
vm.a
vm.$data === data

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

props

类型: Array | Object
详细:
包含一些特性--期望使用的父附件数据的属性。可以是数据或对象。对象用于高级配置,如类型检查,自定义验证,默认值等

示例:
//简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

//对象语法,指定验证要求
Vue.component('props-demo-advanced', {
  props: {
    //只检测类型
    size: Number,
    //检查类型 + 其他验证
   name {
     type: String,
     required: true,
     //双向绑定
     twoWay: true
   }
  }
})

propsData

1.0.22+
类型:Object
限制:只用于 new 创建实例中。
详细:在创建实例的过程传递props。主要作用是方便测试。
示例:
   var Comp = Vue.extends({
     props: ['msg'],
     template: '<div>{{ msg }} </div>'
   })
   
   var vm = new Comp({
     propsData: {
       msg: 'hello'
     }
   })
   

computed

类型:Object
详细:实例计算属性。getter 和 setter的 this 自动地绑定到实例。
示例:
  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
  vm.aPlus
  vm.a
  vm.aDouble
  

methods

类型:Object
详细:实例方法。实例可以直接访问这些方法,也可以用在指令表达式内。方法的 this 自动绑定到实例。
示例:
  var vm = new Vue({
    data: {a : 1},
    methods: {
      plus: function() {
        this.a++
      }
    }
  })
  vm.plus()
  vm.a
  

watch

类型:Object
详细:
一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch()。
示例:
  var vm = new Vue({
    data: {
      a: 1
    },
    watch: {
      'a': function(val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
      },
      //方法名
      'b': 'someMethod',
      //深度 watcher
      'c': {
        handler: function(val, oldVal) {/* ... */},
        deep: true
      }
    }
  })
  vm.a = 2
  

选项/DOM

el

类型:String | HTMLElement | Function
限制:在组件定义中只能是函数
详细:
为实例提供挂载元素。值可以是CSS选择符,或实际HTML元素,或者返回HTML元素的函数。注意元素只用作挂载点。如果提供了模板则元素被替换,除非 replace 为 false。元素可以用 vm.$el 访问。
用在 Vue.extend 中必须是函数值,这样所有的实例不会共享元素。
如果在初始化时制定了这个选项,实例将立即进入编译过程。否则,需要调用vm.$mount(), 手动开始编译。

template

类型:String
详细:
实例模板。模板默认替换挂载元素。如果replace选项为false, 模板将插入挂载元素内。两种情况下,挂载元素的内容都将被忽略,除非模板有内容分发slot。
如果值以 #开始,则它用作选项符,将使用匹配元素的innerHTML作为模板。常用的技巧是用<script type="x-template">包含模板。
注意在一些情况下,例如如模板包含多个顶级元素,或只包含普通文本,实例将变成一个片断实例,管理多个节点而不是一个节点。片断实例的挂载元素上的非流程控制指令被忽略。

replace

<code> 类型:Boolean

js/learn-vuejs.txt · Last modified: 2018/07/24 08:13 by 127.0.0.1

Except where otherwise noted, content on this wiki is licensed under the following license: 沪ICP备12046235号-2
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki