Vue基本使用之对象提供的属性功能

更新时间：2019年04月30日 16:39:40 作者：Sunzz

这篇文章主要介绍了Vue基本使用之对象提供的属性功能实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下

一过滤器

过滤器就是vue允许开发者自定义的文本格式化函数，

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

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会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
 <p>{{ num }}</p>
 <button @click="num++">按钮</button>
</div>
<script>
 let vm = new Vue({
  el: "#app",
  data: {num: 23,},
  watch: {
   //num发生变化的时候，要执行的代码,num必须是data中的键
   num: function (newval, oldval) {
    console.log("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="js/vue.js"></script>
</head>
<body>
<div id="app">
 <p>{{ num }}</p>
 <button @click="num++"> 按钮</button>
</div>
<script>
 let vm = new Vue({
  el: "#app",
  data: {num: 0},
  beforeCreate: function () {
   console.log("beforeCreate,vm对象尚未创建,num=" + this.num);
   this.name = "zhangsan"; //此时没有this对象，设置name是无效的
  },
  created: function () {
   console.log("created,vm对象创建完成,设置好了要控制的元素范围,num=" + this.num); // 0
   this.num = 20;
  },
  beforeMount: function () {
   // this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app
   console.log(this.$el.innerHTML);
   console.log("beforeMount,vm 对象尚未把data数据显示到页面中，num=" + this.num);
  },
  mounted: function () {
   console.log(this.$el.innerHTML);
   console.log("mounted,vm对象已经把data数据显示到页面中，num=" + this.num);
  },
  beforeUpdate: function () {
   console.log(this.$el.innerHTML);
   console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中，num=" + this.num);
  },
  updated: function () {
   console.log(this.$el.innerHTML);
   console.log("updated,vm对象已经把更新后的data数据显示到页面中，num=" + this.num);
  },
 })
</script>
</body>
</html>

效果如下：

点击按钮使数据更新后

2.2 总结

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

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

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

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

3.1 阻止事件冒泡

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

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
 <style>
  .box1 {
   width: 200px;
   height: 200px;
   background: #ccc;
  }

  .box2 {
   width: 100px;
   height: 100px;
   background: pink;
  }
 </style>
</head>
<body>
<div id="app">
 <div class="box1" @click="func1">
  <!-- @click.stop来阻止事件冒泡 -->
  <div class="box2" @click.stop.prevent="func2"></div>
 </div>
</div>
<script>
 let vm = new Vue({
  el: "#app",
  data: {},
  methods: {
   func1: function () {
    console.log("box1")
   },
   func2: function () {
    console.log("box2")
   }
  }
 })
</script>
</body>
</html>

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

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

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
 <form action="">
  <input type="text">
  <input type="submit">
  <!-- @click.prevent来阻止表单提交 -->
  <input type="submit" value="提交02" @click.prevent="func3">
 </form>
</div>
<script>
 let vm = new Vue({
  el: "#app",
  data: {},
  methods: {
   func3: function () {
    console.log("页面不刷新时执行点击提交的函数")
   },
  }
 })
</script>
</body>
</html>

总结

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

您可能感兴趣的文章:

Vue之读取并解析ini文件中的内容
这篇文章主要介绍了Vue之读取并解析ini文件中的内容,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue2封装webSocket的实现(开箱即用)
在Vue2中,可以使用WebSocket实时通信,本文主要介绍了vue2封装webSocket的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08
Vue中父子组件的值传递与方法传递
这篇文章主要介绍了Vue中父子组件的值传递与方法传递，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue实现宫格轮转抽奖
这篇文章主要为大家详细介绍了vue实现宫格轮转抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
简单的vue-resourse获取json并应用到模板示例
本篇文章主要介绍了简单的vue-resourse获取json并应用到模板示例，非常具有实用价值，需要的朋友可以参考下。
2017-02-02
如何利用SpringBoot与Vue3构建前后端分离项目
在当前的互联网时代,前后端分离架构已经成为构建应用系统的主流方式,本文将详细介绍如何利用 SpringBoot 与 Vue3 构建一个前后端分离的项目,感兴趣的小伙伴可以了解下
2025-04-04
登录页面的实现及跳转代码实例(vue-router)
在Vue.js中可以使用vue-router来实现前端路由,通过路由来跳转页面,这篇文章主要给大家介绍了关于登录页面的实现及跳转(vue-router)的相关资料,需要的朋友可以参考下
2023-12-12
Vue mixins混入使用解析
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧
2023-02-02
深入了解Vue.js 混入（mixins）
这篇文章主要介绍了Vue.js 混入的相关资料，文中讲解非常细致，示例代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
学习Vite的原理
这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下
2022-02-02

Vue基本使用之对象提供的属性功能

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具