一 VUE实例生命周期钩子
     1 生命周期函数 
        定义 生命周期函数就是vue在某一时间点自动执行的函数

2 具体函数
      1 new vue()
      2 beforeCreate() 数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象
      3 created() 数据已经绑定到了对象实例,但是还没有挂载对象
      4 beforeMount() 模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的 $el属性
      5 mounted() 将$el的内容挂载到了el,相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom
      6 deforDestroy() 实例的销毁,vue实例还是存在的,只是解绑了事件的监听还有watcher对象数据与view的绑定,即数据驱动
      7 destroy()
      8 beforeUpdate() 当data数据改变时,会触发相关函数
      9 update()
二 VUE 计算精度特性
   1 计算属性调用
     1 Vue对象属性
       date:{xing:'a',ming:'b'},
       computed: { //计算属性,包裹计算方法
       fun: function(){
       return this.xing+ this.ming
       }
       调用
       <li>{{fun}}</li>
   2 VUE对象属性的get set方法
       computed: { //计算属性,包裹计算方法
       fun: {
       get: function(){
       return this.xing+ this.ming
        },
       set: function(value){
       value=""//这里是对值的二次处理,value本身是二次传递
        }
      }

3 总结
    1 我们通过computed属性进行数据组合处理,最后返回值,然后进行调用函数对象本身即可
    2 计算精度功能如果值没有发生改变就不会重新进行计算,如果发生改变会进行重新计算
    3 get set方法进行搭配使用
  4 另一种方法实现
    date:{xing:'a',ming:'b'},
    fun: function(){
    return this.xing+ this.ming
    }
   调用通过 {{fun()}} 也可以实现计算属性

三    VUE中的条件渲染
      v-if
      v-else-if
      v-else
   1 必须连在一起写,不能加任何其他标签
   2 里面内容为条件表达式
      比如 a==3 a(True/False)
   3 条件渲染会尽量复用已经存在的DOM
      如果想要避免 尽量加上key属性 key代表唯一性
   eg:
    <div v-if="show" id="app"> <input key="username">用户名</input> </div>
    <div v-else><input key="password">密码</input></div>
  四 VUE的列表渲染
   1 列表
      v-for属性
     1 列表本身包含下标叫做index
     2 不能通过操作列表下标的方式改变数组
     循环列表
     <div id="app"> <li v-for="item in list">{{item}}</li></div>
      <div id="app"> <li v-for="(item,index) of list">{{item}}{{index}}</li></div>
      改变列表
      1 重新定义数组对象 app1.list[]
      2 使用编译方法 app1.list.splice(index,位移,内容) eg:splice(1,1,'a')代表删除下标为1,并且用a代替,起到更新作用
     其他函数
     push 增加一列 pop 删除最后一列 sort排序 resverse反转
  2 对象
    v-for属性同样可以循环对象本身
   eg <div id="app"> <li v-for="(key,item,index) of duixiang"></div>
   改变对象
   app1.object.key=value
  增减对象属性
  只能重新定义对象引用了

转载于:https://www.cnblogs.com/danhuangpai/p/10729924.html

vue.js学习系列-第二篇相关推荐

  1. Vue.js学习系列七——Vue服务器渲染Nuxt学习

    我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...

  2. Vue.js学习系列(八)---使用路由搭建单页应用(一)

    2019独角兽企业重金招聘Python工程师标准>>> 之前已经通过命令 cnpm install vue-router --save 安装了vue-router.接下里我们在web ...

  3. Vue.js学习系列(四十二)-- Vue.js组件

    2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...

  4. Vue.js学习系列(三十四)-- Vue.js样式绑定(五)

    2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...

  5. Vue.js学习系列(二十七)-- 计算属性(一)

    2019独角兽企业重金招聘Python工程师标准>>> 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  6. Vue.js学习系列(二十八)-- 计算属性(二)

    2019独角兽企业重金招聘Python工程师标准>>> 2. computed 与 methods区别 我们可以使用 methods 来替代 computed,效果上两个都是一样的, ...

  7. Vue.js学习系列(九)---使用路由搭建单页应用(二)

    2019独角兽企业重金招聘Python工程师标准>>> 然后修改 main.js,引入并注册 vue-router import VueRouter from "vue-r ...

  8. Nest.js 实战系列第二篇-实现注册、扫码登陆、jwt认证等

    大厂技术  高级前端  Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 大家好我是考拉

  9. 焱老师带你学习MYSQL系列 第二篇 (MYSQL 数据结构)

    相关系列链接 焱老师带你学习MYSQL系列 第六篇 (MYSQL是如何实现锁的) 焱老师带你学习MYSQL系列 第五篇 (MYSQL事务隔离级别是如何实现的) 焱老师带你学习MYSQL系列 第四篇 ( ...

最新文章

  1. Be a person
  2. 物联网11种通信协议
  3. Linux centos6.7 关闭防火墙
  4. python出现的次数最多的元素_Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算...
  5. linux平台及windows平台mysql重启方法
  6. JLOI2016 方
  7. 用 C# 来守护 Python 进程
  8. C语言实现字符串匹配KMP算法
  9. Rsync(远程同步):Linux中Rsync命令的10个实际示例
  10. Android Studio 视图解析
  11. [Java][Android][Process] ProcessBuilder与Runtime区别
  12. 深度探索C++对象模型复习和学习 第三章 Data 语义学(The Semantics of Data )
  13. SAD算法的OpenCV实现
  14. matlab里的pid参数调节,pid调节的方法
  15. 《设计模式:可复用面向对象软件的基础》——引言(笔记)
  16. Java堆:Shallow Size和Retained Size
  17. 火狐浏览器打开后是搜狗浏览器_搜狗浏览器和Firefox浏览器哪个好
  18. 3乘3魔方第四步_3乘3魔方的解法都有哪些?(讲具体点,怎么具体呢?有公式步骤吧!)?...
  19. 有了AI,程序猿再也不用担心有Bug了
  20. 设计模式学习系列6 原型模式(prototype)

热门文章

  1. 人工智能治理需用好“人工”
  2. 不想被AI降维打击?美国“四院院士”写的DL科普书了解一下
  3. 「NLP」ALBERT:更轻更快的NLP预训练模型
  4. 研究表明:无人驾驶技术减少拥堵加快进程
  5. 图深度学习(GraphDL),下一个人工智能算法热点
  6. 深度学习和普通机器学习之间有何区别?
  7. 评阅百篇博士论文后我发现:博士生发SCI越多,通常科研能力越差!
  8. Gartner:解开关于人工智能的六个迷思
  9. GE数字化重塑的启示:调整阵型,再战工业互联网!
  10. 院士张钹:AI奇迹短期难再现 深度学习技术潜力已近天花板