vue的内置指令（2022-04-22学习笔记）

已于 2022-04-25 14:03:52 修改
阅读量181 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
于 2022-04-22 18:27:18 首次发布
原文链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=96&spm_id_from=pageDriver
版权

一些常用的指令

在这里插入图片描述

v-text

与插值语法有一点点相同，所有字符串都当成文本显示。
在这里插入图片描述
在这里插入图片描述

v-html

支持结构的解析。

cookie

身份的标识。
在这里插入图片描述
在这里插入图片描述
别人的服务器获取cookie
在这里插入图片描述
XSS攻击！
在这里插入图片描述

总结

在这里插入图片描述

node.js开启服务器

在这里插入图片描述

v-clock

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-once

只动态渲染一次。
在这里插入图片描述
在这里插入图片描述

v-pre

v-pre加了的节点，vue再也不会去解析。
在这里插入图片描述

自定义指令

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
简写形式和完整形式。
在这里插入图片描述

自定义指令的坑

命名方式：
在这里插入图片描述
key里面的内容出现-，不能写简写形式，要写字符串形式。
在这里插入图片描述
指令中的回调的this，不是vm了。this指向windows。
局部指令===》全局指令。
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

Serena_tz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习笔记及知识点
11-22
vue基础、进阶学习笔记及知识点，vue服务端渲染知识点文件。 swiper的css、js文件。。。。
浅谈vue 锚点指令v-anchor的使用
10-16
今天小编就为大家分享一篇浅谈vue 锚点指令v-anchor的使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue指令笔记
浩然
01-13 119
基础指针 v-for：循环渲染元素 v-html：设置元素的innerHTML，该指令会导致元素的模板内容失效 v-on：注册事件 简写 “@” 事件支持一些指令修饰符，如prevent（阻止默认事件），stop（阻止事件冒泡） 事件参数会自动传递 v-bind：绑定动态属性，简写“:” v-if、v-else-if、v-else：控制元素生成 v-model：双向数据绑定，常用于表单元素 该指令是v-on和v-bind的复合板 ...
VUE指令笔记
秃头小猿的博客
12-04 528
简单的VUE入门指令，仅供参考学习
vue基础学习笔记 --- vue常用内置指令总结
MImi_0612的博客
07-13 267
vue常用的内置指令
Vue笔记---Vue指令
A_bad_boy_hahaha的博客
01-22 149
Vue笔记—Vue指令 1、v-text指令 使用效果和插值语法的效果一样 <span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> 2、v-html指令 在vue的插值语法中是不支持输出html代码的，因为在网站上渲染出来html代码是非常危险的，会遭遇XSS攻击。所以可以使用v-html指令来输出你想要打印的内容。 <div v-html="html">&l
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、...
Vue 通过自定义指令回顾v-内置指令(小结)
10-18
主要介绍了Vue 通过自定义指令回顾v-内置指令(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue简单指令笔记
weixin_30614587的博客
02-25 82
v-once 执行一次性插值，数据改变插值处内容不会更新 <span v-once>这个将不会改变: {{ msg }}</span> v-text 插入文本 <!--两行效果相同--!> <h1>{{ message }}</h1> <h1 v-text="message"></h1> ...
vue快速入门(七) 之 v-bind属性绑定
weixin_44415928的博客
03-16 400
利用v-bind的话vue可以进行标签的属性绑定,如下: <body> <div id="app"> <img v-bind:src="imgSrc" alt=""> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt...
VUE笔记——Vue指令
Rewon_duang的博客
10-01 230
调用beforeCreate函数，将要创建===>调用created函数，创建完毕===>调用beforeMount函数，将要挂载===>调用mounted函数，挂载完毕===>调用beforeUpdate函数，将要更新===>调用updated函数，更新完毕===>调用beforeDestroy函数，将要销毁===>调用destroy函数，销毁完毕。v-html可以识别html结构。data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是【Vue实例对象】
Vue学习笔记——内置指令、自定义指令
m0_53233697的博客
03-04 119
自我学习笔记
vue 笔记（指令）
qq_52179917的博客
08-08 193
v-model 双向绑定，只能给value 绑定：v-model:value=“name”；也就是只能给表单类元素（输入类元素）进行绑定；v-model:value可以简写为 v-model ，因为v-model 默认就是收集 value 的值。v-bind 单向绑定，数据只能从data 流向页面。没有完全遵守MVVM模型，，vue 的设计也是收到了他的启发。VM: 视图模型（ViewModel）vue 的。M：model 对应data中的。V: view 对应：模板dom。.........
vue内置指令学习笔记
qq_26399287的博客
09-22 168
先定义一个Vue的实例，后面的指令data都取值自这里 const vm = new Vue({ el:'#app', data:{ msg:'hello world', msg1:'<h1>hello world</h1>' imageSrc:'./logo.png', size:24, isShow:true, classA:{ red:true
vue指令笔记总结（一）
赵博林
06-16 667
本节内容 指令 属性 v-cloak 解决代码闪烁 v-text 写入文本 v-html 写入html结构 v-bind 绑定js属性 缩写 ： v-on 绑定js时间 缩写 @ 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d
VUE学习笔记--vue指令
CelineT的博客
04-06 479
vue的一些指令，v-if、v-show、v-for、v-text、v-html、v-cloak、v-once、v-pre、v-on事件指令、v-bind、 v-model用法，以及调色板简单案例
Vue学习笔记-Vue的指令
希望可以给你点帮助
11-25 292
vue的六种指令的使用方法。 1. 内容渲染指令 2. 属性绑定指令 3. 事件绑定指令 4. 双向绑定指令 5. 条件渲染指令 6. 列表渲染指令
vue学习笔记-指令篇
qq_43069222的博客
12-02 326
v-text v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 相当于元素中的innerText属性 不会解析html标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue指令</titl...
Vue（二）——常用内置指令
zg0601的博客
03-23 3139
Vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。 本文将介绍常用的Vue.js内置指令：v-if指令、v-show指令、v-else指令、v-for指令、v-bind指令、v-on指令、v-model指令、v-once指令。
vue自定义指令el-input只能输入正整数
最新发布
04-11
可以通过Vue自定义指令来实现只能输入正整数的功能。具体实现方式可以参考以下代码： ```javascript // 注册一个只允许输入正整数的指令 Vue.directive('integer', { // 当绑定的元素插入到 DOM 中时执行 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值