语法糖

​ 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>