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监听的方法有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。