前端系列课程之Vue事件机制和实例对象(二)

最新推荐文章于 2022-04-25 10:07:58 发布

葡萄籽啊

最新推荐文章于 2022-04-25 10:07:58 发布

阅读量90

点赞数 1

分类专栏： Vue框架文章标签： vue

本文链接：https://blog.csdn.net/qiuqiudongdong/article/details/108998819

版权

Vue框架专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Vue过滤器

过滤器是什么

过滤器用于一些常见的文本格式化，可以自定义。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器的定义

全局过滤器的定义语法

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <title>过滤器练习</title>
</head>

<body>
    <div id="app">
        <p :title="title | first">{{title}}</p>
    </div>
    <div id="app01">
        <p :title="title ">{{title| first}}</p>
    </div>
    <script>
        Vue.filter('first', function(value) {
            return value[0]

        })
        var app = new Vue({

            el: '#app',
            data: {
                title: 'this is Vue'
            },
        })
        var app = new Vue({

            el: '#app01',
            data: {
                title: 'this is Vue'
            },
        })
    </script>
</body>

</html>

运行结果：
在这里插入图片描述

局部过滤器通过选项配置实现定义

在这里插入图片描述

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <title>过滤器练习</title>
</head>

<body>
    <div id="app">
        <p :title="title">{{title | last}}</p>
    </div>
    <script>
        var app = new Vue({

            el: '#app',
            data: {
                title: 'this is Vue'
            },
            // 仅适用于当前的实例对象
            filters: {
                last: function(value) {
                    return value[value.length - 1]
                }
            }
        })
    </script>
</body>

</html>

运行结果：

在这里插入图片描述

实际应用：

在这里插入图片描述

过滤器的应用语法

过滤器的使用语法

在这里插入图片描述

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <title>过滤器练习</title>
</head>

<body>
    <div id="app">
        <h3> 商品名称：{{product.name}}</h3>
        <h3> 商品价格：{{product.price | money(0)}}</h3>
    </div>
    <script>
        var app = new Vue({

            el: '#app',
            data: {
                product: {
                    name: 'IphoneX',
                    price: 9000
                }
            },
            // 仅适用于当前的实例对象
            filters: {
                money: function(value, moneyType) {
                    if (moneyType == 0) {
                        return `$${value}元`
                    } else if (moneyType == 1) {
                        return `￥${value}元`
                    } else {
                        return `${value}元`
                    }
                }
            }
        })
    </script>
</body>

</html>

- 使用过滤器修改日期样式：

在这里插入图片描述

Vue实例对象

常见属性：

$el
$data
$refs
$options
…

$el 表示Vue实例对象挂载的DOM元素

在这里插入图片描述

例子：（$el）

在这里插入图片描述

例子：(二)

在这里插入图片描述

$data表示Vue实例对象的data选项

在这里插入图片描述

例子：

在这里插入图片描述

$options表示Vue实例对象中在data选项之外的自定义选项

在这里插入图片描述

例子：

在这里插入图片描述

$refs表示Vue实例对象挂载的DOM中。具有ref属性的所有标签元素

例子：

在这里插入图片描述

常见方法:

$mount
$set
…

$mount() 实现Vue实力动态挂DOM元素：

在这里插入图片描述

$set() 用于给实例对象的绑定数据属性赋值：
数据属性是数组或对象

在这里插入图片描述
例子：

在这里插入图片描述

Vue实例对象的生命周期

生命周期:

Vue实例对象从构造开始到最后销毁的整个存在时期
生命周期的函数（钩子函数）

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
…

生命周期原理：

在这里插入图片描述

显示各生命周期钩子函数的执行顺序

在这里插入图片描述

总结：

Vue事件处理
Vue样式绑定

类样式
行内样式

过滤器
Vue实例对象的常见属性方法
vue实例对象的生命周期

葡萄籽啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端系列课程之Vue事件机制和实例对象(二)

Vue过滤器过滤器是什么过滤器用于一些常见的文本格式化，可以自定义。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。{{ message | capitalize }}<div v-bind:id="rawId | formatId"></div>过滤器的定义
复制链接

扫一扫