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

2024-12-02 19:14:06

一过滤器

过滤器就是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-cli3.0使用教程【推荐】

主要内容: 零配置启动/打包一个 .vue 文件详细的搭建过程重点推荐:使用图形化界面创建/管理/运行项目安装: 卸载旧版本: 如果你事先已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g Node版本要求: 3.x需要在 Node.js 8.9或更高版本(推荐8.11.0+),点击这里可以安装node 大多数人都安装过了node,使用下面的命令行查询你的node版本 : node -v 如果你的版本不够,可
vue项目中使用Svg的方法

github demo: github地址闲聊背景本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg . 众所周知, vue-cli3 已经推出很长一段时间了,大家可以感受一下 vue-cli3 带来的零配置体验.But,也相应带来了一些弊端,就是如归需要修改默认的 loader 时,会比较麻烦. 们接下来主要使用的就是上文中提到的 svg 的 use ,先上一张 vue-cli3 搭建的项目的目录,可以看到根目录下只保留了 public/ 以及 src/
vue-cli V3.0版本的使用详解

vue-cli 3.0版本目前官网上还不是3.0版本,所以需要在github上面学习使用:github网站:https://github.com/vuejs/vue-cli/tree/dev/docs 1.项目搭建 (1).在上面的GitHub网页中,拉到底部可以看到: 然后在全局中执行命令:sudo npm install -g @vue/cli即可. 最后, vue -V //可以查看到当前的vue是3.0版本了 (2).查看vue 相关指令 vue --help 查看到的常用指令: -V
vue中使用codemirror的实例详解

这篇文章在vue里使用codemirror遇到的问题,写的很不错,还有下载的方法,大家可以点击查看. 以下是自己使用过的,做出来的例子: 做出来的效果图: 记住使用之前要npm下载哦 npm install vue-codemirror --save main.js import { codemirror } from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodemirror) 再到组件中使用 im
详解如何在vue项目中使用eslint+prettier格式化代码

对于前端代码风格这个问题一直是经久不衰,每个人都有自己的代码风格,每次看到别人代码一团糟时候我们都会吐槽下.今天给大家介绍如何使用eslint+prettier统一代码风格. 对于eslint大家应该比较了解了,是用来校验代码规范的.给大家介绍下prettier,prettier是用来统一代码风格,格式化代码的,支持js.ts.css.less.scss.json.jsx.并且集成了vscode.vim.webstorm.sublime text插件. 如果你的项目中采用的是ellint默认规则
图文讲解vue的v-if使用方法

vue提供了一个用于判断的v-if .v-else语法,可以通过v-if和v-else进行内容的显示与隐藏.下面将通过使用v-if.v-else进行数据的显示与隐藏 1.新建一个html页面,然后创建一个div设置id为app,然后在这个div里面创建两个div,同时给这两个div设置不同的文本. 代码: <div id="app"> <div>当flage为true时显示</div> <div>当flage为false时显示</d
VUE中使用MUI方法

VUE中如何使用MUI 1.第一步:下载MUI 百度搜索MUI进入其官网点击右上角github地址,下载MUI文件 2.第二步:拷贝文件拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 . 若引入的mui.css报错,可能是mui中url会指向一些图片,将图片地址的单引号改为双引号就可以了. 3.第三步:引入MUI的样式在main.js文件中,引入mui的样式 import 'mui.css文件的相对路径'; 如 import '../mui/css/mui.css'
详解vue如何使用rules对表单字段进行校验

1.在代码中,添加属性::rule <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="form-con"> <FormItem prop="phone"> <Input v-model="form.phone&
vue计算属性computed、事件、监听器watch的使用讲解

一.计算属性(computed) <template> <div class="box"> <h1>计算属性</h1> <hr>  <p><input type="text" v-model="message"></p> <!-- 对data的数据进行简单的操作这样有一个不好的地方就是后期对页面数据
vue中的router-view组件的使用教程

开发的时候有时候会遇到比如点击这个链接跳转到其他组件的情况,氮素,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用. 比如我们在一个导航组件中写了三个导航链接,他们的地址分别为:/food,/rating,/seller,点击每个导航链接都会跳转到不同的组件,我们通过<router-view></router-view> <template> <div class="navbar"> &l
Vue-router的使用和出现空白页,路由对象属性详解

Vue-router的使用和出现空白页 2018.08.28 更新 vue-router:前端路由系统--改变视图的同时不会向后端发出请求 1. hash 2.history 2018.06.25 更新 get到一个新技能 import Vue from 'vue' import Router from 'vue-router' import api from '../lib/service' //接口文档 Vue.use(Router) const router = { mode: 'hist

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

相关推荐

随机推荐