Vue.js——4.指令 笔记

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：循环 数组
<p v-for="(item,i) in list">{{i}}-------------{{item}}</p>
item：数组的每一项，i：索引。类似于 for in

循环对象
<p v-for="(val,key,i) in user">{{val}}-------------{{key}}</p>
val：键，key：值。n

迭代数字
<p v-for="count in 10">count</p>

在使用 v-for 循环的时候 或者 特别的时候 需要唯一性，可以用:key 属性绑定唯一性

v-if：true 删除或者创建元素
v-show 不会删除。只是切换元素的 display：none样式

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

 

过滤器

作用：文本的格式化

调用方式：｛{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){} // 组件更新的时候执行
})