发布于 

语法糖

​ Vue指令

1.v-model 指令是一个语法糖(简写)就是简写了::value 与 @input 两段代码

1
:value = 'msg' 与 @input = 'msg=$event.target.value'

class: :class绑定类

style: 绑定行内样式

v-mode: 1

v-cloak: [v-cloak]{display:none}; 浏览器解析插值表达式闪烁问题

v-once:指渲染一次,之后不受影响 没有值

自定义过滤器:

全局: api使用方法 Vue.filter(‘过滤器名称’,’ 处理函数’)

1
Vue.filter('up',(value)=>{})

**局部:**vue实例管理的视图才可以使用

1
2
3
4
5
6
7
8
9
10
11
12
const vm = new Vue ({

filter:{
up(value){}
}
el:''
data:{

}


})

使用过滤器:进行格式转换,使用过滤器

1
2
3
4
5
6
<div>
{{***|up}}
术语:管道符


</div>

Vue操作DOM:获取dom操作dom

1.Vue.filter('过滤器名称','处理函数')固定

2.filter:{'过滤器名称':'处理函数'}固定

3.处理函数return使用固定

dom:给需要获取的表签加上ref属性

eg:<div ref='myDom'></div>

1.ref固定

2.this.$refs也是固定

3.myDom自定

Vue自定义指令

**全局自定义指令:**Vue.directive(‘指令的名称’,‘指令的配置对象’) 基本语法

指令的名字在定义时候不需要加v-,在是用的时候才需要加v-

固定属性:inserted 在使用指令的元素渲染完毕后触发的函数
这个函数执行了,代表元素渲染完毕,才可以操作元素。
最后根据你指令的需求,实现业务逻辑。el 是使用指令的dom元素
 Vue.directive('focus', {

   inserted (el) {

     el.focus()  
     dom提供的api用了获取焦点
   }
})

局部自定义指令: directives:{ key: value }基本语法

key是 指令的名称 要求:定义时候不需要加v-,在是用的时候才需要加v-

1
2
3
4
5
6
7
8
9
10
11
12
   
value是 指令的配置对象

directives: {
focus: {
inserted (el) {
el.focus()
}
}
},
el: '#app'
})

vue的计算属性:

1
2
3
4
5
6
7
8
computed: {
//
reversedMessage () {
// 反转逻辑,处理之后的结果,是一定要return出去
return this.message.split('').reverse().join('')
}
}
})

使用:直接使用

1
2
3
<div id="app">
{{reversedMessage}}
</div>

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.