vue自定义指令、JSX语法和过滤器

1、自定义指令

1.1、全局指令

在main.js中使用directive()函数自定义一个v-focus全局指令（实际开发过程中，我们可以创建一个js文件专门管理自定义全局指令，然后在main.js中引入该文件即可）

import Vue from 'vue'
import App from './App'

//自定义全局指令 v-focus
Vue.directive('focus',{
  inserted:function (ele) {
    ele.focus();
  }
});

省略....

在其它组件中引入v-focus指令后，表单会自动获取焦点

  <div>    
    自动获取焦点
    <input type="text" v-focus />
  </div>

1.2、局部指令

局部指令定义使用directives，我们在某个组件中export default {}中，定义一个设置颜色的指令v-orange

export default {
        name: "AComponent",
        data(){
            return{
            }
        },
        directives:{
            orange:{
              inserted(ele){
                  ele.style.color="orange";
              }
            }
        }
    }

在模板中引用，对于文本被设置为橙色

 <div>
    <p v-orange>自定义局部指令</p>
  </div>

2、JSX语法

通常情况我们都是通过<template>模板渲染内容，除此之外还可以使用render()函数直接渲染。
新建一个JSXComponent.vue组件，注释掉<template>模板元素，使用render()函数渲染一个点击赋值事件

<!--<template>-->
<!--</template>-->

<script>
    export default {
        name: "JSXComponent",
        data(){
          return{
            msg: "",
          }
        },
        methods:{
          clickHandler:function(){
              this.msg="测试JSX（赋值）"
          }
        },
        render() {
            return(
              <div>
                { this.msg }
                <button onClick={ this.clickHandler }>点我</button>
              </div>
            )
        }
    }
</script>

3、过滤器

过滤器通常用来格式化数据，通过“管道”方式引用

3.1、全局过滤器

在main.js中使用Vue.filter()函数自动定义一个capitalize全局指令，将英文首字母转为大写

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

定义一个组件，然后引入capitalize过滤器，将msg的值hello格式化为Hello

<template>
  <div>
    <p>{{ msg | capitalize }}</p>
  </div>
</template>

<script>
    export default {
        name: "AComponent",
        data(){
            return{
              msg:"hello"
            }
        }
    }
</script>

3.2、局部过滤器

使用filters:{}，与methods:{}同级

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}