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

     

     

  • 相关阅读:
    关于hibernate的实体类中有集合类型转化成JSON的工具类
    关于hibernate的实体类中有集合类型转化成JSON的工具类
    浏览器九宫格的简单实现
    小米1S MIUI V5刷回V4教程
    新婚常用祝贺词
    【转】spring3 MVC实战,手工搭建Spring3项目demo
    Java8的日期时间处理
    穷达自有天命 无事多读好书
    [oracle/sql]求员工表中每个部门里薪水最高的员工,那种sql最优?
    [Java]取得当前代码所在函数的函数名
  • 原文地址:https://www.cnblogs.com/schangxiang/p/11364434.html
Copyright © 2011-2022 走看看