js:learn-vuejs
Table of Contents
全局配置
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