作者:手机用户2502903031 | 来源:互联网 | 2022-12-30 14:25
Vue常用的指令1、v-model多用于表单元素实现双向数据绑定(同angular中的ng-model)2、v-for格式:v-for字段名in(of数组json循环数组
Vue 常用的指令
1、v-model 多用于表单元素实现双向数据绑定(同 angular 中的 ng-model) 2、v-for 格式:v-for="字段名 in(of) 数组 json" 循环数组或 json(同 angular 中的 ng-repeat), 需要注意从 vue2 开始取消了$index 3、v-show 显示内容 (同 angular 中的 ng-show) 4、v-hide 隐藏内容(同 angular 中的 ng-hide) 5、v-if 显示与隐藏 (dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false)v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误 6、v-bind 动态绑定 作用: 及时对页面的数据进行更改 7、v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在 methods 里面 8、v-text 解析文本 9、v-html 解析 html 标签 10、v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、 数组型 '[{red:"isred"},{blue:"isblue"}]' 11、v-once 进入页面时 只渲染一次 不在进行渲染 12、v-cloak 防止闪烁 13、v-pre 把标签内部的元素原位输出
Vue 常用的指令都有哪些?并且说明其作用
1.v
入门:Vue六大常用内置指令
指令(Directives),是vue为开发者提供的 模板语法 ,用于辅助开发者渲染页面的基本结构 所用到的数据定义在实例的 data 中,事件定义在实例的 methods 中 只能渲染纯文本内容, 会覆盖 标签内部原本的内容 只能渲染纯文本内容, 不会覆盖 标签内部原本的内容 能将带标签的字符串渲染成html内容, 会覆盖 标签内部原本的内容 为元素的属性 动态 绑定属性值 注意: 插值表达式 和 v-bind 还支持Javascript表达式的运算 为元素绑定事件 只要是事件,就能使用的修饰符,以下列举5个常用的 只能在触发键盘事件时,使用的修饰符,以下列举2个常用的 快速获取表单数据(只应用于表单元素,如:input、textarea、select) 只能给v-model使用的修饰符 控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态添加/移除display:none样式 ,一般用于需频繁切换 控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态创建/移除元素 ,一般用于默认不展示且展示较少 配合 v-if 指令一起使用,否则将不会被识别 基于一个数组来循环渲染一个列表结构,它有特定的语法结构 v-for="item in items" 注意:在.vue文件中,只要用到 v-for指令 ,一定要绑定一个 :key 属性 作者:用户2031777005900 链接:https://juejin.cn/post/7105273755168931877
vue-常用指令&条件渲染&列表渲染
一、vue的常用指令 v-bind:用于绑定属性,通过v-bind:绑定过的属性,可以直接在属性值写表达式。可以简写为: v-on:用于绑定事件,通过v-on:绑定过的事件,可以指定vue实例定义的方法。
可以简写为@ v-model:指令用于实现对数据的双向绑定,所谓双向绑定指的是:数据发生变化重新渲染页面,页面数据发生变化重新更新数据。
8个非常实用的Vue自定义指令
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue自定义指令有全局注册和局部注册两种方式。
先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。 批量注册指令,新建 directives/index.js 文件 在 main.js 引入并调用 指令定义函数提供了几个钩子函数(可选): 下面分享几个实用的 Vue 自定义指令 需求:实现一键复制文本内容,用于鼠标右键粘贴。 思路: 使用:给 Dom 加上 v-copy 及复制的文本即可 需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件 思路: 使用:给 Dom 加上 v-longpress 及回调函数即可 背景:在开发中,有些提交保存按钮有时候会在短时间内被点击多次,这样就会多次重复请求后端接口,造成数据的混乱,比如新增表单的提交按钮,多次点击就会新增多条重复的数据。
需求:防止按钮在短时间内被多次点击,使用防抖函数限制规定时间内只能点击一次。 思路: 使用:给 Dom 加上 v-debounce 及回调函数即可 背景:开发中遇到的表单输入,往往会有对输入内容的限制,比如不能输入表情和特殊字符,只能输入数字或字母等。 我们常规方法是在每一个表单的 on-change 事件上做处理。
这样代码量比较大而且不好维护,所以我们需要自定义一个指令来解决这问题。 需求:根据正则表达式,设计自定义处理表单输入规则的指令,下面以禁止输入表情和特殊字符为例。 使用:将需要校验的输入框加上 v-emoji 即可 背景:在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列表头图等。
图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。 需求:实现一个图片懒加载指令,只加载浏览器可见区域的图片。 思路: 图片懒加载有两种方式可以实现,一是绑定 srcoll 事件进行监听,二是使用 IntersectionObserver 判断图片是否到了可视区域,但是有浏览器兼容性问题。
下面封装一个懒加载指令兼容两种方法,判断浏览器是否支持 IntersectionObserver API,如果支持就使用 IntersectionObserver 实现懒加载,否则则使用 srcoll 事件监听 + 节流的方法实现。 使用,将组件内 标签的 src 换成 v-LazyLoad 背景:在一些后台管理系统,我们可能需要根据用户角色进行一些操作权限的判断,很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。针对这种情况,我们可以通过全局自定义指令来处理。 需求:自定义一个权限指令,对需要权限判断的 Dom 进行显示隐藏。
思路: 使用:给 v-permission 赋值判断即可 需求:给整个页面添加背景水印 思路: 使用,设置水印文案,颜色,字体大小即可 需求:实现一个拖拽指令,可在页面可视区域任意拖拽元素。