Vue.js——4.指令笔记

ゝ一世哀愁。 2023-10-11 13:18 7阅读 0赞

v-cloak:解决网速延迟 闪烁问题  
v-text=msg: 和\{ \{\}\}表达式一样，没有闪烁问题，但是前后不能加别的，覆盖原本的内容 innerText  
v-html=msg：innerHtml,一样可以打印标签  
v-band:src='msg':为元素绑定属性;可以这样写 : src='msg' 也可以写一些js表达式 :src='"..//"+msg'  
v-on:click='show':事件绑定机制 对应的在 mehods 对象 绑定的方法 或者 @表示

事件 修饰符  
@click.stop 阻止事件冒泡  
@click.prevent 阻止默认事件，比如 跳转，提交  
@click.self 实现只有点击当前元素的是才触发函数 也可以阻止冒泡。但是只是当前元素  
@click.once 只触发一次

Vue会监听data数据的改变。自动同步，不用管页面以及渲染

箭头函数解决this作用域的问题。内部的this等于外部的this

v-model 双向数据绑定，只能运用表单元素

类和行内样式都可以用对象的方式书写或者以对象数组的形式 :style="color:'red',font-size:'18px'"

v-for：循环 数组 
\{ \{i\}\}-------------\{ \{item\}\} 
item：数组的每一项，i：索引。类似于 for in

循环对象 
\{ \{val\}\}-------------\{ \{key\}\} 
val：键，key：值。n

迭代数字 
count

在使用 v-for 循环的时候 或者 特别的时候 需要唯一性，可以用:key 属性绑定唯一性  
  
v-if：true 删除或者创建元素  
v-show 不会删除。只是切换元素的 display：none样式

表达式 不一定只能是值，可以是方法 \{ \{search()\}\}

过滤器

作用：文本的格式化

调用方式：｛\{name| 过滤器NameD（'123'）\}｝//可以传递多个参数。可以调用多个过滤器

定义：Vue.filter(NameD,function(data,sd)\{  
return data+"12"+sd.repace(/疯狂/g,'谢谢')// 替换可以是正则，可以是字符串  
\})

自定义 全局按键修饰符  
Vue.config.keyCodes.f2=113

自定义指令

v-focus

el:绑定的元素 是原生的DOM对象  
Vue.directive('focus',\{  
bind:function(el)\{\}, //每当绑定的时候执行一次，没有放入dom，只是在内存中 只能一次  
inserted:function(el)\{\}// 当元素放入dom的时候  
updated:function(el)\{\} // 组件更新的时候执行  
\})

转载于:https://www.cnblogs.com/ruogu/p/10943095.html