博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue
阅读量:4450 次
发布时间:2019-06-07

本文共 1537 字,大约阅读时间需要 5 分钟。

内部指令:

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() 用来销毁实例 需在实例外原生调用 οnclick=‘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

你可能感兴趣的文章
[happyctf]部分writeup
查看>>
HDU 1195 Open the Lock(BFS)
查看>>
Struts2的crud
查看>>
java上传文件
查看>>
大学生对技术网站需求的调查问卷结果分析
查看>>
测试一
查看>>
vertx的HttpServer模块
查看>>
as3事件流机制彻底理解
查看>>
Selenium webdriver操作日历控件
查看>>
Pascal程序练习-与7无关的数
查看>>
Linux:cut命令...未完待续
查看>>
PX4地面站QGroundControl在ubuntu下的安装
查看>>
react实现svg实线、虚线、方形进度条
查看>>
Web
查看>>
那些容易忽略的事(1) -变量与运算符+
查看>>
九度oj 题目1252:回文子串
查看>>
(十一)tina | openwrt关闭调试串口(DEBUG UART)
查看>>
angularjs 使用angular-sortable-view实现拖拽效果(包括拖动完成后的方法使用)
查看>>
2015生命之旅---南京、南通、上海之行
查看>>
高精度练习之乘法(codevs_3117)
查看>>