vuejs(2)

Vue

过滤器 filter

• 作用：文本数据格式化
• 两种过滤器：1 全局过滤器 2 局部过滤器

全局过滤器

• 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用

Vue.filter('filterName', function(value) {
  // value 表示要过滤的内容
})

• 示例：

<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

<script>
  Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容
    // format 过滤器的参数
  })
</script>

局部过滤器

• 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

{
  data: {},
  // 通过 filters 属性创建局部过滤器
  filters: {
    filterName: function(value) {}
  }
}

键值修饰符

• 说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
• 键盘事件 - 键值修饰符
• 其他：修饰键（.ctrl等）、鼠标按键修饰符（.left等）

// 只有在 keyCode 是 13 时调用 vm.submit()
@keyup.13="submit"
// 使用全局按键别名
@keyup.enter="add"

---

// 通过全局 config.keyCodes 对象自定义键值修饰符别名
Vue.config.keyCodes.f2 = 113
// 使用自定义键值修饰符
@keyup.enter.f2="add"

监视数据变化 - watch

• 概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数。
• 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作
• VUE $watch

new Vue({
  data: { a: 1 },

  watch: {
    a: function(val, oldVal) {
      // val 表示当前值
      // oldVal 表示旧值
      console.log('当前值为：' + val, '旧值为：' + oldVal)
    }
  }
})

计算属性

• 说明：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值
• 注意：Mustache语法（{{}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护

• 注意：computed中的属性不能与data中的属性同名

• Vue computed属性原理

var vm = new Vue({
  el: '#app',
  data: {
    firstname: 'jack',
    lastname: 'rose'
  },
  computed: {
    fullname() {
      return this.firstname + '.' + this.lastname
    }
  }
})

计算属性的getter和setter

• 说明 1：上面直接使用方法的形式其实就是getter，对应下面的get方法
• 说明 2：set方法会在 fullName 的值发生改变时，被调用
• 注意：计算属性中的属性不要与data中的属性命名冲突，否则会报错

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

实例生命周期

• 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
• 实例生命周期也叫做：组件生命周期

生命周期介绍

• vue生命周期钩子函数
• 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

• 生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为

• 注意：vue再执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可

• 注意：钩子函数的名称都是固定的！！！

钩子函数 - beforeCreate()

• 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
• 注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

• 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
• vue实例生命周期 参考1
• vue实例生命周期 参考2
• 使用场景：发送请求获取数据

钩子函数 - beforeMounted()

• 说明：在挂载开始之前被调用

钩子函数 - mounted()

• 说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

• 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

钩子函数 - updated()

• 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

• 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
• 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - destroyed()

• 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

数据获取 vue-resource

• vue-resource
• axios

GET

• 说明：发送JSONP的方式与get请求相同

const url = 'http://vue.studyit.io/api/getnewslist'
this.$http.get(url)
  .then(data => {
    console.log(data)
    console.log(data.body)
  })

POST

// const url = 'http://182.254.146.100:8899/api/postcomment/17'
const url = 'http://vue.studyit.io/api/postcomment/17'
this.$http.post(url, {
  content: '完美！'
}, {
  emulateJSON: true
})
  .then(data => {
    console.log(data.body);
  })

JSONP

const url = 'http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&&timestamp=' + (new Date() - 0)
this.$http.jsonp(url)
  .then(data => {
    console.log(data.body);
  })

自定义指令

• 作用：进行DOM操作
• 使用场景：对纯 DOM 元素进行底层操作，比如：文本框获得焦点
• vue 自定义指令用法实例
• 两种指令：1 全局指令 2 局部指令

全局指令

Vue.directive('directiveName', {})
Vue.directive('directiveName', function() {})

Vue.directive('red', function(el, binding) {
  el.style.color = binging.value
})

局部指令

{
  directives: {
    directiveName: {}
  }
}

// 图片数据
list: [
  'http://www.benet-wh.com/uploads/allimg/170810/7-1FQ010502N92.gif',
  'http://img.mp.itc.cn/upload/20170227/3442e7d3e5834e34836e246ebe6dbabf.gif',
  'http://evgetgif.qiniudn.com/gifcoderlife-10.gif',
  'http://imgsrc.baidu.com/forum/w%3D580/sign=daa274205843fbf2c52ca62b807fca1e/93f876c6a7efce1b81e899e2a451f3deb58f65e9.jpg',
  'http://img.mp.itc.cn/upload/20160901/7675df99d558402b8b864179e739565d.jpg',
]

• vue 剖析Vue原理&实现双向绑定MVVM