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


Posted in Javascript onApril 30, 2019

一 过滤器

过滤器就是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 对象在创建时都要经过一系列的初始化过程。在这个过程中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>

效果如下:

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

点击按钮使数据更新后

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

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>

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

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基本使用之对象提供的属性功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
Jquery获取radio选中的值
May 05 jQuery
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 #Javascript
vue实现随机验证码功能的实例代码
Apr 30 #Javascript
详解vue 图片上传功能
Apr 30 #Javascript
vue移动端屏幕适配详解
Apr 30 #Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 #Javascript
微信小程序时间戳转日期的详解
Apr 30 #Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 #Javascript
You might like
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
Python实现合并字典的方法
2015/07/07 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python的几种主动结束程序方式
2019/11/22 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
财务管理专业求职信
2014/06/11 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
工作所在部门证明
2014/09/21 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书