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接口
服务端渲染