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

网络编程 发布日期：2024/9/24 浏览次数：1

正在浏览：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="/UploadFiles/2021-04-02/vue.js">


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


二  Vue 对象的生命周期


每个vue 对象在创建时都要经过一系列的初始化过程。在这个过程中vue.js会自动运行一些叫做生命周期的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。


2.1 了解数据生成、加载、更新的过程







<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>title</title>
 <script src="/UploadFiles/2021-04-02/vue.js">


效果如下：


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="/UploadFiles/2021-04-02/vue.js">


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


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


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





<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.js">


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


总结


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


        

        

            
上一篇：vue组件化中slot的基本使用方法

            
下一篇：原生JS实现随机点名项目的实例代码

        

        
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？