【Vue】二:Vue核心处理---vue的其它指令和自定义指令

这篇具有很好参考价值的文章主要介绍了【Vue】二:Vue核心处理---vue的其它指令和自定义指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.vue的其它指令

1.1v-text 和 v-html

v-text:当做文件解析。
v-html:当做 HTML 代码解析。

1.2 v-cloak

v-cloak 配置 css 样式来解决胡子的闪现问题。
【Vue】二:Vue核心处理---vue的其它指令和自定义指令
【Vue】二:Vue核心处理---vue的其它指令和自定义指令
我们模拟网络延迟的情况下,发现出现了如上的问题。
【Vue】二:Vue核心处理---vue的其它指令和自定义指令

1.3 v-once

只渲染一次。之后将被视为静态内容。

1.4 v-pre

带有该指令的标签将不会被编译。

2. 自定义指令

2.1 函数式

指令的名字
(1)v-不需要写
(2)Vue官方建议指令的名字要全部小写,如果多个单词,使用-衔接
回调函数的执行时机包括:
(1)标签和指令第一次绑定的时候
(2)模板被重新解析的时候
回调函数有两个参数
(1)第一个参数是真实的dom元素
(2) 第二个参数是标签和指令之间绑定关系的对象

【Vue】二:Vue核心处理---vue的其它指令和自定义指令
【Vue】二:Vue核心处理---vue的其它指令和自定义指令

2.2 对象式

钩子函数:VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块。

改变父节点样式的案例:
【Vue】二:Vue核心处理---vue的其它指令和自定义指令
【Vue】二:Vue核心处理---vue的其它指令和自定义指令

2.3.定义全局的指令

【Vue】二:Vue核心处理---vue的其它指令和自定义指令文章来源地址https://www.toymoban.com/news/detail-474253.html

到了这里,关于【Vue】二:Vue核心处理---vue的其它指令和自定义指令的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 进阶 vue自定义指令 vue中常用自定义指令以及应用场景,案例书写

    除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。 我们已经介绍了两种在 Vue 中重用代码的方式:组件和组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉

    2024年02月15日
    浏览(41)
  • Vue-27、Vue自定义指令

    函数式写法 完整写法 big函数何时被调用? 指令与元素成功绑定时(一上来) 指令所在的模板被重新解析时 注意: 此时 element.focus();不凑效。原因此时指令与元素成功绑定。但是input 并未出现页面。但是当n变化时 element.focus()会生效。 所以函数式写法不完美。 对象式写法

    2024年01月19日
    浏览(37)
  • Vue(内置指令、自定义指令)

    和插值语法的效果类似 注意:不能识别标签数据 和插值语法的效果类似   当vue引入在html和js脚本前面时候网络延迟会导致页面未解析就会出现在页面 访问本地服务器比较快(没有延迟) 访问远程服务器比较慢(会有延迟) 同样可以通过chrome的开发者工具进行调整    js阻

    2024年02月01日
    浏览(49)
  • 【Vue2.0源码学习】指令篇-Vue自定义指令

    在 Vue 中,除了 Vue 本身为我们提供的一些内置指令之外, Vue 还支持用户自定义指令。并且用户有两种定义指令的方式:一种是使用全局API—— Vue.directive 来定义全局指令,这种方式定义的指令会被存放在 Vue.options[\\\'directives\\\'] 中;另一种是在组件内的 directive 选项中定义专为

    2024年02月09日
    浏览(45)
  • vue自定义指令

    Vue.js 提供了自定义指令(Directives)的特性,允许开发者自定义 HTML 标签的行为。自定义指令是 Vue 的一种高级特性,它使你可以扩展 HTML 标签的行为。通过自定义指令,你可以添加、修改或删除元素的某些行为。 vue存在许多的内置指令:如:v-html、v-model、v-for 等等。 那么如

    2024年01月22日
    浏览(47)
  • 【Vue】自定义指令

            📝个人主页: 五敷有你         🔥系列专栏: Vue ⛺️稳重求进,晒太阳 之前的v-html v-model v-for 等都是内置指令 自定义指令: 自己定义的指令,可以封装一些dom操作,扩展额外功能 操作dom:dom元素.focus() 全局注册:-语法 Vue 自动将我们的 自定义指令添加上了

    2024年02月21日
    浏览(43)
  • Vue 自定义指令

    除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例 钩子函数 指令定义

    2023年04月21日
    浏览(39)
  • VUE---自定义指令

    自定义指令:自己定义的指令,可以封装一些dom操作,扩展额外功能。可分为全局注册与                        局部注册。 全局注册(main.js中注册): Vue.directive(\\\'指令名称\\\',{         bind(ele,binding) {},  // 只执行一次;DOM渲染之前执行,里面可以进行样式操作       

    2024年01月19日
    浏览(33)
  • vue常见自定义指令

    使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码

    2024年02月08日
    浏览(44)
  • Vue3: 自定义指令

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

    2024年02月15日
    浏览(33)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包