Vue api

全局配置 :silent 布尔值,默认值:false 取消Vue所有的日志与警告 

      optionMergeStrategies :自定义选项合并策略(自定义选项以自定义逻辑合并)

      devtools:布尔值 

      errorHandler:指定组件渲染和观察期间未捕获错误的处理函数

      warnHandler:为Vue的运行时警告赋予一个自定义处理函数,只在开发者环境下生效。

      ignoredElements:须使Vue忽略在Vue之外的自定义元素

      keyCodes :给 v-on 自定义键位别名。

      performance :

      productionTip:设置为 false 以阻止 vue 在启动时生成生产提示。

 

全局API : Vue.extend(options) :使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选项的对象

     Vue.nextTick ([callback , context]) :在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM

     Vue.set(taget , key ,value) 向响应对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更性。他必须用于向响应式对象添加对象上添加新属性。(注:对象不能是Vue实例,或者实例的根据对象)

      Vue.delete(targe , key ) :删除对象的属性,如果对象是响应式的确保删除能触发更新视图(主要用于避开Vue不能检测到的属性被删除的限制)

      Vue.directive ( id , [definition]) :注册或获取全局指令

      Vue.filter ( id, [ definition ]) :注册或获取全局过滤器

      Vue.component ( id , [ definition ]) : 注册获取全局组件。注册还会自动使用给定的ID设置组件名称

      Vue.use ( plugin ) :安装Vue.js插件。如果插件是一个对象,必须提供install 方法。如果插件是一个人函数,他会被作为install 方法。install 方法 调用时,会将 Vue作为参数传入。

      Vue,minxin ( minxin) :全局注册一个混入,影响注册之后所有创建的每个Vue实例。插件作者可以使用混入,向组件注入自定一的行为(不推荐)

      Vue.compile(  template ) :在render函数中编译字符串(只在独立构建时效)

      Vue.version :提供字符串形式的Vue安装版本号

选项/数据   data :类型 Object  | Function (组件的定义只接受function) Vue实例的数据对象。Vue将会递归将data的属性转换为getter /settter ,从而让data的属性能够响应数据变化(对象必须是纯粹的对象(含有零个或多个的key/value 对))

      props:可以是数组或对象,用于接收来自父组件的数据 (可以是简单的数组。或者使用对象作为替代,对象允许配置高级选项,如 类型检测,自定义检验和设置默认值)

      propsData :类型{ [key:string ] :any} (只用于new 创建的实例中)(创建实例时床底props。主要用于方便测试)

      computed:{ [ key:string] :Function |  { get :Function , set :Function }}

      计算属性将混入到Vue实例中。所有 getter 和 setter 的 this上下文自动地绑定为Vue实例 (如果为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其 实例作为函数的第一参数来访问)

      计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,(注:如果某个依赖(比如非响应属性)在该实例范畴之外,则计算属性是不会被更新。)

 

      methods { [ key:string ] :Function } methods将被混入Vue实例中,可以直接通过VM 实例访问这些方法,或者在指令表达式 中使用。方法中的this自动绑定为Vue 实例。(注:不应该使用箭头函数来定义method 函数  原因:箭头函数绑定了父级作用域的上下文,this将不会按照期望值指向Vue实例,会返回一个undefined)

      watch :{ [ key:string ] : string | Function | Object Array }

      一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象(Vue 实例将会在实例时调用$watch() ,遍历watch 对象的每一个属性)

选项/DOM   el : (只在有new创建的实例中遵守。)

选项/生命周期钩子 :生命周期函数就是Vue实例在某一个时间点会自动执行的函数  。 生命周期函数并不放methods 里而是直接放在实例里。

 beforeCreate 在实例初始化之后,数据观测(data observer)和 event / watcher 事件配置之前被调用

created :在实例创建完成后立即调用。在这一步,实例已完成一下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而。挂载阶段还没开始。$el 属性目前不可见。

beforeMount :在挂载开始之前被调用(该钩子在服务器端渲染期间不被调用)

mounted :el 被新创建的 vm.$el 替换 ,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

beforeupdate :数据更新时调用。发生在虚拟DOM打补丁之前。(这里适合在更新之前访问现有DOM,比如手动移除一添加的事件监听器)

updated :由于数据更改导致的虚拟DOM 重新

 

选项/资源

选项/组合

选项/其他

实例属性

实例方法/数据

实例方法/事件

实例方法/生命周期

指令

v-text

v-html

v-if 

v-if v-else v-else-if

v-for 

v-on

v-bind

v-model:随表单控件类型不同而不同 (限制  input select textarea components)

修饰符   .lazy .number .trim (在表单控件或这组件上创建双向绑定) 

v-pre :(不需要表达式) 跳过这个元素和他子元素的编译过程,可以用来显示原始的Mustache标签(跳过打;大量没有节点会加快编译)

<span v-pre>{{ this will not be compiled }}</span>

v-clock (不需要表达式) 这个指令保持在元素上直到关联实例结束编译。和css规则如[ v-clock { display : none }] 一起用时,这个指令会隐藏未编译的Mustache 标签直到实例准备完毕。

[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>


不会显示,直到编译结束

v-once (不需要表达式) 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>

特殊特性

key 

ref

slot

slot-scope

scope

is

 

内置组件

VNode接口

服务端渲染

 

posted @ 2018-12-18 17:29  jade柒  阅读(334)  评论(0编辑  收藏  举报