内部指令:
v-pre:跳过vue编译,直接输出原始值,<div v-pre>{{message}}</div>
v-cloak:在vue渲染完指定的整个DOM后才进行显示,必须和css样式一起使用
[v-cloak]{display:none} <div v-cloak>{{message}}</div>
v-once:在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程
全局API
1、Vue.directive 自定义指令
Vue.directive(‘mr_gu’,function(el,binding,vnode){el.style=‘color’+binding.value})
el:指令所绑定的元素,可以用来直接操作DOM
binding:一个对象,包含指令的很多信息
vnode:Vue编译生成的虚拟节点
自定义指令有五个生命周期(也叫钩子函数),分别是bind,inserted,update,componentUpdated,unbind
2、Vue.extend返回一个扩展实例构造器,也就是预设了部分选项的Vue实例构造器,通常服务于Vue.component用来生产组件实例,并挂载道自定义元素上
3、Vue.set的作用就是在构造器外部操作构造器内部的数据属性或者方法。
function(){Vue.set(outData,’count’,4)} 或者 app.count++或者 outData.count++等都可以实现改变构造器内部数据
由于Javascript的限制,Vue不能自动检测以下变动的数组。
*当你利用索引直接设置一个项时,vue不会为我们自动更新。
*当你修改数组的长度时,vue不会为我们自动更新。
4、Vue.component全局组件就是在构造器外部使用此方法来注册的组件
components:{‘gu’:{template:`<p>XXXX</p>`}}局部组件只能在组件注册的作用域里进行使用其他作用域无效
Vue构造器内的选项
1、propsData Option 用于数据传递
2、computed Option 对原数据进行改造后输出
3、methods Option
实例的方法:
1、$mount() 用来挂载我们创建的扩展的,同时也生成一个实例
let Mr_gu=Vue.extend({
template:`<p>{{msg}}</p>`,
data:function(){
return{msg:’hello’}
}
})
var vm=new Mr_gu().$mount(‘#app’)
2、$destroy() 用来销毁实例 需在实例外原生调用 onclick=‘destroy()’ function destroy(){vm.$destroy()}
3、$forceUpdate()更新方法 vm.$forceUpdate()
4、$nextTick() 数据修改方法当Vue构造器里的data值被修改后会调用这个方法,相当于钩子函数updated
实例的事件:
1、$on在构造器外部添加事件
app.$on(‘reduce’,function(){
console.log(‘执行了reduce()’)
this.num++
})
$on接收2个参数,第一个参数是事件的名称,第二个是一个匿名方法。如果按钮在作用域外部,可以利用$emit来执行。
2、$off关闭事件
function off(){
app.$off(‘reduce’)
}