过滤器

过滤器是一个文本格式功能，vue允许开发人员自定义。

它可以用在两个地方：输出内容和操作数据。

1.1定义过滤器的两种方式

1.1.1使用Vue.filter()进行全局定义

Vue.filter ('RMB 1 '，函数(v){//是格式化(处理)v数据的if(v==0){ return v } return v ' yuan ' }。1.1.2是通过过滤器属性类在Vue对象中定义的

var VM=new Vue({ El : ' # app }，data:{}，filter s : { RMB 2: function(value){ if(value==' '){ return；}else{ return ' '值；} } }});1.2计算和监控属性

监控属性可以帮助我们监控数据中一些数据的变化，从而做相应的自定义操作。

监控属性是一个对象，其关键是要监控的对象或变量，其值是一个函数。当监控数据发生变化时，相应的功能将被定制和执行。调用这个函数时，vue会传入两个参数，第一个是变化前的数据值，第二个是变化后的数据值。

html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http : js/vue . js '/script/head dydiv id=' app ' P { { Num } }/P button @ click=' Num ' button/div script let VM=new vue({ El : ' # app '，data : { Num : 23 }，}，watch: {//num更改，代码为，this.num) }，} })/script/body/html

两个Vue对象的生命周期

每个vue对象在创建时都要经历一系列的初始化过程。在这个过程中，vue.js会自动运行一些叫做生命周期的钩子函数。我们可以使用这些函数在对象创建的不同阶段添加我们需要的代码，以实现特定的功能。

2.1了解数据生成、加载和更新的过程

html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http : js/vue . js '/script/head dydiv id=' app ' P { { num } }/P button @ click=' num ' button/div script let VM=new vue({ El : ' # app '，data: {num33600}，beforcreate 360 function(){ console . log(' before create，VM object)this.name='张三'；//此时没有这个对象，设置名称无效}，create d : function(){ console . log(' created，创建VM对象，设置需要控制的元素范围，num=' this . num ')；//0 this . num=20；}，before mount : function(){//this。$ el是我们上面的el属性，$el代表元素# appconsole.log(这。$ el.innerhtml)目前由vue.js控制；Console.log('装载前，VM对象没有在页面上显示数据，num=' this . num ')；}，mount ed : function(){ console . log(这。$ El . InnerHTML)；Console.log('已装载，vm对象已在页面上显示数据数据，num=' this . num ')；}，beforeUpdate:函数(){ console.log(this。$ El . InnerHTML)；Console.log('更新前，VM对象没有在页面显示更新后的数据，num=' this . num ')；}，updated : function(){ console . log(这。$ El . InnerHTML)；Console.log('已更新，VM对象已在页面上显示更新的数据，num=' this . num ')；}，})/script/body/html具有以下效果：

单击按钮更新数据

2.2总结

在使用vue的过程中，如果要初始化操作，就把初始化操作的代码放在mounted中执行。装载阶段是在vm对象将数据实现到页面之后。

使用常规页面初始化。例如，用户访问成功加载的页面后将执行的ajax请求。

另一个是创造出来的。在这个阶段，创建vue对象后，ajax请求后端数据的代码被创建

第三，防止事件冒泡并刷新页面

3.1防止事件冒泡

设置@click.stop以防止事件冒泡

html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http : js/vue。js '/脚本样式。方框1 {宽度： 200 px高度： 200像素；背景# ccc}。方框2 {宽度： 100像素；高度： 100像素；背景：粉色；}/style/head dydiv id=' app ' div class=' box 1 ' @ click=' func 1 '！-@点击，停止来阻止事件冒泡-div class=' box 2 ' @单击。停下来。防止=' func 2 '/div/div脚本让VM=new Vue({ El : ' # app }，data: {}，methods : { func 1: func(){ console。日志('框1 ')}，func 2: func(){ console。日志('框2 ' })/脚本/正文/html

3.2 阻止表单提交和页面刷新

通过设置@单击防止。来阻止表单提交

html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http : js/vue。js '/script/head dydiv id=' app ' form action=' input type=' text ' input type=' submit '！-@单击，防止来阻止表单提交-输入类型='提交'值='提交02 ' @点击。prevent=' func 3 '/form/div脚本让VM=new Vue({ El : ' # app }、data : }、methods : { func : function(){ console。日志('页面不刷新时执行点击提交的函数)},} })/脚本/正文/html

总结

以上所述是小编给大家介绍的某视频剪辑软件基本使用之对象提供的属性功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！