vue基础知识总结（二）

ref属性

• 表示对dom的引用，==值==可以随便取，但不能重复
• 通过 this.$refs.值 来获取
• ref=”inputRefId”(设置) this.$refs.inputRefId(获取)

全局自定义指令Vue.directive()

• 两个参数，1 指令名字(如果名字有大写字母,使用时需要用-分割)，2 对象(表示自定义配置项)
• 使用时需要以 v-开头加上指令名字
• 配置项中有 inserted(el,bindng)钩子函数(自定义指令插入标签中执行)，el表示使用自定义指令的元素，binding表示自定义指令的信息(binding.value可以获取自定义指令属性的值，binding.expression表示自定义指令属性的表达式)

创建全局过滤器Vue.filter()

• 两个参数，1 过滤器名字, 2 过滤器处理函数(第一个参数永远为过滤的数据)

// 在需要过滤的数据后面加上管道符 | 过滤器名称 
 {{new Date() | fmtTime('/')}}

Vue.filter('fmtTime', function(time, seprator) {
    console.log(time);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    return y + seprator + m + seprator + d
  })

computed计算属性

• 创建计算属性通过computed关键字，是一个对象（在其内部定义计算属性，他是一个函数，可以当属性来使用）
• 计算属性是基于他们的依赖进行缓存的(如果不改变就使用其缓存数据)

<div id="app">
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName"
      <div>全名：{{fullName}}</div>
    </div>
    <script>
      // 计算属性是根据data中已有的属性，计算得到一个新的属性
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '',
          lastName: ''
        },
        // 创建计算属性通过computed关键字，它是一个对象
        // 计算属性是基于它们的依赖进行缓存的
        computed: {
          // 这里fullName就是一个计算属性，它是一个函数，但这个函数可以当成属性来使用
          fullName () {
            return this.firstName + this.lastName
          }
        }
      })

watch监听器

• watch是一个对象，用来监听data中数据的值，只要监听的数据 一变化，就执行相应的函数
• 需要监听的数据，就是函数的名字，有两个参数，newval,oldval。
  

<div id="app">
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName">
      <div>全名：{{watchFullName}}</div>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '',
          lastName: '',
          watchFullName: ''
        },
        // watch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数
        // 创建监听器通过watch属性，它是一个对象
        watch: {
          // 这里面的函数名很特殊，它是你需要监听的data的名字，这个函数包含两个参数，一个是newVal,一个是oldVal
          firstName (newVal, oldVal) {
            this.watchFullName = newVal + this.lastName
          },
          lastName (newVal, oldVal) {
            this.watchFullName = this.firstName + newVal
          }
        }
      })

开发时能用computed实现就用computed
需要执行异步操作时用watch

深度监听(监听对象)

• 需要监听的数据，是对象的名，其中有一个handler函数，和一个deep=true

watch: {
          user: { //user 为监听数据名字
            // hanlder这个函数名字固定
            handler (newval，oldval) {
            // 注意这两个参数都为改变后的数据
            },
            // deep:true表示深度监听
            deep: true
          }
        }

axios

1. axios发送get请求

axios.get('http://157.122.54.189:9093/api/getprodlist')
.then(res => {
  console.log(res);
// axios中将数据封装到了data属性中
  console.log(res.data);
 })
.catch(error => {
    console.log(error);
})

1. axios发送post请求

axios.post('http://157.122.54.189:9093/api/addproduct', {
  // 传递的参数
})
.then(res => {
    console.log(res.data);
})
.catch(error => {
    console.log(error);
})

过渡和动画

css类名

1. 找到需要过度的元素，用transition包裹起来，给transition标签添加name属性，这个name属性将会作为类名的前缀
2. 定义类名分为两组(入场动画，离场动画)
   
   • 入场动画 v-enter, v-enter-active, v-enter-to
   • 离场动画 v-leave-to, v-leave-active, v-leave

Animate.css第三方动画库

• 首先用 transition 标签包裹需要设置动画标签
• enter-active-class 入场动画
• leave-active-class 离场动画
• 必须添加animated类名
• enter-active-class = ‘animated fadeOutRight’

javascript钩子

• transition包裹
• before-enter 进入动画之前
• enter 进入动画中
• after-enter 进入动画完成后
• before-leave
• leave
• after-leave

注意 enter leave 有两个参数(el,done)done函数需要调用，不然after函数不会触发