Vue的过滤器、内置指令和生命周期【Vue】

news2024/11/17 21:47:45

Vue

1. 收集表单数据

收集表单数据：
若：< input type=“text”/ >，则v-model收集的是value值，用户输入的就是value值。
若：< input type=“radio”/ >，则v-model收集的是value值，且要给标签配置value值。
若：< input type=“checkbox”/ >
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. 配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注： v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <form @submit.prevent="demo">
            <!-- v-model 收集的是表单上的 value 值 -->
            账号：<input type="text" v-model.trim="userInfo.account"><br/><br/>
            密码：<input type="password" v-model="userInfo.password"><br/><br/>
            年龄：<input type="number" v-model.number="userInfo.age"><br/><br/>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/><br/>
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br/><br/>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="xian">西安</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
            </select>
            <br/><br/>
            其他信息：
            <!-- lazy 失去焦点的一瞬间收集信息 -->
            <textarea v-model.lazy="userInfo.other"></textarea><br/><br/>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.xawl.edu.cn/"><用户协议></a><br/><br/>
            <button>提交</button>
        </form>
    </div>
</body>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        new Vue({
            el: '#root',
            data: {
               userInfo: {
                    account: '',
                    password: '',
                    age: '',
                    sex: 'female',
                    //hobby的初始值可以影响到 v-model 收集回来的数据
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    agree: '',
               }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo));
                }
            }
        })
</script>
</html>

2. 过滤器

定义：对要显示的数据进行特定的格式化后再显示（适用于一些简单逻辑的处理）。
语法：
（1）注册过滤器： Vue.filter(name, callback) 或 new Vue{filters: {}}
（2）使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = " xxx | 过滤器名"
备注：
（1）过滤器也可以接收额外参数、多个过滤器也可以串联
（2）并没有改变原本的数据，是产生新的对应的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>现在是：{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeFormater}}</h3>
        <!-- 过滤器实现（传参） -->
        <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
        <h3 :x="msg | mySlice">女明星</h3>
    </div>
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    //全局过滤器
    Vue.filter('mySlice', function(value){
        return value.slice(0, 5)
    })
    new Vue({
        el: '#root',
        data: {
            time: 1621561377603, //时间戳
            msg: '你好，西安文理'
        },
        computed: {
            fmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        filters: {
            timeFormater(value, str='YYYY-MM-DD HH:mm:ss'){
                return dayjs(value).format(str)
            },
        }
    })
    new Vue({
        el: '#root2',
        data: {
            msg: 'hello,xianwenli!'
        }
    })
</script>
</html>

3. 内置指令

我们学过的指令：

  • v-bind：单向绑定解析表达式，可简写为：xxx
  • v-model：双向数据绑定
  • v-for：遍历数组/对象/字符串
  • v-on：绑定事件监听，可简写为@
  • v-if：条件渲染（动态控制节点是否存在）
  • v-else：条件渲染（动态控制节点是否存在）
  • v-show：条件渲染（动态控制节点是否展示）

3.1 v-text 指令

作用：

  1. 向其所在的节点中渲染文本内容
  2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>{{name}}</div>
        <div v-text="name"></div>
    </div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            name: '张三'
        }
    })
</script>
</html>

3.2 v-html 指令

  1. 作用：向指定节点中渲染包含html结构的内容。
  2. 与插值语法的区别：
    （1）v-html 会替换掉节点中所有的内容，{{xxx}}则不会。
    （2）v-html可以识别html结构。
  3. 严重注意：v-html有安全性问题！！！
    （1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
    （2）一定要在可信的内容上使用 v-html ，永不要用在用户提交的内容上！

3.3 v-cloak 指令（没有值）

  1. 本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

3.4 v-once 指令

  1. v-once所在节点在初次动态渲染后，就视为静态内容了。
  2. 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-once>初始化的n值是: {{n}}</h2>
        <h2>当前的n值是: {{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            n:1
        }
    })
</script>
</html>

3.5 v-pre 指令

  1. 跳过其所在节点的编译过程。
  2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

4. 自定义指令

需求1： 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前的n值是: <span v-text="n"></span></h2>
        <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el: '#root',
        data: {
            n: 1
        },
        directives: {
            big(element, binding){
                element.innerText = binding.value * 10
            }
        }
    })
</script>
</html>

big函数何时会被调用？

  1. 指令与元素成功绑定时
  2. 指令所在的模板被重新解析时

需求2： 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

new Vue({
        el: '#root',
        data: {
            n: 1
        },
        directives: {
            big(element, binding){
                element.innerText = binding.value * 10
            },
            fbind: {
                //指令与元素成功绑定时（一上来）
                bind(element, binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element, binding){
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element, binding){
                    element.value = binding.value
                }
            }
        }

自定义指令总结：

  1. 定义语法：
    （1）局部指令：new Vue({ directives:{指令名：配置对象}}) 或 new Vue({directives{指令名：回调函数}})
    （2）全局指令：Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)
  2. 配置对象中常用的3个回调：
    （1）bind：指令与元素成功绑定时调用。
    （2）inserted：指令所在元素被插入页面时调用。
    （3）update：指令所在模板结构被重新解析时调用。
  3. 备注：
    （1）指令定义时不加 v-，但使用时要加 v-；
    （2）指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

5. 生命周期

5.1 引出生命周期

生命周期：

  1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
  2. 是什么？Vue在关键时刻帮我们调用一些特殊名称的函数。
  3. 生命周期函数的名字不可更改，但函数的具体内容时程序员根据需求编写的。
  4. 生命周期函数中的this指向是 vm 或 组件实例对象。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成提示
    new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        methods: {
            
        },
        //Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用mounted
        mounted(){
            setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        }
    })
    //通过外部的定时器实现（不推荐）
    /*setInterval(() => {
        vm.opacity -= 0.01
        if(vm.opacity <= 0) vm.opacity = 1
    },16)*/
</script>
</html>

5.2 分析生命周期

在这里插入图片描述
常用的生名周期钩子：

  1. mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestory：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
    关于销毁Vue实例：
  3. 销毁后借助Vue开发者工具看不到任何信息。
  4. 销毁后自定义事件会失效，但原生DOM事件依然有效。
  5. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/419585.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

NIFI大数据进阶_离线同步MySql数据到HDFS_说明操作步骤---大数据之Nifi工作笔记0028

NIFI大数据进阶_离线同步MySql数据到HDFS_说明操作步骤---大数据之Nifi工作笔记0028

然后我们看如何把mysql中的数据,实时的同步到hdfs中去 准备工作首先,创建一个mysql表,然后启动hadoop集群 处理器我们需要这些处理器,首先通过querydatabasetable处理器,查询mysql中的数据,然后,把mysql中的数据,导入到 convertavrotojson处理器,注意querydatabasetable处理…
阅读更多...
C语言结构体练习：【通讯录（静态数组简易版）的实现】

C语言结构体练习：【通讯录（静态数组简易版）的实现】

全文目录&#x1f600; 前言&#x1f914; 模块和功能划分&#x1f928; 数据类型的选择&#x1f62e; 功能序号类型 enum&#x1f62e; 个人信息类型 PeoInfo&#x1f62e; 通讯录类型 Contact&#x1f635;‍&#x1f4ab; 功能的实现&#x1f644; 初始化通讯录 InitContact…
阅读更多...
MYSQL命令大全(详细版)

MYSQL命令大全(详细版)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了 博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点!人生格言&#xff1a;当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔&#x1f9be;&am…
阅读更多...
【快乐手撕LeetCode题解系列】——移除链表元素

【快乐手撕LeetCode题解系列】——移除链表元素

【【快乐手撕LeetCode题解系列】——移除链表元素&#x1f60e;前言&#x1f64c;删除有序数组中的重复项&#x1f64c;解法一&#xff1a;画图分析&#xff1a;&#x1f60d;思路分析&#xff1a;&#x1f60d;源代码分享&#xff1a;&#x1f60d;解法二&#xff1a;画图分析…
阅读更多...
Vite打包后直接使用浏览器打开，显示空白问题

Vite打包后直接使用浏览器打开，显示空白问题

vite打包后&#xff0c;直接用浏览器打开显示空白 1.需求&#xff1a; 安卓webview等浏览器直接打开文件显示 2.原因 &#xff08;1&#xff09;资源路径错误&#xff1a; vite.config.js 配置 base: “./” &#xff08;在webpack中则配置publicPath: "./"即可…
阅读更多...
Windows ActiveMQ安装

Windows ActiveMQ安装

Windows ActiveMQ 安装 ActiveMQ下载&#xff1a;ActiveMQ Java JDK下载&#xff1a;Java JDK20 下载完成之后解压ZIP安装包&#xff0c;解压后得到如下文件夹 找到根目录下/bin/win64/activemq.bat 双击打开&#xff0c;如果提示权限记得使用管理员身份 。 如提示Unable to e…
阅读更多...
学习数据结构第5天(线性表的链式表示)

学习数据结构第5天(线性表的链式表示)

线性表的链式表示单链表的定义单链表的基本操作双链表双链表的基本操作循环链表块状链表存储结构顺序表和链表的比较线性表的顺序存储结构的特点是逻辑关系上相邻的两个数据元素在物理位置上也是相邻的。我们会发现虽然顺序表的查询很快&#xff0c;时间复杂度为O(1)O(1)O(1),但…
阅读更多...
Java EE企业级应用开发(SSM)第5章

Java EE企业级应用开发(SSM)第5章

第5章Spring MVC入门一.预习笔记 1.Spring MVC是所有使用OOP编程语言都应该遵守的规范 2.Spring MVC的特点 强大的灵活性、非侵入性和可配置性 提供了一个前端控制器DispatcherServlet&#xff0c;开发者无须额外开发控制器对象 分工明确&#xff0c;每一个功能由一个专门…
阅读更多...
日前、日内两阶段需求响应热电综合能源联合调度研究（Matlab代码实现）

日前、日内两阶段需求响应热电综合能源联合调度研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
深度学习之卷积神经网络0基础入门学习教程——浅层深度学习（全网最详细，不详细你打我）（看不懂你打我）（对小白没用你打我）

深度学习之卷积神经网络0基础入门学习教程——浅层深度学习（全网最详细，不详细你打我）（看不懂你打我）（对小白没用你打我）

作为一个双非学校的人工智能硕士研究生&#xff0c;我在深度学习入门之初&#xff0c;学校里没人带&#xff0c;只能靠自己一点一点的摸索&#xff0c;走了很多弯路&#xff0c;因为自己并不懂得从哪里入手&#xff0c;从吴恩达的课到李沐的课等等无数种课&#xff0c;无数种书…
阅读更多...
Microsoft project 2013安装教程（含激活方法）

Microsoft project 2013安装教程（含激活方法）

目录 一、介绍 二、安装教程 三、激活 一、介绍 Microsoft project 2013中文版是由微软推出的一款项目管理软件&#xff0c;软件将可用性、功能和灵活性等完美地融合在一起&#xff0c;可以有效提升办公人员的效率&#xff0c;利用project 2013用户可以制作出…
阅读更多...
SecureCRT8.5的下载、安装和注册（详细图解）

SecureCRT8.5的下载、安装和注册（详细图解）

SecureCRT8.5的下载、安装和注册请先关闭杀毒软件和防火墙。 关闭防火墙 先打开电脑的设置&#xff0c;在弹出的界面里找到并点击更新和安全。 找到并点击Windows 安全中心&#xff0c;再在右侧找到并点击防火墙和网络保护选项。 将域网络、专用网络、公用网络这三个选项设…
阅读更多...
数据结构入门-11-红黑树

数据结构入门-11-红黑树

史上最负盛名的平衡二叉树–红黑树&#xff0c;但其实就是2-3树的一种实现 文章目录一、红黑树性质二、红黑树性质推导过程2-3树2.3.1 如何维护绝对平衡2-3树2.3.2 红黑树&2-3树2.3.3 再来看红黑树的性质1.每个节点为 Black or Red2.根节点是Black3.每一个叶子节点(最后的空…
阅读更多...
2023年郑州重点建设项目名单公布，中创“算力数据中心”项目入选！

2023年郑州重点建设项目名单公布，中创“算力数据中心”项目入选！

4月7日&#xff0c;郑州市人民政府网站公布2023年郑州市重点建设项目名单&#xff0c;名单共列项目680个&#xff0c;总投资1.08万亿元&#xff0c;年度计划投资2691亿元。 在创新驱动能力提升项目名单里&#xff0c;中创算力与人民网人民数据&#xff08;国家大数据灾备中心&a…
阅读更多...
小程序实现消息订阅及发送

小程序实现消息订阅及发送

在我们的家政服务小程序中&#xff0c;用户可以新增预约。一般的场景是新增预约的时候提醒用户接收通知&#xff0c;在状态变更的时候我们来发送订阅消息。本篇我们来讲解一下小程序订阅消息功能的开发。 1 开通订阅消息模板 要想发送订阅消息&#xff0c;首先需要选用一个消…
阅读更多...
【ES】数据同步集群

【ES】数据同步集群

【ES】数据同步&集群3.数据同步3.1.思路分析3.1.1.同步调用3.1.2.异步通知3.1.3.监听binlog3.1.4.选择3.2.实现数据同步3.2.1.思路3.2.2.导入demo3.2.3.声明交换机、队列1&#xff09;引入依赖2&#xff09;声明队列交换机名称3&#xff09;声明队列交换机3.2.4.发送MQ消息…
阅读更多...
解决macOS IntelliJ IDEA 卡顿问题

解决macOS IntelliJ IDEA 卡顿问题

写在前面的话1&#xff1a;我在撰写这篇博客时候&#xff0c;所用的IntelliJ IDEA版本是IntelliJ IDEA 2022.3.3 (Ultimate Edition)&#xff0c;你需要知道可能对于不同的IntelliJ IDEA版本会有一定的差异 写在前面的话2&#xff1a;如果我这篇博客可以帮助到你&#xff0c;请…
阅读更多...
国内可用的 ChatGPT

国内可用的 ChatGPT

国内可用的 ChatGPT 替代列表功能和使用顺便推荐列表 https://chatgpt.qdymys.cn/ &#xff1a;三小时只能用10次 https://alllinkai.com/ &#xff1a;体验完&#xff0c;要登录&#xff0c;不推荐 https://gpttalk.live/ &#xff1a;每天限制使用次数 https://chatgpt-c…
阅读更多...
深入探讨机器学习中的过拟合现象及其解决方法

深入探讨机器学习中的过拟合现象及其解决方法

1. What❓ 过拟合&#xff08;Overfitting&#xff09;是指在机器学习中&#xff0c;模型在训练集上表现较好&#xff0c;但在测试集或实际应用中表现较差的现象。过拟合发生时&#xff0c;模型过于复杂地学习了训练集中的噪声、异常值或特定模式&#xff0c;从而导致对新样本…
阅读更多...
限流：计数器、漏桶、令牌桶 三大算法的原理与实战（史上最全）

限流：计数器、漏桶、令牌桶 三大算法的原理与实战（史上最全）

限流 限流是面试中的常见的面试题&#xff08;尤其是大厂面试、高P面试&#xff09; 注&#xff1a;本文以 PDF 持续更新&#xff0c;最新尼恩 架构笔记、面试题 的PDF文件&#xff0c;请到文末《技术自由圈》公号获取 为什么要限流 简单来说&#xff1a; 限流在很多场景中用来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023