zoukankan      html  css  js  c++  java
  • 3、Vue实例的属性

    1、获取Vue实例的属性

       

     

    2、data属性

    每个Vue实例都会代理其data对象里所有的属性。如果实例创建之后添加或者更改属性,他不会触发视图更新。

    这句话说了下面两件事情

    1、每个Vue实例都会代理其data对象里所有的属性

     

     

    我们可以看出,app这个vue实例已经代理了他里面data对象里的属性

    2、如果实例创建之后添加或者更改属性,他不会触发视图更新。

     

     

    大家注意看,我们在vue实例外面修改的username有效,在vue实例里面ready里面修改的username无效。

    ready方法里面修改username无效,已经说明了这句话如果实例创建之后添加或者更改属性,他不会触发视图更新。

    但是为什么在vue实例外面修改的username就有效了呢?这是因为JS异步执行的问题,大家看,我们new Vue对象的时候,这个过程是需要时间的,为了不造成页面卡顿,创建vue对象时是异步执行的,所以会出现 正在创建vue对象时,后面的app.username="我是猪";也在执行,所以就把值改掉了。

    也就是说,在vue实例创建之前,我们都可以在data中创建或修改属性值,但是一旦vue实例创建完成,创建和修改都不允许被操作。

     

     

    3、计算属性(computed

    计算属性就是在模板中调用函数输出结果。

     

     

     

          

    4、方法属性(methods

     

    4.1. 计算属性和方法调用的使用对比

     

    5、观察属性(watch

    1、Vue提供watch属性来观察和响应实例上的数据变动(即监控模型层数据是否变化,如果变化,就掉回调函数)

    2、Watch属性的回调函数没有返回值,回调函数可以执行一些复杂任务,比如绘制图形等

    3、Watch属性没有返回值,所以不适合在表达式中使用

     

     

          案例学习:画一个圆

     

    效果:

     

     

    6、过滤器属性(filter

          Vue.js允许自定义过滤器,用作一些常见的文本格式化。过滤器可以用在两个地方:插值和v-bind指令。

          Vue1.0含有一些过滤器,但是在vue2.0中,所有自带的过滤器都被废止了。因此说,需要用户自定义过滤器。

     

         过滤器可以串联。

     

    7、自定义组件属性(components

     

     

  • 相关阅读:
    现代软件工程 第一章 概论 第3题——韩婧
    现代软件工程 第一章 概论 第2题——韩婧
    小组成员邓琨、白文俊、张星星、韩婧
    UVa 10892 LCM的个数 (GCD和LCM 质因数分解)
    UVa 10780 幂和阶乘 求n!中某个因子的个数
    UVa 11859 除法游戏(Nim游戏,质因子)
    Codeforces 703C Chris and Road 二分、思考
    Codeforces 703D Mishka and Interesting sum 树状数组
    hdu 5795 A Simple Nim SG函数(多校)
    hdu 5793 A Boring Question 推公式(多校)
  • 原文地址:https://www.cnblogs.com/schangxiang/p/11364434.html
Copyright © 2011-2022 走看看