vue的基础扩展（ props属性验证、过滤器、自定义指令、渲染函数 和 jsx、过渡 & 动画）

1. props属性验证

   • 常用形式：

         props: {
             key: keyType    // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
         }
     

     • 业务：我现在想要 > 1000 我才要， 没有 > 1000 我就不要
     • 解决： vue提供了一个 ：validator

         props: {
             key: {
                 validator( value ){
                     return value 的条件
                 }
             }
         }
     

   • 不常用形式

         props: {
             propA: [],
             propB: {
                 type: String,
                 require: true
             },
             propC: {
                 type:String,
                 default: 'yyb'
             },
             propD: {
                 type: String,
                 default: function(){
                     return 'yyb'
                 }
             }
         }
     

   • 有时候有的项目总也会使用一个叫做 vue-validate validate这些第三方库

2. 过滤器

   • vue 1.x版本一共提供了10个过滤器， 但是不满足人们使用，vue2.x全部不提供了， 交给开发者自己写
   • 但是vue提供饿了定义过滤器的方式
   • 过滤器： 对数据进行格式化的一个函数
   • 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
   • 过滤器用给一个 ’ | ’ 表示， 我们称之为 ‘管道符’
     实例代码(全局)：

   html:
   <div id="app">
        <p> {{ money }} 
           我有 {{ money| moneyFilter('$') }}
        </p>
        <p> {{ date }} 
            {{ date | dateFilter('/') }}
        </p>
    </div>
   

   javascript:
       Vue.filter('moneyFilter',(value,type)=> {
           console.log(value)
           const result = type + value;
           return result
       })
       Vue.filter('dateFilter',(value,type)=> {
           const date = new Date(value)
           const res = date.getFullYear() + type + date.getMonth() + 1 + type + date.getDate()
           return res 
       })
       new Vue({
           el: '#app',
           data: {
               money: 1000,
               date: new Date()
           }
       })
   

   （局部）：

   html:
   	<div id="app">
           <p> {{ money }} 
              我有 {{ money| moneyFilter('$') }}
           </p>
       </div>
   

   javascript:
   	new Vue({
           el: '#app',
           data: {
               money: 1000
           },
           filters: {
               moneyFilter (value,type) {
                   const result = type + value
                   return result
               }
           }
       })
   

3. 自定义指令

   • 全局自定义指令

   • 局部自定义指令

     • 指令的钩子函数（一共有5个）
       • bind : 指令和元素第一次绑定的时候调用
       • inserted ： 指令绑定的元素插入父节点的时候调用
       • update ： 指令绑定的元素自身， 或是他的内容（子节点）发生改变的时候出发
       • componentUpdated ： 指令绑定的组件自身， 或是他的内容（子节点）发生改变的时候出发
       • unbind ： 指令和元素第一次解绑是调用
     • 指令的钩子函数的参数
       • el 当前元素
       • binding 前端指令的所有信息
       • vNode 当前指令绑定的虚拟节点
       • oldVnode 指令绑定前的虚拟节点

   代码（全局）：

   html:
   	<div id="app">
   	    <div v-append v-if = "flag">
   	      {{ msg }}
   	    </div>
   	
   	    <input type="text" v-focus>
   	  </div>
   

   javascript:
   	 /* 
   	    业务： 
   	        当我打开页面的时候， input框自动获得焦点？
   	   */
   	  // Vue.directive(指令的名称，指令的配置项（钩子函数）)
   	  Vue.directive('focus',{
   	    /*  钩子函数  */
   	    bind () {
   	      console.log('指令和元素第一次绑定')
   	    },
   	    inserted ( el, binding, vnode, oldVnode ) {
   	      console.log('el',el)
   	      console.log('binding',binding)
   	      console.log('vnode',vnode)
   	      console.log('oldvnode',oldVnode)
   	
   	      el.focus()
   	      el.style.background = 'red'
   	
   	    }
   	  })
   	  Vue.directive('append',{
   	    inserted (el) {
   	      var p = document.createElement('P')
   	      p.innerHTML = '你好吗'
   	      el.appendChild(p)
   	    },
   	    update () {
   	      console.log('update')
   	    },
   	    componentUpdated () {
   	      console.log( 'componentUpdated' )
   	    },
   	    unbind ( el ) {
   	      console.log( 'unbind' )
   	    }
   	  })
   	  new Vue({
   	    el: '#app',
   	    data: {
   	      msg: 'hello 指令',
   	      flag: true
   	    }
   	  })
   

   （局部）：

   html:
   	<div id="app">
   	    <input type="text" v-focus.xxx = 'xxx'>
   	</div>
   

   	new Vue({
       el: '#app',
       data: {
         xxx: '复仇者联盟4上线',
         item: 10
       },
       directives: {
         'focus': {
           inserted ( el,binding ) {
             console.log( 'binding' , binding)
             if( binding.modifiers.junge ){
               el.style.background = 'red'
             }else{
               el.style.background = 'yellow'
             }
             el.focus()
           }
         }
       }
     })
   

4. 渲染函数 和 jsx

   1. 渲染函数 render函数 — 》 createElment
   2. jsx( javascript + xml )
      • xml 就是一种标签化的数据格式
      • jsx语法浏览器无法解析， 必须靠babel来解析
      • jsx语法出现的原因是为了解决,render函数频繁使用createElement来创建节点

   代码：

   html:
   	<div id="app"></div>
   

   javascript:
   	<script type="text/babel">
   	  new Vue({
   	    el: '#app',
   	    data: {
   	      msg: 'hello jsx'
   	    },
   	    render(){
   	      return (
   	        <div>
   	          {{ this.msg }}
   	        </div>
   	      )
   	    }
   	  })
   	</script>
   

5. 过渡 & 动画

   过渡指的是 用 css3 的transition来实现动画效果
   动画指的是用 js来实现动画效果
   Vue中一共给了四种解决方案， 但是我们常用的只有一种

   • 在 CSS 过渡和动画中自动应用 class
   • 可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】
   • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
   • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
     代码：

	<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
		html:
		<div id="app">
		    <button @click = " f = !f "> change </button>
		    <transition  
		      name = 'yyb'
		      mode = "in-out"
		      enter-active-class = 'animated slideInLeft'
		      leave-active-class = 'animated slideOutLeft'
		    >
		      <p v-if = "f"> 内容 </p>
		    </transition>
		  </div>

	javascript:
		new Vue({
    el: '#app',
    data: {
      f: true
    }
  })