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){} // 组件更新的时候执行
})

猜你喜欢

转载自www.cnblogs.com/ruogu/p/10943095.html
今日推荐