如何在Vue中使用对象提供的属性-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

如何在Vue中使用对象提供的属性

如何在Vue中使用对象提供的属性?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

10年积累的网站设计、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有黄石港免费网站建设让你可以放心的选择与我们合作。

1.1 定义过滤器的两种方式

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

Vue.filter("RMB1", function(v){
  //就是来格式化(处理)v这个数据的
  if(v==0){
   return v
  }
  return v+"元"
})

1.1.2 在Vue对象中通过filters属性类定义

var vm = new Vue({
 el:"#app",
 data:{},
 filters:{
 RMB2:function(value){
  if(value==''){
  return;
  }else{
   return '¥ '+value;
  }
 }
 }
});

 1.2 计算和监听属性

监听属性,可以帮助我们侦听data中某个数据的变化,从而做相应的自定义操作。

监听属性时一个对象,它的键时要监听的对象或者变量,值是一个函数,当监听的data数据发送变化时,会自定义执行对应的函数,这个函数在被调用时,vue会传入两个形参,第一个是变化前的数据值,第二个是变化后的数据值。



 
 Title
 



 

{{ num }}

 按钮

如何在Vue中使用对象提供的属性

二  Vue 对象的生命周期

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

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



 
 title
 



 

{{ num }}

  按钮

效果如下:

如何在Vue中使用对象提供的属性

点击按钮使数据更新后

如何在Vue中使用对象提供的属性

2.2 总结

在vue使用的过程中,如果要初始化操作,把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。

一般页面初始化使用。例如,用户访问页面加载成功以后,就要执行的ajax请求。

另一个就是created,这个阶段就是在 vue对象创建以后,把ajax请求后端数据的代码放进 created

三 阻止事件冒泡和刷新页面

3.1 阻止事件冒泡

通过 设置@click.stop来阻止事件冒泡



 
 Title
 
 



 
  
  
 

如何在Vue中使用对象提供的属性

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

通过设置 @click.prevent来阻止表单提交



 
 Title
 



 
  
  
  
  
 



如何在Vue中使用对象提供的属性

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

看完上述内容,你们掌握如何在Vue中使用对象提供的属性的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页标题:如何在Vue中使用对象提供的属性
文章源于:http://kswsj.cn/article/ppsoji.html

其他资讯