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 07 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
JS中的数组的sort方法使用示例
2014/01/22 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python新手学习raise用法
2020/06/03 Python
python3中确保枚举值代码分析
2020/12/02 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
大学生自荐材料范文
2014/12/30 职场文书
世界地球日活动总结
2015/02/09 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang