带你10天精通vue框架（五）之vue对象提供的属性功能

最新推荐文章于 2023-11-08 09:46:06 发布
最新推荐文章于 2023-11-08 09:46:06 发布
阅读量259 收藏
点赞数
文章标签： vue python js javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45658814/article/details/106835150
版权

3. Vue对象提供的属性功能

3.1 过滤器

过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。

定义过滤器的方式有两种。

3.1.1 使用Vue.filter()进行全局定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/filters.js"></script>
</head>
<body>
    <div id="box">
        <p>{{price|RMB}}</p>
    </div>
    <script>
    /*
     * // 过滤器，有两种：
       // 全局过滤器， 通过Vue.filter("过滤器名称",匿名函数)
       Vue.filter("RMB", function(v){
          return "￥"+v;
       });
     */
    var vm = new Vue({
        el:"#box",
        data:{
            price:30.5
        }
    })
    </script>
</body>
</html>

3.1.2 在vue对象中通过filters属性局部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <p>{{price|RMB}}</p>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            price:30.5
        },
        filters:{
            RMB(v){
                return "￥"+v;
            }
        }
    })
</script>
</body>
</html>

3.4 计算和侦听属性

3.4.1 计算属性

我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <p>{{price}}</p>
    <p>{{price2}}</p>
</div>
<script>
    // 当我们需要针对data的数据尽心调整成另一个变量，留作后面其他地方进行运算使用时，可以使用计算属性得出一个新的变量
    var vm = new Vue({
        el: "#box",
        data: {
            price: 30.5
        },
        // 计算属性
        computed: {
            price2: function () {
                return this.price.toFixed(2);
            }
        }
    })
</script>
</body>
</html>

3.4.2 监听属性

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
    数量：<input type="text" v-model="num">
    单价：<input type="text" v-model="price">
    总价：{{total}}
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            num: 0,
            price: 30.5,
            total: 0
        },
        watch: {
            num(newval, oldval) {
                console.log("修改后num="+newval);
                console.log("修改前num="+oldval);
                this.total = this.price * this.num;
            },
            price() {
                this.total = this.price * this.num;
            }
        }
    })
</script>
</body>
</html>

3.5 vue对象的生命周期

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
    {{num}}
    <input type="text" v-model="num">
</div>
<script>
    var vm = new Vue({
        el: "#box",   
        data: {
            num: 30,
        },
        beforeCreate() {
            // 这里的代码执行时，vm对象尚未创建，所以data中的数据是无法操作
            // console.log(this.num); // undefined
        },
        created() {
            // 这里的代码执行时，vm对象已经创建完成，但是还没有把数据和视图模板进行绑定
            // console.log(this.num); // data的数据已经可以操作了。
            // console.log(this.$el); // 此时还没有绑定视图
            // 这里可以用于编写从后端获取数据的代码
        },
        beforeMount() {
            // 这里的代码执行时，已经绑定了视图，但是没有更新视图中的数据
            console.log(this.$el.innerHTML);
        },
        mounted() {
            // 这里的代码执行时，已经把data中的数据替换了模板视图中对应的内容了
            console.log(this.$el);
            // 这里可以用于编写一些需要操作视图额初始化代码
        },
        beforeUpdate() {
            // 更新html模板的数据之前
            console.log(this.num);
            console.log(this.$el.innerHTML)
        },
        updated() {
            // 更新html模板的数据之后
            console.log(this.num);
            console.log(this.$el.innerHTML)
        }
    })
</script>
</body>
</html>

总结：

在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。

另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

3.2 阻止事件冒泡和刷新页面

什么是事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body  onclick="alert('body')">
    <div onclick="alert('div')">
        <button>按钮</button>
    </div>
    <script>
    // 事件，event，在js中表示用户和浏览器之间进行的一次交互过程
    // 事件在触发时，就会有一个事件对象来记录整个事件发生的过程和发生的位置
    // 从事件发生位置由内及外，根据标签之间父子嵌套关系，逐层往外传播，让父级元素触发同类事件，这种事件的传递方式，就是 事件冒泡
    // 事件冒泡有好，有坏。
    // 好处就是可以利用这种机制，实现事件委托
    // 坏处就是当前元素的父级元素有同类事件，会随着冒泡直接全部执行
    </script>
</body>
</html>

使用.stop和.prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box" @click="show2">
    <!-- @click.stop来阻止事件冒泡 -->
    <button @click.stop="show">按钮</button>
    <!-- @click.prevent来阻止标签刷新 -->
    <a href="" @click.prevent="show3">a链接</a>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {},
        methods: {
            show() {
                alert("按钮");
            },
            show2() {
                // alert("父元素");
            },
            show3() {
                console.log("一句话");
            }
        }
    })
</script>
</body>
</html>

3.3 综合案例-todolist

我的计划列表

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
</head>
<body>
	<div class="list_con">
		<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">

		<ul id="list" class="list">
			<!-- javascript:; # 阻止a标签跳转 -->
			<li>
				<span>学习html</span>
				<a href="javascript:;" class="up"> ↑ </a>
				<a href="javascript:;" class="down"> ↓ </a>
				<a href="javascript:;" class="del">删除</a>
			</li>
			<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
		</ul>
	</div>
</body>
</html>

特效实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        .list_con {
            width: 600px;
            margin: 50px auto 0;
        }

        .inputtxt {
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }

        .inputbtn {
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }

        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .list li span {
            float: left;
        }

        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</head>
<body>
<div class="list_con" id="app">
    <h2>To do list</h2>
    <input type="text" v-model="text" id="txt1" class="inputtxt">
    <input type="button" @click="add" value="增加" id="btn1" class="inputbtn">

    <ul id="list" class="list">
        <!-- javascript:; # 阻止a标签跳转 -->
        <li v-for="item,key in todolist">
            <span>{{item}}</span>
            <a href="javascript:;" @click="up(key)" class="up"> ↑ </a>
            <a href="javascript:;" @click="down(key)" class="down"> ↓ </a>
            <a href="javascript:;" @click="del(key)" class="del">删除</a>
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            text: "",
            todolist: [
                "学习html",
                "学习css",
                "学习javascript",
            ]
        },
        methods: {
            add() {
                this.todolist.push(this.text);
                this.text = "";
            },
            del(key) {
                // splice 万能函数
                // 删除和替换
                // 参数1: 开始下表
                // 参数2: 元素长度，如果不填默认删除到最后
                // 参数3: 表示使用当前参数替换已经删除内容的位置
                this.todolist.splice(key, 1);
            },
            up(key) {
                // 向上移动
                // splice(删除的开始位置，删除的成员个数, 替换的新数据)
                if (key === 0) {
                    return;
                }
                //就是删掉然后插入
                ret = this.todolist.splice(key, 1)[0];
                this.todolist.splice(key - 1, 0, ret);
            },
            down(key) {
                // 向下移动
                ret = this.todolist.splice(key, 1)[0];
                this.todolist.splice(key + 1, 0, ret);
            }
        }
    });
</script>
</body>
</html>
浮游本尊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue (二) --- Vue对象提供的属性功能
weixin_30270561的博客
03-16 224
--------------------------------------------不是井里没有水，而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。 定义过滤器的方式有两种。 3.1.1 使用Vue.filter()进行全局定义 Vue.filter("RMB...
前端框架学习之Vue 1.Vue的基本语法和基本属性
小马哥的博客
09-12 584
1.什么是vue Vue.js 官网有详细点的解释。 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。 2.hello vue实例 <!DOCTYPE html> <html> <head> <meta charset
Vue 框架-04-计算属性 computed
肖朋伟
11-13 1488
Vue 框架-04-计算属性 计算属性是什么？ 大家可以去看官网解释：计算属性和侦听器 今天的第一个小实例： 为啥先放折磨一个实例，之前数据绑定的就已经可以实现了，看起来那么简单，就是为了告诉大家，当点击第一个按钮【Add to A】的时候， Age + A = 这个方法执行了，大家可以看得到 实际呢，下面的两个方法都会刷新，虽然 Age + B = 没有效果，是因为没有修改数据，后面会详细说明...
[暑假]Vue框架里面 一些属性和配置项的作用
IDApprentice的博客
08-30 394
1).被用来给元素或子组件注册引用信息(相当于 id的替代)2).应用在html标签上获取的是真实DOM元素, 应用在组件标签上的是组件实例对象 (Vuecomponent)3) 使用方式:第一:打标识: ... 或者 第二: 获取: this.$refs.xxx。...
Vue基本使用之对象提供的属性功能
11-26
本文将深入探讨Vue的基本使用，特别是对象提供的属性功能，包括过滤器、计算和监听属性以及Vue对象的生命周期。 **一、过滤器** 过滤器是Vue中用于格式化文本输出的自定义函数，可以在模板中的插值表达式或v-bind...
vue中的循环对象属性和属性值用法
10-14
在Vue.js中，`v-for`指令是一种强大的功能，它允许开发者遍历并渲染列表、数组或对象。在本篇文章中，我们将详细讨论如何在Vue中使用`v-for`来循环对象的属性和属性值。 首先，让我们回顾一下在Vue中如何通过`v-for...
vue源码学习之Object.defineProperty对象属性监听
01-21
本文介绍了vue源码学习之Object.defineProperty对象属性监听，分享给大家，具体如下： 参考版本 vue源码版本：0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。 在MDN上...
Vue之Vue.set动态新增对象属性方法
08-27
在Vue.js框架中，Vue.set是一个非常重要的方法，它主要用于在响应式对象上动态地添加新的属性，并确保这个新属性同样变得响应式，也就是说，当这个属性的值发生变化时，视图能够自动感知并更新。这在处理某些特定...
Vue2基础-Vue对象介绍
最新发布
ning_xiao_xuan的博客
11-08 522
Vue2基础-Vue对象介绍
作用域题、对象属性新写法、对象里的数据属性、双向绑定
weixin_47067248的博客
08-13 267
一 作用域题 1. 变量、函数声明提升 2. 按顺序执行 3. 关于 this -> 调用函数前面没有加 xx.fn() 都指向window -> 匿名函数指向 window 对象 var 没有块状作用域的概念/ let、const var foo = 1; function bar() { if (!foo) { var foo = 1
Vue基本使用---对象提供的属性功能
weixin_30528371的博客
04-30 225
一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数， 可以使用在两个地方：输出内容和操作数据中。 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue.filter("RMB1", function(v){ //就是来格式化(处理)v这个数据的 if(v==0){ return v ...
Vue框架入门（三）
importance_的博客
01-07 665
文章目录一、作用域二、组件的命名三、组件的注册1.全局组件的注册2.局部组件的注册3.注册第一个组件四、给组件添加点击事件五、组件的复用 一、作用域 作用域有两种：全局作用域和局部作用域 1.全局作用域：是在script双标签之间的区域，在这个区域之间声明的函数或者变量被称为全局变量和全函数。 2.局部作用域：局部作用域就是在函数的花括号之间的区域，在局部作用域声明的函数或者变量被称为局部函数和局部变量 注意：变量只能在声明的当前作用域内被访问，函数只能在被声明的当前作用域内被调用 var a = 10
vue的常用的属性有哪些？
qq_39872643的博客
08-17 2076
new vue( {el:, data:｛｝, template：， methods:{}, computed:{}, render：； watch：｛｝； } ); vue总共有7个常用的属性。如上。 el：表示一个vue对象需要挂载到哪一个html对象上面，值为那个html对象的id； data：数据，可以写死，也可以从服务器请求。 template：模板。 methods：方法，可以有多个。 computed：计算属性，可以有多个计算方法。 render:用来做渲染的操
el 能否定义作用域变量_vue 中4个级别的作用域
weixin_39530838的博客
11-25 152
除了 JS 已有的功能外，Vue还具有自己独特的作用域级别。作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的“可见性”。了解 Vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码。下面是 vue 中4个级别的作用域：全局作用域子树作用域组件作用域实例作用域来看看这些作用域分别是什么。全局作用域Vue 应用程序中的全局作用域与任何编程语言中的全局作用域类似，这些变量...
后端学习Vue前端框架(三)：Vue 对象实例及模板语法
八一菜刀的专栏
03-25 454
初次看Vue的对象实例官网文档说明,第一感觉就是这就好比后端的Spring容器框架 只是后端的Spring容器接管的对象是Bean,并提供可插拔式的插件管理机制,可以很方便的和第三方框架进行整合 而Vue则差不多,一个Vue对象实例接管的Dom对象,创建Vue对象实例后,所有的计算属性、事件、数据绑定等复杂操作都可以在Vue对象实例中事先定义好，然后再DOM模板中绑定相应的事件、已经属性值即可 V...
Vue对象属性详解
u010588886的专栏
06-23 1058
<div id="tabName"> <p>{{message}}</p> </div> new Vue({ el: '#tagName', // 绑定的标签ID，例：<div id="tabName"> data: { // 数据，可以直接在标签中显示，使用 mustache 模板语法 {{message}} message: "show message" } // 声明周期回调方法 beforeCreate
简单说说vue中的el属性
热门推荐
Goooo
01-23 2万+
每个vue2.0项目中我们都会看到入口文件(即main.js)中，在生成根实例时会配置el属性，而我们自己创建的组件中则不能配置该属性，下面引用了官方文档中对el属性的说明： el 类型：string | Element 限制：只在用new创建实例时生效。 详细： 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 在实例挂载之后，元素可以用vm.$el访问。 如果在实例...
学习vue
LDLint的博客
11-05 446
指令：带有v-前缀的特殊 attribute。 *动态参数 1.可以用方括号括起来的 JavaScript 表达式作为一个指令的参数 <a v-bind:[attributeName]="url"> ... </a> 2.空格和引号，放在 HTML attribute 名里是无效的。变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。 <!-- 这会触发一个编译警告 --> <a v-bind:['foo' + bar]="valu..
Vue框架入门教程：从基础到精通
Vue的指令系统是其强大功能之一，它们以`v-`开头，例如`v-if`用于条件渲染，`v-for`用于循环遍历，`v-bind`（简写为`:`)用于属性绑定，如`传智教育</a>`。此外，`v-on`用于事件处理，如`，这里`v-on:keyup.enter`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值