Vue监听的方法有哪些

这篇“Vue监听的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue监听的方法有哪些”文章吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、网站空间、营销软件、网站建设、解放网站维护、网站推广。

Vue  是渐进式框架,自底向上增量开发,是构建数据驱动的web界面,他通过尽可能简单的API实现响应的数据绑定和组合的视图组件,与angularjs,相比它小巧,运行快数据绑定都使用{{}}  ,与react相比都提供了 组件化的试图组件,都集中在核心库,有丰富的插件库。

1. 常用标签

V-model 双向关联

V-else  与 v-else在上下相近的标签里使用,分开就会影响条件的判断

V-for (a , b)in c      遍历c ,参数a 代表各个对象,b代表索引

V- text 想内部注入文本,标签内部不再写内容

V-html 内部可以注入标签,但也是黑客突破网络的窗口

V-bind 可以动态的绑定内容 例如v-bind:src= url在下方模块的data部分写路径

如果直接写入路径会报错

动态的绑定 component 中  :is=“name”

2、监听

第一种写法

vm.$watch (‘’,function( newvalue , oldvalue){ } )

在vm=new vue外部写的 $watch 是因为在外部调用 ,升成全局 同理 $el

第二种写法

直接在vue初始化中通过

vue内部写的

watch{msg:function(newvalue,oldvalue){}

3、过滤器

(vue 1.0 有内置过滤器 vue2.0 自定义过滤器)

filter 是过滤器语法, 写在 vue前

Vue.filter(‘过滤器名字’,function(value){

if(value ){

return //具体操作

}

if(value){

return //具体操作

}

})

调用

{{ 值 | 过滤器名字 }}

4、事件阻止冒泡

1)函数内部阻止事件冒泡 e.cancelBubble=true; // 在 vue 的methods 内声明事件是添加原话

2)标签内阻止事件冒泡 @click.stop=“show1()” //添加一个stop 即可,其他正常写

3)键盘事件 keydown 函数中获取键盘编码keyCode

4)在标签内直接绑定按键事件 (英文名或键盘码)

@keyup.13=“functionname()” @keyup.enter=“functionname()”

5、生命周期 共11个

通俗理解是一个组件之类的加载失效的过程,类比于生命的开始与结束,这些特殊的时间节点被当做事件的触发条件,省去了绑定事件发生的代码量。

箭头函数this指向父级 不是实例,所以不能绑定生命周期

常用的几种

beforeMount在挂载开始之前被调用

Mounted  el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用

6、传值

1)父传子

(通过在子组件标签上绑定自定义属性式的指令,值为传递的数据,

子组件内部通过props属性名接收(数组形式 加引号【“ name”】),子组件的模板内,

直接解析加载接收的属性名。)

调用

2)子传父

(通过在 子组件标签上绑定自定义事件,子组件内部通过$emit进行数据推送

父组件通过事件调用函数参数进行数据接收)

子组件script中

父组件body中

父组件的方法中将收到的数据赋予data

3)平行组件传值(非父子组件 之间 传值—空vue对象$emit(‘’,数据) 发送 $on 接收)

可看做将$emit升为全局

以上就是关于“Vue监听的方法有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网页标题:Vue监听的方法有哪些
网址分享:http://azwzsj.com/article/gehddg.html