【Vue3.0 ——指令学习】

这篇具有很好参考价值的文章主要介绍了【Vue3.0 ——指令学习】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

v-text

期望值是string
【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js

v-html

期望值:string

注意:在你的站点上动态渲染任意的HTML是非常危险的,因为他很容易导致XSS攻击。请只对可信内容使用HTML差值,绝不要将用户提供的内容作为插值
scoped将不会作用于v-html,可以使用css modules

css modules用法:https://blog.csdn.net/weixin_47416539/article/details/129150073
【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js

v-show

期望值:any
通过css实现显示隐藏

v-if

期望值:any
通过dom实现显示隐藏
注意:v-if的优先级比v-for的优先级高
拓展:v-elsev-else-if

v-for

【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js

v-on

缩写:@
参数:event
修饰符:

  • .stop:阻止冒泡
  • .prevent:阻止默认事件
  • .captrue:阻止捕获
  • .self:只有事件从元素本身发生才触发处理函数
  • .once:只触发一次
  • .keycode:键盘事件触发
  • .left:鼠标left时触发
  • .right:鼠标right时触发
  • .middlle:鼠标middle时触发
  • .passive:通过{passive:true}附加dom事件
    【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
    【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
    缩写::或者.(当使用.prop修饰符)
    修饰符:
  • .camel:将短横线命名的attribute转变成驼峰命名
  • .prop:强制绑定为dom property
  • .attr:强制绑定为dom attribute
    【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
    【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
    【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
    【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js

v-model

双向绑定
修饰符:

  • .lazy:监听change事件而不是input
  • .number:将输入的字符串变为数字
  • .trim:去除首尾空格

v-solt

用于声明具名插槽或是期望接收props的作用域插槽
缩写:#

【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js

v-pre

跳过该元素及其所有子元素的编译
【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js

v-once

只渲染一次并跳过之后的更新
【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js

v-memo

缓存一个模板的子树。如果数组里的每个值都与最后一次的渲染相同,那么整个子树的更新将被跳过。
如果传入空数组会与v-once效果相同
在元素和组件上都可以使用
【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
与v-for搭配使用,等于[]中的条件的时候才会进行渲染
【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
当搭配v-for使用v-memo,确保两者都绑定在同一个元素上。v-memo不能用在v-for内部

v-cloak

【Vue3.0 ——指令学习】,# Vue3.0——API学习,学习,javascript,vue.js
用来解决页面页面闪现的问题文章来源地址https://www.toymoban.com/news/detail-653925.html

到了这里,关于【Vue3.0 ——指令学习】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3源码学习api-createApp-amount

    vue3 地址 https://github.com/vuejs/core ​ Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 下面是

    2024年02月06日
    浏览(30)
  • 【js&vue】联合gtp仿写一个简单的vue框架,以此深度学习JavaScript

    lifecycle.js 注解: this.$options.beforeMount.call(this);与 this.$options.beforeMount();有什么区别: call(this)  的作用是将当前对象( this )作为参数传递给  beforeMount  方法,使得在  beforeMount  方法内部可以通过  this  访问到当前对象的上下文 直接调用了  beforeMount  方法,没有指定上下

    2024年02月09日
    浏览(53)
  • 最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记

    备注:目前 vue-cli 已处于维护模式,官方推荐基于 Vite 创建项目。 vite 是新一代前端构建工具,官网地址:https://vitejs.cn vite 的优势如下: 轻量快速的热重载(HMR),能实现极速的服务启动。 对 TypeScript 、 JSX 、 CSS 等支持开箱即用。 真正的按需编译,不再等待整个应用编译

    2024年02月20日
    浏览(46)
  • Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记

    全局安装最新vue3 升级Vue CLI: 如果是比较旧的版本,可以通过下面命令来升级 通过脚手架创建项目 父组件 子组件 UserComponent.vue 父组件 **子组件1 JiaComponent.vue ** ** 子组件2 JianComponent.vue ** 父组件 子组件 TitleComponents.vue 父组件 **子组件 NavComponent.vue ** 父组件 子组件 NavCompone

    2024年02月05日
    浏览(41)
  • 【Vue3 知识第三讲】模板语法、Vue3指令

    插值表达式 {{ data }} 可以用于渲染 Vue 中提供的数据。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 注:vue中的插值提供了真正的js环境,因此我们可以直接使用 JS 表达式 2.1 概述 指令是什么 指令就是一个自定义属性,Vue中的指令都是以 v

    2024年02月10日
    浏览(41)
  • vue3自定义指令

    在 Vue 3 中,我们可以通过使用 app.directive 方法来定义自定义指令。下面是一个简单的例子: 在上面的例子中,我们定义了一个名为 highlight 的自定义指令,它在元素被挂载时将其背景颜色设置为黄色,并在元素被卸载时将背景颜色重置为空。 在 mounted 和 unmounted 方法中,我们

    2024年01月18日
    浏览(40)
  • Vue3: 自定义指令

    vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外vue 还允许开发者自定义指令。 vue 中的自定义指令分为两类,分别是: ⚫ 私有自定义指令 ⚫ 全局自定义指令 在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下: 在使用自定义指令时

    2024年02月15日
    浏览(31)
  • 【Vue】vue3 v-draggable 拖拽指令封装

    需求:实现一个拖拽指令,可在父元素区域任意拖拽元素,同时如果传入的值为 father,则拖拽的时候以父元素为拖拽对象 思路: 1、设置需要拖拽的元素为absolute,其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3、鼠标移动(onmousemove)时计算每

    2024年02月16日
    浏览(32)
  • vue3自定义指令之防抖

    我们使用 vue 时,有时候需要用到自定义指令,例如一个防抖指令 现在有一个需求,用户在点击某个按钮时,我不希望用户在疯狂点击后,每次点击都会触发事件,像服务器发送请求,这并不是我们预期的,所以我们需要在用户点击是做防抖处理。那么怎么做到方便复用的解

    2024年02月16日
    浏览(37)
  • vue自定义指令v-loading(vue2和vue3)

      1. 目录结构: 2. 代码实现  /directives/loading/loading.vue    loading效果页面(此处使用的antd下面的组件,可自定义) /directives/loading/loading.js (实现loading组件的插入及销毁) /directives/loading/index.js (loading指令的注册) 3. 全局引入(main.js文件) 4. 使用 1. 目录结构 2. 代码实现

    2023年04月23日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包