Vue.js(2) 基础：指令与功能概览

正确的开始，微笑的进步，然后持续

文章目录

        • class和Style绑定
          • v-bind绑定class
          • v-bind绑定style
        • 指令
          • v-model指令
          • v-clock指令
          • v-once指令
          • 自定义指令
        • 功能
          • 过滤器
          • 操作dom
          • 计算属性

class和Style绑定
v-bind绑定class
  • 绑定数据对象
    <div id="app"><!-- 写死: :class="{类名：是否加入这类名，类名1：是否加入这个类名1}" --><div :class="{bg:true,red:true}">盒子</div> <br /><!-- 动态: 需要把对象声明在data中，将来操作数据即可操作类名 --><div :class="classObject">盒子</div> <br /><button @click="classObject.bg=true">加bg类</button><button @click="classObject.red=true">加red类</button>
</div>
<script src="./vue.js"></script>
<script>const vm = new Vue({el: '#app',data: {classObject: {bg: false,red: false}}})
</script>
  • 绑定数组数据
    <div id="app"><!-- 写死 :class="['类名'，'类名1']" --><div :class="['bg','red']">我是div标签</div> <br /><!-- 动态 需要把数组声明放到data中，操作数组即操作类名即可 --><div :class="classArray">管你什么想法</div> <br /><button @click="classArray.push('bg')">加bg类</button><button @click="classArray.push('red')">加red类</button>
</div>
<script src="./vue.js"></script>
<script>const cm = new Vue({el: '#app',data: {classArray: []}})
</script>
  • 总结
    • :class可以使用对象 {类名：布尔类型}
    • :class可以使用数组 [‘类名’]
    • class和:class可以共存，结果类合并在一起
v-bind绑定style
  • 绑定对象类型
    <div id="app">
<!-- 写死 :style="{css属性名称:css属性值}" 注意:属性名要用驼峰命名法 反之，则需要引号包起来 -->
<div :style="{color:'pink',fontSize:'26px'}">小甜甜加油哦</div> <br />
<!-- 动态 需要把对象声明在data中 -->
<div :style="styleObject">愿有一人陪你跌沛琉璃</div> <br />
<button @click="styleObject.color='green'">变色</button>
<button @click="styleObject.fontSize='30px'">变大</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({el: '#app',data: {// 注意：响应式数据(驱动视图更新的数据)，必须提前在data中显性的声明styleObject: {color: null,fontSize: null}}
})
</script>
  • 绑定数组类型
    <div id="app">
<!-- 写死 :style="[{css属性名称:css属性值,...},{},{}...]" -->
<div :style="[{color:'red',fontSize:'26px'}]">我还是从前那个少年</div> <br />
<!-- 动态 需要将数组声明在data中 -->
<div :style="styleArray">没有一丝丝改变</div> <br />
<button @click="styleArray.push({color:'orange'})">变色</button>
<button @click="styleArray.push({fontSize:'30px'})">变大</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({el: '#app',data: {// 需要追加的选项 {color:'orange'},{fontSize:'30px'}styleArray: []}
})
</script>
  • 总结
    • :style可以使用对象 {css属性名：css属性值}
    • :style可以使用数组 [css属性名：css属性值]
    • 如果同时存在style和:style，vue操作的样式会覆盖默认样式
指令
v-model指令
  • 作用：给表单元素添加双向数据绑定的功能
  • data中的数据可以给表单元素赋值 M—>V
  • 当表单元素值发生变化去修改data中的数据为当前表单元素的值 V—>M
  • 语法糖原理
    <div id="app">
<h4>{{msg}}</h4>
<!-- <input type="text" v-model="msg"> -->
<!-- 双向数据绑定 -->
<!-- 1.M -- >V  数据复制给表单元素-->
<!-- 2.V -- >M  表单元素值改变,修改数据为当前表单元素的值-->
<!-- :value="msg" : 给表单元素赋值 -->
<!-- $event : input事件的事件对象 -->
<!-- $.event.target : input的dom对象(事件的触发源) -->
<!-- $event.target.value : 输入框的内容 -->
<!-- msg=$event.target.value : 把输入的内容重新修改msg的值 -->
<input type="text" :value="msg" @input="msg=$event.target.value">
<!-- 总结: v-model="msg" 等价于 :value="msg" @input="msg=$event.target.value-->
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({el: '#app',data: {msg: 'Hi vue'}
})
</script>
  • 绑定表单元素
    <div id="app">
<!-- 文本域 -->
<textarea v-model="textareaStr"></textarea>
<br />
<!-- 复选框 -->
<!-- 1.单个复选框 值是布尔类型 -->
<input type="checkbox" v-model="isChecked">
<!-- 2.多个复选框 -->
<input type="checkbox" value="ball" v-model="hobby"> 听音乐
<input type="checkbox" value="dama" v-model="hobby"> 敲代码
<input type="checkbox" value="book" v-model="hobby"> 面试题
<br />
<!-- 单选框 -->
<input type="radio" value="男" v-model="gender"> 男
<input type="radio" value="女" v-model="gender"> 女
<br />
<!-- 下拉框 -->
<select v-model="city"><option value="">请选择</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option>
</select>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({el: '#app',data: {textareaStr: 'Hi vue',isChecked: true,hobby: [],gender: '女',city: ''}
})
</script>
v-clock指令
  • 作用：解决模板中的插值表达式的闪烁问题
<style>/* 在模板未解析前生效 */[v-cloak] {display: none;}
</style>
<body><!-- 解决闪烁问题:加v-cloak指令和样式--><div id="app" v-cloak><h4>{{msg}}</h4></div><script src="./vue.js"></script><script>const vm = new Vue({el: '#app',data: {msg: 'Hi vue'}})</script>
</body>
v-once指令
  • 作用：让模板的某个容器只渲染一次,当他依赖的数据发生改变的时候,被指令修饰的容器不会再次渲染
<div id="app"><!-- 这个容器只想渲染一次,不再受数据的影响 --><h4 v-once>{{msg}}</h4><h1>{{msg}}</h1>
</div>
<script src="./vue.js"></script>
<script>const vm = new Vue({el: '#app',data: {msg: 'Hi vue'}})
</script>
自定义指令
  • 概念：内置指令无法实现功能，自己封装一个指令，即就是自定义指令
  • 定义一个v-focus指令，作用是让input自动获得焦点
  • 全局自定义指令 Vue.directive('指令的名称','指令配置对象')
    <div id="app">
<input type="text" v-focus>
</div>
<script src="./vue.js"></script>
<script>// 参数1：指令的名称，不包含v-，但是在使用指令的时候需要加上v-// 参数2：指令配置对象，固定属性 inserted 指定的一个函数，//   1. 该函数会在通过指令标记的元素，创建完毕之后执行//   2. 该函数有一个默认参数 el 指的是使用这个指令的元素Vue.directive('focus', {inserted(el) {// 获取焦点el.focus()}})
</script>
  • 局布自定义指令 属性名称(指令的名称)：属性的值(指令的配置对象)
<div id="app"><input type="text" v-myfocus>
</div>
<script src="./vue.js"></script>
<script>const vm = new Vue({el: '#app',// vue配置对象提供了一个选项：directives 对应 对象directives: {myfocus: {inserted(el) {el.style.height = '50px'el.focus()}}}})
</script>
功能
过滤器
  • 全局过滤器 (全局定义，在每个视图中均可使用) Vue.filter('过滤器名称','处理函数')
    <div id="app"><!-- | 在这里叫做管道符 --><h3>{{msg|myFilter}}</h3>
</div>
<div id="app2"><h3>{{msg|myFilter}}</h3>
</div>
<script src="./vue.js"></script>
<script>
// 全局过滤器Vue.filter('myFilter', (value) => {// value就是使用该过滤器前面的插值表达式的执行结果// 需要对value进行转换,将换后的结果返回出去// 必须有返回值 返回的值会输出到模板中return String(value).padStart(6, 0)})// 实例1new Vue({el: '#app',data: {msg: 103}})// 实例2new Vue({el: '#app2',data: {msg: 205}})
</script>
  • 局部过滤器 (在vue实例中定义,仅能给vue实例管理的视图使用) 属性名(过滤名称)：属性值(过滤器处理函数)
    <div id="app">
<!-- | 在这里叫做管道符 -->
<h3>{{msg|myFilter}}</h3>
</div>
<script>
new Vue({el: '#app',data: {msg: 103},// vue配置对象中,提供了选项filters，指向的是对象，可以定义多个过滤器filters: {myFilter(value) {return String(value).padStart(6, 0)}}
})
</script>
  • 总结
    • 全局 Vue.filter(‘过滤器名称’,(value)=>{// 管道符前js表达式只需结果 // 返回处理好的数据即可})
    • 局部 new Vue({filters:{‘过滤器名称’:(value)=>{// 管道符前js表达式只需结果 // 返回处理好的数据即可}}})
操作dom
  • vue提供的属性：ref
<div ref='myBom'></div>
<script>// this就是vue的实力// $refs是对象，收集了视图中所有使用了ref属性的dom元素this.$refs.myDom
</script>

<div id="app"><!-- 盒子 --><div ref="box" class="box">盒子</div><span ref="span">标签</span><!-- 特殊情况,在v-for的标签上加了ref --><ul><!-- v-for="序号 in 次数" 序号从1开始 --><li ref="li" v-for="i in 3" :key="i">{{i}}</li></ul><!-- 按钮 --><button @click="getHeight()">获取盒子高度</button>
</div>
<script src="./vue.js"></script>
<script>const vm = new Vue({el: '#app',methods: {getHeight() {// 先拿到dom容器,在获取高度console.log(this.$refs)const box = this.$refs.boxconsole.log(box.offsetHeight)// 如果给v-for的标签加了ref,会获取到所有的元素,就是数组 [dom,dom,dom]console.log(this.$refs.li)}}})
</script>
计算属性
  • 目的：模板内处理数据，如果逻辑较为复杂，对应的js表达式也会复杂，模板内的业务逻辑繁重，可维护性差
  • 作用：过计算属性，来处理这些复杂逻辑，降低模板的复杂度，提供模板的可维护性
  • 适用场景
    • 当模板内依赖data中的数据，但是需要经过较为复杂的逻辑处理，才能得到想要的数据，此时可以使用计算属性
    • 复杂逻辑在声明计算属性时候进行，模板内使用数据即可
  • 特点
    • 计算属性有缓存，提高程序性能
    • 当依赖的数据改变，计算属性也会改变
<div id="app"><!-- 复杂逻辑 --><h3>{{msg.split('').reverse().join('')}}</h3><!-- 计算属性 --><h3>{{reverseMsg}}</h3>
</div>
<script src="./vue.js"></script>
<script>const vm = new Vue({el: '#app',data: {msg: 'Hi vue'},// 声明计算属性computed: {// 属性名称(计算属性的名称)// 属性的值(计算属性的处理函数)reverseMsg() {// 对依赖的数据进行处理,且进行returnreturn this.msg.split('').reverse().join('')}}})
</script>
  • 总结
    • computed是vue的配置对象
    • computed指向的是一个对象，对象可以声明多个计算属性
    • 属性名称(计算属性的名称)
    • 属性的值(计算属性的处理函数)
      • 对需要依赖的数据，进行逻辑上的处理
      • 处理完毕后，需要return出去，返回的值就是计算属性的值
    • 在模板中使用计算属性，和使用data的方式是一样的
      • 虽然在计算属性中声明的是函数，但是在模板中使用，当中数据来使用，不需要加括号

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

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

相关文章

【Linux探索学习】第九弹——Linux工具篇（四）：项目自动化构建工具—make/Makefile

【Linux探索学习】第九弹——Linux工具篇（四）：项目自动化构建工具—make/Makefile

Linux笔记&#xff1a;https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言&#xff1a; 在前面我们学习了如何用编译并执行&#xff0c;在现代软件开发中&#xff0c;构建一个项目涉及多个步骤&#xff0c;从编译源代码到链接库文件&a…
阅读更多...
基于SpringBoot+Vue+MySQL的房屋租赁系统

基于SpringBoot+Vue+MySQL的房屋租赁系统

系统展示 系统背景 随着城市化进程的加速和人口流动性的增加&#xff0c;房屋租赁市场逐渐成为城市生活的重要组成部分。然而&#xff0c;传统的房屋租赁方式存在诸多问题&#xff0c;如信息不对称、交易成本高、租赁关系不稳定等&#xff0c;这些问题严重影响了租赁市场的健康…
阅读更多...
View三大机制（一）：触摸机制（事件分发）

View三大机制（一）：触摸机制（事件分发）

传递过程遵循如下顺序&#xff1a;Activity->Window->PhoneWindow->DecorView->RootView->ViewGroup->View View事件方法执行顺序:onTouchListener > onTouchEvent > onLongClickListener > onClickListener 主要由三个重要的方法共同完成的,只有Vi…
阅读更多...
【面试】rabbitmq的主要组件有哪些？

【面试】rabbitmq的主要组件有哪些？

目录 1. Producer&#xff08;生产者&#xff09;2. Broker&#xff08;消息代理&#xff09;3. Exchange&#xff08;交换机&#xff09;4. Queue&#xff08;队列&#xff09;5. Consumer&#xff08;消费者&#xff09;6. Binding&#xff08;绑定&#xff09;7. Channel&am…
阅读更多...
namespace 隔离实战

namespace 隔离实战

Docker简介 什么是虚拟化、容器化为什么要虚拟化、容器化?虚拟化实现 什么是虚拟化、容器化 物理机: 实际的服务器或者计算机。相对于虚拟机而言的对实体计算机的称呼。物理机提供给虚拟机以硬件环境&#xff0c;有时也称为“寄主”或“宿主”。 虚拟化: 是指通过虚拟化技术将…
阅读更多...
Java AQS CountDownLatch 源码

Java AQS CountDownLatch 源码

前言 相关系列 《Java & AQS & 目录》《Java & AQS & CountDownLatch & 源码》《Java & AQS & CountDownLatch & 总结》《Java & AQS & CountDownLatch & 问题》 涉及内容 《Java & AQS & 总结》《Java & AQS &am…
阅读更多...
Canvas 画布

Canvas 画布

文章目录 1. 初识1.1 认识画布1.2 兼容性1.3 上下文属性 2. 绘制2.1 绘制基本图形2.1.1 绘制矩形2.1.2 绘制圆形2.1.3 绘制直线2.1.4 绘制圆弧2.1.5 绘制贝塞尔二次曲线2.1.6 绘制贝塞尔三次曲线2.1.7 封装路径 2.2 颜色控制2.2.1 颜色设置2.2.2 线性渐变2.2.3 径向渐变2.2.4 圆…
阅读更多...
使用 web (vue 和DRF))实现 模拟一个IDE 功能思路

使用 web (vue 和DRF))实现 模拟一个IDE 功能思路

采用文件系统和数据库相结合的方案&#xff0c;不仅可以实现基本的文件管理&#xff0c;还可以为未来的扩展提供灵活性。结合我们讨论的内容&#xff0c;以下是更完善的策略&#xff1a; 方案概述&#xff1a;文件系统与数据库结合 文件系统负责实际的文件存储和执行操作&…
阅读更多...
javascript中的展开运算符是什么

javascript中的展开运算符是什么

展开运算符&#xff08;Spread Operator&#xff09;是 JavaScript 中一个非常有用的语法特性&#xff0c;它通过三个点 ...来展开可迭代对象&#xff08;如数组或对象&#xff09;&#xff0c;使其可以更方便地进行操作。 1. 数组中的使用 1.1 合并数组 展开运算符可以轻松地…
阅读更多...
XML解析小坑记录[正则表达式解析]

XML解析小坑记录[正则表达式解析]

一、问题描述 在做 SSO 单点登录时( 认证中为CAS服务对接 )。在完成对用户ticket票根校验后&#xff0c;返回了用户信息有关 XML 数据片段&#xff0c;例如下&#xff1a; <cas:serviceResponse xmlns:cas"http://www.xxx.xx/xx/cas"><cas:authentication…
阅读更多...
ffmpeg视频滤镜：网格-drawgrid

ffmpeg视频滤镜：网格-drawgrid

滤镜介绍 drawgrid 官网链接 》 FFmpeg Filters Documentation drawgrid会在视频上画一个网格。 滤镜使用 参数 x <string> ..FV.....T. set horizontal offset (default "0")y <string> ..FV.....T. set…
阅读更多...
（50）MATLAB最优延迟迫零均衡器仿真测试与评估

（50）MATLAB最优延迟迫零均衡器仿真测试与评估

文章目录 前言一、最优延迟迫零均衡器评估模型二、最优延迟迫零均衡器仿真代码1.代码如下&#xff1a;2.迫零均衡器函数zf_equalizer()的MATLAB源码 三、仿真结果画图1.不同权系数长度和延迟的迫零均衡器性能2. 不同权系数长度的迫零均衡器的最佳延迟 前言 对于预设均衡器延时…
阅读更多...
用AI绘画工具提升创作效率，这款神器你一定不能错过！

用AI绘画工具提升创作效率，这款神器你一定不能错过！

在如今的创作领域&#xff0c;无论是插画师、设计师&#xff0c;还是内容创作者&#xff0c;都在寻找能够提升效率的工具&#xff0c;而AI绘画工具的诞生无疑是一场创意革命。通过AI技术的支持&#xff0c;我们不再需要耗费大量时间在绘制基础草图或反复调整细节上&#xff0c;…
阅读更多...
为什么要使用Golang以及如何入门

为什么要使用Golang以及如何入门

什么是golang&#xff1f; Go是一种开放源代码的编程语言&#xff0c;于2009年首次发布&#xff0c;由Google的Rob Pike&#xff0c;Robert Griesemer和Ken Thompson开发。基于C的语法&#xff0c;它进行了一些更改和改进&#xff0c;以安全地管理内存使用&#xff0c;管理对象…
阅读更多...
Oracle故障诊断（一线DBA必备技能）之ADRCI（四）

Oracle故障诊断（一线DBA必备技能）之ADRCI（四）

1. 题记&#xff1a; 本篇博文继续详细介绍一线DBA必备技能—Oracle DB故障诊断工具ADRCI。 2. 使用 ADRCI 进行故障诊断的步骤 1. 查看警报日志 警报日志是故障诊断的重要信息源&#xff0c;它记录了数据库启动、关闭、错误消息等关键事件。 首先启动 ADRCI。在操作系统命…
阅读更多...
基于SpringBoot的项目工时统计成本核算管理源码带教程

基于SpringBoot的项目工时统计成本核算管理源码带教程

该系统是基于若依前后端分离的架构&#xff0c;前端使用vue2&#xff0c;后端使用SpringBoot2。 技术框架&#xff1a;SpringBoot2.0.0 Mybatis1.3.2 Shiro swagger-ui jpa lombok Vue2 Mysql5.7 运行环境&#xff1a;jdk8 IntelliJ IDEA maven 宝塔面板 系统与功…
阅读更多...
嵌入式学习-网络-Day04

嵌入式学习-网络-Day04

嵌入式学习-网络-Day04 1.IO多路复用 1.1poll poll同时检测键盘和鼠标事件 1.2epoll 2.服务器模型 2.1循环服务器模型 2.2并发服务器模型 多进程模型 多线程模型 IO多路复用模型 网络聊天室 项目要求 问题思考 程序流程图 1.IO多路复用 1.1poll int poll(struct pollfd *fds, n…
阅读更多...
Java 面向对象基础

Java 面向对象基础

目录 1. 面向对象2. 类与对象3. 面向对象在内存中的执行原理4. 类和对象注意事项5. this 关键字6. 构造器6.1 什么是构造器?6.2 构造器作用6.3 构造器应用场景 7. 封装性7.1 什么是封装&#xff1f;7.2 封装的设计规范7.3 封装的书写 8. 实体JavaBean 正文开始 1. 面向对象 …
阅读更多...
《华为云主机：1024的惊喜馈赠》

《华为云主机：1024的惊喜馈赠》

《华为云主机&#xff1a;1024的惊喜馈赠》 一、1024 华为送云主机之缘起&#xff08;一&#xff09;特殊日子的馈赠意义&#xff08;二&#xff09;华为云主机活动初衷 二、华为云主机领取攻略&#xff08;一&#xff09;领取条件全解析&#xff08;二&#xff09;具体领取步骤…
阅读更多...
第10章 自定义控件

第10章 自定义控件

第 10 章　自定义控件 bilibili学习地址 github代码地址 本章介绍App开发中的一些自定义控件技术&#xff0c;主要包括&#xff1a;视图是如何从无到有构建出来的、如何改造已有的控件变出新控件、如何通过持续绘制实现简单动画。然后结合本章所学的知识&#xff0c;演示了一个…
阅读更多...
最新文章

Copyright @ 2022~2023