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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
JavaScript中import用法总结
Jan 20 Javascript
微信小程序实现点击效果
Jun 21 Javascript
vue移动端模态框(可传参)的实现
Nov 20 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中关联查询解决思路
2015/09/20 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
PHP实现递归的三种方法
2020/07/04 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python执行使用shell命令方法分享
2017/11/08 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
财产公证书样本
2014/04/04 职场文书
建筑工地标语
2014/06/18 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年教研工作总结
2015/05/23 职场文书
欠条格式范本
2015/07/03 职场文书
Python实现机器学习算法的分类
2021/06/03 Python