手挽手带你学VUE：三档 VUE构造期内常用属性

wslongchen 发布于2019-08-02 14:02 / 1166人阅读

摘要：视频教程由于思否不支持视频外链视频请移步你能学到什么手挽手带你学入门三档构造器内部的各种属性的使用，，，，这四个属性，在工作中会经常用到。在构造器的外部我们也可以通过实例来调用方法。

视频教程 由于思否不支持视频外链视频请移步 http://www.henrongyi.top 你能学到什么

手挽手带你学VUE入门三档,VUE构造器内部的各种属性的使用，methods，computed，watch，filters这四个属性，在工作中会经常用到。还有很多混合属性例如mixin等，后期会有视频多带带介绍，我们现在先做到入门可以开发，不常用的用法后期会给大家补充，学完这一期，你已经可以开发一个小项目玩一下了。

methods选项

methods是我们VUE中的事件处理器，你可以把方法写在这里面，并且在构造器内部通过this.方法名调用，之前的学习中我们已经使用过这个方法，但是这里强调一下，千万不可以用箭头函数，毕竟这里我们的this是需要指向VUE实例的。在VUE构造器的外部我们也可以通过实例来调用方法。这里给大家举个例子。




    
    
    
    Document
    


    
        {{num}}

computed选项

还记得我们第一期讲的那个在差值表达式内写简单的JS表达式吗{{message.split("").reverse().join("")}}，
实际上这样处理数据是不优雅的，VUE为我们提供了computed这个选项来处理数据，我们称它为计算属性，当逻辑复杂的时候
我们就应当使用 computed计算属性了。




    
    
    
    Document
    


    
        Original message: "{{ message }}"
        Computed reversed message: "{{ reversedMessage }}"

这是一个计算属性的简单用例，实际上，计算属性内部存在get和set两个方法，我们称他为 getter和setter，这里我给大家上代码讲解。




    
    
    
    Document
    


    
        {{firstName}}
        {{lastName}}
        {{fullName}}

vm.fullName = "John Doe" 大家可以在外部直接修改fullName或者在控制台修改都可以触发fullName的set事件来修改 firstName和lastName

watch选项

Vue中我们想要盯着一个数据，在它发生变化的时候就要做什么事，这时候我们就要用到watch侦听器。
具体用法也是很简单的，我们先来一个浅监听。每次改变都会触发监听的function 它接受两个参数 当前的val和改变前的
oldval，我们可以根据这个做出判断




    
    
    
    Document
    


    
        {{Name}}
        {{ChangeName}}

filters选项

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示




    
    
    
    Document
    


    
        
            
                
                {{ message | capitalize }}

云服务器 GPU云服务器带你学c带你飞 vue实例属性 vue.js 属性 vue的计算属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53521.html

手挽手带你学VUE：三档 VUE构造期内常用属性

摘要：视频教程由于思否不支持视频外链视频请移步你能学到什么手挽手带你学入门三档构造器内部的各种属性的使用，，，，这四个属性，在工作中会经常用到。在构造器的外部我们也可以通过实例来调用方法。视频教程由于思否不支持视频外链视频请移步 http://www.henrongyi.top 你能学到什么手挽手带你学VUE入门三档,VUE构造器内部的各种属性的使用，methods，compute...

shengguo 2019-08-23 14:28 评论0 收藏0
手挽手带你学VUE：二档组件开发以及常用全局api

摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。视频教程由于思否不支持视频链接视频请移步 http://www.henrongyi.top 你能学到什么二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。...

fredshare 2019-08-02 14:02 评论0 收藏0
手挽手带你学VUE：二档组件开发以及常用全局api

摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。视频教程由于思否不支持视频链接视频请移步 http://www.henrongyi.top 你能学到什么二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。...

Pink 2019-08-23 14:28 评论0 收藏0
手挽手带你学React：三档 React-router4.x的使用

摘要：我们在内部来渲染不同的组件我们这里采用哈希路由的方式，鉴于的渲染机制，我们需要把值绑定进入内部。手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目什么是React-router React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 评论0 收藏0
手挽手带你学VUE：一档 VUE简介以及常用内部指令

摘要：这样，我们用写的就写好了。真的假的大家可以看到，这些在插值表达式内的表达式直接返回了运行完成的结果，值得一提的是，差值表达式内的规则和标签内的规则是类似的。视频教程由于思否不能插入视频，视频请大家移步，http://www.henrongyi.top 什么是VUE VUE是一套用于构建用户界面的渐进式框架,VUE并不是一个真正意义上的mvvm框架,它更倾向是一种数据驱动框架.所以我...

不知名网友 2019-08-02 13:59 评论0 收藏0