vue基础扩展

props属性验证：

–1.常用样式：

props : {
  key : keyType
}
- 业务：我现在想要 > 1000 我才要， 没有 > 1000 我就不要
- 解决： vue提供了一个 ：validator
props : {
  key : {
    validator( value ){
        return value 的条件
    }
  }
}

–2.不常用样式：

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 表达式
• 过滤器用给一个 ’ | ’ 表示， 我们称之为 ‘管道符’

1.filter过滤器（局部）:
<div id ="app">
  <p>
    {{ time }}
    {{ time | timeFilter('/') }}
  </p>
</div>
<script>
  new Vue ({
     el : '#app',
     data : {
         time : Date.now();
     },
     filters : {
        timeFilter (value, type) {
            var date = new Date(value);
            var result = date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
            return result;
        }
     }
  })
</script>

1.filter过滤器（全局）:
<div id ="app">
  <p>
    {{ time }}
    {{ time | timeFilter('/') }}
  </p>
</div>
<script>
   Vue.component('timeFilter', (value, type)=>{
       var date = new Date(value);
       var result = date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
       return result;
   })
   new Vue({
      el : '#app',
      data : {
          time :Date.now()
      }
   })
</script>

3.自定义指令：

分为：
全局自定义指令，
局部自定义指令。

指令的钩子函数有5个：
----bind  : 指令和元素第一次绑定的时候调用
----inserted  : 指令绑定的元素插入父节点的时候调用
----update  :  指定绑定的原生自身，或是他的内容（子节点）发生改变的时候出发。
----componentUpdated ： 指定绑定的组件自身，或是他的内容（子节点）发生改变的时候出发
----unbind ： 指令和元素第一次解绑的时候调用。

指令的钩子函数的参数：
--el :  当前元素
--binding  : 前端指令的所有信息
--vNode :当前指令绑定的虚拟节点
--oldVnode : 指定绑定前的虚拟节点

全局自定义指令
<div id = "app">
   <div v-append v-if = "flag">
      {{ msg }}
   </div>
   <input type="text" v-focus>
</div>
<script>
//当我打开页面的时候， 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 ();   
      }
   })
   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 : 'hellow ',
         flag : true
      }
   })
</script>

局部自定义指令：
<div id="app">
    <input type="text" v-focus.yyb = 'yyb'>
</div>
<script>
   new Vue({
      el : '#app',
      data : {
         yyb : '复仇者联盟4上线'
      },
      directives : {
           'focus' : {
             inserted (el, binding) {
                console.log( 'binding' , binding)
                if( binding.modifiers.junge ){
		            el.style.background = 'red'
		          }else{
		            el.style.background = 'yellow'
		          }
		          el.focus()
		          }
            }
      }
   })
</script>

4.渲染函数 和 jsx

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

 <div id="app"></div>
 <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

<div id = "app">
   <button @click= "f = !f"></button>
   <transition
      name = "yyb"
      mode = "in-out"
      enter-active-class = "animated slideInLeft"
      leave-active-class = "animated slideOutLeft"
   >
   <p v-if = "f">内容</p>
   </transition>
</div>
<script>
   new Vue({
      el : '#app'
      data : {
         f : true
      }
   })
</script>

6.插槽：

<div id = "app">
   <helow>
     <div> 这是组件内直接写的</div>
   </hellow>
</div>
<template id = "hellow">
   <div>
     <h3>德玛西亚</h3>
     <solt></solt>
   </div>
</template>
<script>
  Vue.component('hellow', {
     template : '#hellow'
  })
  new Vue({
     el : '#app',
  })
</script>

具名插槽
<div id = "app">
   <hellow>
      <header solt = "header">头部</header>
      <section solt = "section">头部</section>
      <footer solt = "footer">头部</footer>
   </hellow>
</div>
<template id = "hellow">
  <div>
    <solt name = "header"></solt>
    <h3>德玛西亚万岁</h3>
    <solt name = "section"></solt>
    <solt name = "footer"></solt>
  </div>
</template>
<script>
 Vue.component('hellow', {
     template : '#hellow'
 })
 new Vue ({
   el : '#app'
 })
</script>