vue

内部指令:

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’)

}

原文地址:https://www.cnblogs.com/gutianer/p/9469115.html