跳到主要内容

1 篇博文 含有标签「directive」

查看所有标签

Vue常用特性应用场景

· 阅读需 9 分钟
Yana Ching
Yana Ching
Front End Engineer

汇总​

  • 过滤器（格式化日期）
  • 自定义指令（获取表单焦点）
  • 计算属性（统计图书数量）
  • 侦听器（验证图书存在性）
  • 生命周期（图书数据处理0

过滤器 filter - 格式化数据​

提示

过滤器定义

  1. 默认第一个参数是 管道符(filter)前面的数据 在本例中指的是 message
  2. 全局过滤器 定义的时候 filter 不带s
  3. 局部过滤器与 data及methods 同级
<!-- 过滤器只能用在： 双花括号插值 + v-bind 表达式 -->
<!-- 过滤不改变真正的 data，而是改变渲染的结果 -->
<div id="box" >
    <!-- {{message | filterA('10', '12')}} -->
    {{message | filterB(10,20)}}
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // 全局过滤器
    // Vue.filter('filterA', function(n, a, b) {
    //  if(n<10){
    //   return n+a
    //  }else{
    //   return n+b
    //  }
    // })
    new Vue({
        el: '#box',
        data: {
            message: 'haha'
        },
        filters: {
            filterB: function(n, a, b) {
                if(n < 10){
                    return n+a
                }else{
                    return n+b
                }
            }
        }
    })
</script>

自定义指令​

当内置指令不满足需求的时候，使用自定义指令

Vue.directive ('directiveName', {
  inserted: function() {
  // ....
  }
 })
信息
  1. 定义的时候不需要加上 'v-'
  2. 使用的时候要加上 'v-'
  3. 使用驼峰命名法 'directiveName'
  4. 自定义指令带参数（钩子函数）： a. bind: 只调用一次，指令第一次绑定到元素时调用（一次性的初始化） b. inserted: 被帮顶元素插入父节点时候调用（仅保证父节点存在，但不一定被插入文档中） c. update: 所有组组件的 VNode 更新是调用，但可能发生在其子 VNode 更新之前，指令的值可能发，也可能没有 d. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用 e. unbind: 只调用一次，指令与元素解绑时调用
  5. 局部自定义指令: 与 data及methods 同级，'directives' 意义： 当内置指令不能满足需求的时候
<!-- 当内置指令不能满足需求的时候 -->
 <div id="app">
  <input type="text" v-color="msg">
 </div>
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript">
  // 全局自定义指令 v-handle
  Vue.directive('handle', {
   inserted: function(el) {
    el.focus()
   }
  })

  // 局部自定义指令
  new Vue({
   el: '#app',
   data: {
    msg: {
     color: 'red'
    }
   },
   // 局部自定义指令
   directives: {
    color: {
     bind: function(el, binding) {
      el.style.backgroundColor = binding.value.color
      // 默认第一个参数是指令绑定的对象，binding 形参则是传入的值
     }
    }
   }
  })
 </script>

计算属性computed - 复杂逻辑计算​

提示
  1. 与方法的区别： 计算属性依赖缓存，而方法不缓存
  2. 多次调用方法，每次都会重新调用计算
  3. 多次调用计算属性，只要里面的值不变，再次调用，它会把第一次计算的结果直接返回
  4. 上述例子中 仅打印一次 'computed'
<div id="app">
    <div>{{msgA}}</div>
    <div>{{msgA}}</div>
    <div>{{msgB()}}</div>
    <div>{{msgB()}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'nnihao',
            num: 40
        },
        methods: {
            msgB: function() {
                console.log('methods')
                return this.msg.split('').reverse().join('')
                // 将字符串分隔成 数组 之后 反转 再连接数组中所有的值 => 字符串
            }
        },
        computed: {
            msgA: function() {
                console.log('computed')
                return this.msg
            }
        }
    })
</script>

侦听器- 异步执行、开销大的操作​

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

提示
  1. 使用watch来响应数据的变化 一般用于异步或者开销较大的操作
  2. watch 中的属性 一定是data 中 已经存在的数据
  3. 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够 监听到变化，此时就需要deep属性对对象进行深度监听
<div id="app">
    <div>
        <span>名：</span>
        <span>
            <input type="text" v-model="firstName">
        </span>
    </div>
    <div>
        <span>姓：</span>
        <span>
            <input type="text" v-model="lastName">
        </span>
    </div>
    <div>
        <div>{{fullName}}</div>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: ''
        },
        watch: {
            firstName: function(val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function(val) {
                this.fullName = this.firstName + ' ' + val 
            }
        }
    })
</script>

生命周期​

事物从出生到死亡的过程 Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。

我们称这些函数为钩子函数 常用的 钩子函数

before在实例初始化之后，数据观测和事件配置之前被调用，此时 data 和 methods 以及页面的 DOM 结构都没有初始化，什么都做不了
created在实例创建完成后被立即调用 此时 data 和 methods 已经可以使用，但是页面还没有渲染出来
beforeMount在挂载开始之前被调用，此时页面上还看不到真实数据，只是一个模板页面
mountedel 新创建的 wm.$el 替代，并挂载到实例上去之后，调用该钩子。数据已经真实选嚷道页面上，在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。页面上数据还是旧的
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy实例销毁之前调用
destroyed实力销毁后调用

数组变异方法​

在 Vue 中，直接修改对象属性值无法触发响应式：数据改变，页面内容不变

变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()往数组后面添加一个元素，成功返回当前数组的长度
pop()删除数组的后一个元素，成功返回删除元素的值
shift()删除数组的第一个元素，成功返回删除元素的值
unshift()往数组前面添加一个元素，成功返回当前数组的长度
splice()有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选）， 第三个是删除 后想要在原位置替换的值
sort()使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse将数组倒序，成功返回倒序后的数组

替换数组​

不改变原数组，返回新数组

filte创建一个新数据，新数组中的元是经过检查指定数组中符合条件的所有元素
concat连接两个或多个数组
slice从已有数组中返回选定元素

动态数组响应式数据​

  • Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来

  • a是要更改的数据 、 b是数据的第几项、 c是更改后的数据