Vue学习计划-Vue2--Vue核心(六)过滤器和自定义指令

1. 过滤器

  1. 定义:对要显示的数据进行特定格式转换再显示(适用于一些简单逻辑的处理)
  2. 语法:
    1. 注册过滤器:Vue.filter(name, callback)new Vue{filters:{}}
    2. 使用过滤器:{{ xx | 过滤器名 }}v-bind:属性 = "xxx | 过滤器名"
  3. 备注:
    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 src="./vue.js"></script></head><body><div id="app"><!-- 计算属性 --><h3>计算属性:</h3><p>{{ nameUpper }}</p><hr><h3>过滤器:</h3><!-- 过滤器 --><p>{{ name | nameSliceFilter | nameUpperFilter }}</p><p>{{ name | nameUpperFilter }}</p><hr><!-- 过滤器传参数 --><!-- <p>{{ longName | nameSliceFilter2(9, '测试传值') }}</p> --><p>{{ longName | nameSliceFilter2(9) }}</p><p>{{ longName | nameSliceFilter2() }}</p><hr><!-- 属性过滤器 --><p :name="name | nameSliceFilter | nameUpperFilter">属性过滤器文本</p></div><script>const vm = new Vue({el: '#app',data:{name: 'abcdefg',longName: 'abcdefghigklmn'},// 计算属性computed:{nameSlice(){return this.name.slice(0,3)},nameUpper(){return this.nameSlice.toUpperCase()}},// 过滤器filters:{nameSliceFilter(val){// console.log(val);return val.slice(0,3)},nameUpperFilter(val){return val.toUpperCase()},// 过滤器传值// 可以传值,传多少个参数,就接收多少参数,但是第一个参数永远是原本数据// nameSliceFilter2(val,length, text){//     console.log(val, length,text);// }// nameSliceFilter2(val, length){nameSliceFilter2(val, length = 3){console.log(val, length);return val.slice(0, length)}}})</script></body></html>

示例:(全局过滤器)

	<!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 src="./vue.js"></script></head><body><div id="app"><p>{{ name | nameSliceFilter }}</p><p>{{ longName | nameUpperFilter }}</p></div><div id="root"><p>{{ rootName | nameSliceFilter }}</p></div><script>// 必须要把全局筛选器提前配置好Vue.filter('nameSliceFilter',(val)=>{return val.slice(0,3) })// app 实例挂载new Vue({el: '#app',data:{name: 'abcdefg',longName: 'abcdefghigklmn'},// 过滤器filters:{// vue实例内的筛选器优先级更高// nameSliceFilter(val){//     return val.slice(0,4)// },nameUpperFilter(val){return val.toUpperCase()}}})// root实例挂载new Vue({el: '#root',data:{rootName: '这是rootName的值'},})</script></body></html>

2. 内置指令

  1. v-bind, v-on,v-show

  2. v-text指令:

    1. 作用:向其所在的节点中渲染文本内容
    2. 与差值语法的区别:v-text会替换掉节点中的内容,{{ xx }} 不会

    示例:

    <body><div id="app"><!-- 通常 {{ }} 表较多, 更灵活 --><p>{{ name }}</p><p v-text="name"></p><hr><p>你好, {{ name }}</p><p v-text="name">你好,</p><hr><p>{{ str }}</p><p v-text="str"></p></div><script>new Vue({el: "#app",data:{name: "小红",str: '<h3>这是个标题</h3>'}})</script>
    </body>
    
  3. v-html指令:

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

    示例:

        <body><div id="app"><p>{{ str }}</p><p v-text="str"></p><p v-html="str"></p></div><script>new Vue({el: "#app",data:{str: '<h3>这是个标题</h3>'}})</script></body>
    
  4. v-cloak指令(没有值):

    1. 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性
    2. 使用css配合v-cloak可以解决网速慢时页面展示出 {{ xx }} 的问题
	<!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 src="./vue.js"></script><style>[v-cloak]{display: none;}</style></head><body><div id="app"><p v-cloak>{{ name }}</p></div><script>const vm = new Vue({// el: "#app",data:{name: '小红'}})setTimeout(() => {vm.$mount("#app")}, 5000);</script></body></html>
  1. v-once指令:

    1. v-once所在的节点初次动态渲染后,就视为静态内容了
    2. 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能

    示例:

    <body><div id="app"><!-- 需求: 显示初始值,也显示修改后的值 --><p v-once>初始的n值是:{{ n }}</p><p>当前的n值是:{{ n }}</p><button @click="n++">添加</button></div><script>new Vue({el: "#app",data:{n: 8}})</script>
    </body>
    
  2. v-pre指令:

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

    示例:

    <body><div id="app"><p v-pre>当前的n值是:</p><p>{{ n }}</p><button @click="n++" >添加</button></div><script>new Vue({el: "#app",data:{n: 8}})</script>
    </body>
    
  3. Vue模板语法有2大类:

    1. 插值语法:
      • 功能: 用于解析标签体内容
      • 写法: {{ xx }}, xx是js表达式,且可以直接读取到data中的所有属性
    2. 指令语法:
      • 功能:用于解析标签(包括:标签属性,标签体内容,绑定事件…)
      • 举例:v-bind:href= ‘xxx’ 或简写 :href= ‘xxx’ xxx同样要写表达式,且可以直接读取到data中的属性
      • 备注:Vue中有很多的指令,且形式都是:v-???,此处我们只拿v-bind举个例子

3. 自定义指令:

  1. 本质:是一个函数,不靠返回值获取值,靠操作收到的参数去获取值
  2. 作用: 操作DOM元素: 例如v-bind,v-show,v-if等都是对DOM元素进行操作
  3. 两种方式:
    1. 函数式:写法简单,不能操作一些细节
    directives:{// big函数何时会被调用?//  1. 指令与元素成功绑定时,(初始时)//  2. 指令所在的模板被重新解析时big(element, binding){// element:指令所绑定的元素,可以用来直接操作 DOM// binding:一个对象,包含很多属性//    value: 指令的绑定值//    name: 指令名,不包括 v- 前缀//    expression:字符串形式的指令表达式console.log(element, binding);element.innerHTML = binding.value * 10}
    }
    
    1. 对象式: 详细的表明执行到某一特定时期,调用特定函数
     directives:{fbind:{//  指令与元素成功绑定时,(初始时)bind(element, binding){// console.log('1',element, binding);element.value = binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value = binding.value}}}
    
    1. 定义语法:
      1. 局部指令:
      new Vue({
      directives:{指令名: 配置对象}
      })
      或
      new Vue({
      directives:{指令名: 回调函数}
      })
      
      1. 全局指令:
      Vue.directive(指令名, 配置对象)
      或
      Vue.directive(指令名, 回调函数)
      
  4. 配置对象中常用的3个回调:
    1. bind: 指令与元素成功绑定时调用
    2. inserted: 指令所在元素被插入页面时调用
    3. update: 指令所在模板结构被重新解析时调用
  5. 备注:
    1. 指令定义时不加v-, 但使用时要加v-
    2. 指令中的this指向的是window
    3. 指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名

示例:(局部指令–对象式)

<!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 src="./vue.js"></script></head><body><!-- 需求1:写一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 --><!-- 需求2:写一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素自动获取焦点 --><div id="app"><button @click="n++">操作</button><hr><input type="text" v-fbind="n"/></div><script>const vm = new Vue({el: '#app',data:{n: 1},directives:{// 函数式:// big函数何时会被调用?//  1. 指令与元素成功绑定时,(初始时)//  2. 指令所在的模板被重新解析时// fbind(element, binding){//    element.value = binding.value//    element.focus()// }// 对象式:fbind:{//  指令与元素成功绑定时,(初始时)bind(element, binding){// console.log('1',element, binding);element.value = binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value = binding.value}}}})</script></body></html>

示例:(局部指令–函数式)

<!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 src="./vue.js"></script></head><body><!-- 需求1:写一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 --><!-- 需求2:写一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素自动获取焦点 --><div id="app"><p>{{ name }}</p><h3>当前的n值是:<span v-text="n"></span></h3><h3>放大10倍后的n值是:<span v-big="n"></span></h3><button @click="n++">操作</button></div><script>const vm = new Vue({el: '#app',data:{name: '小红',n: 1},directives:{// big函数何时会被调用?// 1. 指令与元素成功绑定时,(初始时)// 2. 指令所在的模板被重新解析时big(element, binding){// console.log(element, binding);console.log('big');element.innerHTML = binding.value * 10}}})</script></body></html>

示例:(全局指令)

<!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 src="./vue.js"></script></head><body><div id="app"><h3>当前的n值是:<span v-text="n"></span></h3><!-- <h3>放大10倍后的n值是:<span v-big-number="n"></span></h3> --><h3>放大10倍后的n值是:<span v-big="n"></span></h3><button @click="n++">操作</button></div><hr><div id="root"><h3>当前的n值是:<span v-text="n"></span></h3><h3>放大10倍后的n值是:<span v-big="n"></span></h3><button @click="n++">操作</button></div><script>Vue.directive('big',(element, binding)=>{element.innerHTML = binding.value * 20})new Vue({el: '#app',data:{n: 1},directives:{// 多个单词的话,推荐使用kebab-case命名// 'big-number'(element, binding){//   // console.log(element, binding);//   console.log('big', this) // this指向window//   element.innerHTML = binding.value * 30// },// 优先级更高big(element, binding){// console.log(element, binding);console.log('big', this) // this指向windowelement.innerHTML = binding.value * 10}}})new Vue({el: '#root',data:{n: 1},})</script></body></html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3 文本分类入门finetune:bert-base-chinese

项目实战&#xff1a; 数据准备工作 bert-base-chinese 是一种预训练的语言模型&#xff0c;基于 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;架构&#xff0c;专门用于中文自然语言处理任务。BERT 是由 Google 在 2018 年提出的一…

gpt1与bert区别

区别1&#xff1a;网络结构&#xff08;主要是Masked Multi-Head-Attention和Multi-Head-Attention&#xff09; gpt1使用transformer的decoder&#xff0c;单向编码&#xff0c;是一种基于语言模型的生成式模型&#xff0c;更适合生成下一个单词或句子 bert使用transformer的…

Domino多Web站点托管

大家好&#xff0c;才是真的好。 看到一篇文档&#xff0c;大概讲述的是他在家里架了一台Domino服务器&#xff0c;上面跑了好几个Internet的Web网站&#xff08;使用Internet站点&#xff09;。再租了一台云服务器&#xff0c;上面安装Nginx做了反向代理&#xff0c;代理访问…

轨迹分析:Palantir评估细胞分化潜能 类似于monocle2

轨迹分析是单细胞测序分析中重要的组成部分&#xff0c;它基于细胞谱系之间“具有中间态细胞”的理论基础&#xff0c;通过结合先验知识&#xff08;细胞注释、markers&#xff09;、细胞基因表达改变等&#xff0c;为在单细胞测序数据赋予了“假时间”&#xff08;pseudotime&…

图的深度优先搜索(数据结构实训)

题目&#xff1a; 图的深度优先搜索 描述&#xff1a; 图的深度优先搜索类似于树的先根遍历&#xff0c;是树的先根遍历的推广。即从某个结点开始&#xff0c;先访问该结点&#xff0c;然后深度访问该结点的第一棵子树&#xff0c;依次为第二顶子树。如此进行下去&#xff0c;直…

每天五分钟计算机视觉:通过残差块搭建卷积残差神经网络Resnet

本文重点 随着深度神经网络的层数的增加,神经网络会变得越来越难以训练,之所以这样就是因为存在梯度消失和梯度爆炸问题。本节课程我们将学习跳跃连接方式,它可以从某一网络层获取激活a,然后迅速反馈给另外一层,甚至是神经网络的更深层,从而解决梯度消失的问题。 传统的…

关于命令行方式的MySQL服务无法启动问题原因之一解决

这里无法启动服务的原因为系统某些进行占用了3306端口问题 当你遇到无法启动的问题时&#xff0c;可以尝试通过netstat -ano命令查看系统进行信息&#xff0c;验证是否3306端口被占用 在本地地址列如果发现3306端口被占用&#xff0c;则通过 taskkill /f /pid 进程id命令关闭进…

matlab 点云放缩变换

目录 一、算法原理二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。爬虫网站自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 缩放可以独立应用于三个坐标轴,如将点 ( x , y , z ) ( x

dtm分布式事务框架之SAGA 实战

一.dtm分布式事务框架之SAGA 1.1DTM介绍 DTM是一款开源的分布式事务管理器&#xff0c;解决跨数据库、跨服务、跨语言栈更新数据的一致性问题。 通俗一点说&#xff0c;DTM提供跨服务事务能力&#xff0c;一组服务要么全部成功&#xff0c;要么全部回滚&#xff0c;避免只更…

【天线了解】1.004天线的了解以及使用

一。004天线使用步骤 1.打开天线 &#xff08;1&#xff09;天线的各种版本 注意&#xff1a; 《1》天线包括单通道天线程序&#xff0c;双通道天线程序等。 《2》在没有连接天线时&#xff0c;有的天线程序打不开。 &#xff08;2&#xff09;打开软件前的配置工作 注意&…

接鸡冠^^

欢迎来到程序小院 接鸡冠 玩法&#xff1a;左右移动棒棒君(小海豹)接住鸡冠&#xff0c;避开炸弹&#xff0c;若不小心接住炸弹则游戏结束&#xff0c; 赶紧接鸡冠吧&#xff0c;看看你能够接住多少鸡冠哦^^。。开始游戏https://www.ormcc.com/play/gameStart/211 html <di…

【精选】设计模式——策略设计模式-两种举例说明,具体代码实现

Java策略设计模式 简介 策略设计模式是一种行为型设计模式&#xff0c;它允许在运行时选择算法的行为。 在软件开发中&#xff0c;我们常常需要根据不同情况采取不同的行为。通常的做法是使用大量的条件语句来实现这种灵活性&#xff0c;但这会导致代码变得复杂、难以维护和扩…

C/C++---------------LeetCode第2154. 将找到的值乘以 2

将找到的值乘以 2 题目及要求哈希表递归 题目及要求 给你一个整数数组 nums &#xff0c;另给你一个整数 original &#xff0c;这是需要在 nums 中搜索的第一个数字。 接下来&#xff0c;你需要按下述步骤操作&#xff1a; 如果在 nums 中找到 original &#xff0c;将 ori…

Unity打包EXE自定义(拖拽)窗口大小

代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using System; using System.Runtime.InteropServices; public class MyWindow : MonoBehaviour {[DllImport("user32.dll")]private static extern IntPtr GetActiveWindow(…

CSS-自适应导航栏(flex | grid)

目标&#xff1a;实现左右各有按钮&#xff0c;中间是内容&#xff0c;自适应显示中间的内容导航栏&#xff0c;即 根据中间的宽度大小显示内容。 自适应导航栏 总结&#xff1a;推荐 flex布局 / grid布局 flex布局&#xff1a; 两侧 flex:1; ----->中间自适应 grid布局&…

uniapp(微信小程序)聊天实例,支持图片,语音,表情(附源码)

效果预览 安装教程 配置 请参考Dome 会话配置 {info:{// 用户关键字userKey:2666,// 用户手机userPhone:15252156614,// 用户昵称userName: 健健,// 头像headImg: http://d.hiphotos.baidu.com/image/h%3D300/sign0defb42225381f3081198ba999004c67/6159252dd42a2834a75bb01…

【LeetCode 0028】【字符串】实现strStr

题目 https://leetcode.com/problems/find-the-index-of-the-first-occurrence-in-a-string/ 题解 暴力O(mn), i指向haystack当前位置&#xff0c;最多共移动 m-n 次. j 指向needle 当前位置&#xff0c;i每移动一次&#xff0c;往后n个字符与needle的n个字符进行比较&#…

CRM客户关系管理系统的主要功能有哪些?

我们都知道&#xff0c;CRM系统可以帮助企业加快业务增长。如果一个企业能提高业务效率、跨团队协作、有效管理客户、轻松共享和同步数据&#xff0c;那么企业竞争力将极大地提高。基于此&#xff0c;我们说说CRM客户关系管理系统的主要功能分析。 完整的CRM是什么样的&#x…

红队专题-开源资产扫描系统-ARL资产灯塔系统

ARL资产灯塔系统 安装说明问题 &#xff1a; 安装说明 源码地址 https://github.com/TophantTechnology/ARL https://github.com/TophantTechnology/ARL/wiki/Docker-%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85-ARL 安装环境 uname -a Linux VM-24-12-centos 3.10.0-1160.49.1.e…

不简单的字符串转换问题

关卡名 字符串&#xff1a;隐形的王者 我会了✔️ 内容 1.理解字符串的基本特征 ✔️ 2.记住Java、C或者Python里字符串都是怎么用的 ✔️ 3.掌握字符串转整数的几种场景和处理方法 ✔️ 字符串里存放的可以是字母&#xff0c;可以是数字&#xff0c;也可以是特殊字符&…