一 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
  增减对象属性
  只能重新定义对象引用了

vue.js学习系列-第二篇的更多相关文章

  1. vue.js学习系列-第一篇

    VUE系列一 简介    vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...

  2. vue.js学习系列-第一篇(代码)

    <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ...

  3. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

  5. js学习笔记第二篇

    Js笔记整理 1.StringAPI a)        大小写转换:str.toUpperCase();str.toLowerCase(); b)        获取指定位置字符: Str[i]-- ...

  6. OpenStack学习系列-----第二篇 由一个错误看理解整个架构的重要性

    看了openstack没几天,然后就开始试着用Java调用所有的API,第一步得到Credentials的时候成功了,然后第二步,传参数使所有的server信息都列出来的时候报错404.具体描述如下( ...

  7. 深入理解javascript函数系列第二篇——函数参数

    × 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...

  8. 学习KnockOut第二篇之Counter

                                                                        学习KnockOut第二篇之Counter        欲看此 ...

  9. Caffe学习系列——工具篇:神经网络模型结构可视化

    Caffe学习系列——工具篇:神经网络模型结构可视化 在Caffe中,目前有两种可视化prototxt格式网络结构的方法: 使用Netscope在线可视化 使用Caffe提供的draw_net.py ...

随机推荐

  1. Vue 2.6版本基础知识概要(一)

    挂载组件 //将 App组件挂载到div#app节点里 new Vue({ render: h => h(App), }).$mount('#app') VueComponent.$mount ...

  2. keepalived的主从备份服务器

    一.环境说明 1.操作系统内核版本:linux 6.0 2.Keepalived软件版本:keepalived-1.1.20.tar.gz 二.环境配置 1.主Keepalived服务器IP地址 19 ...

  3. Neutron Vlan Network 学习

    vlan network 是带 tag 的网络,是实际应用最广泛的网络类型.    下图是 vlan100 网络的示例.   1. 三个 instance 通过 TAP 设备连接到名为 brqXXXX ...

  4. [Alpha阶段]无人转会申请

    Alpha阶段无人转会申请 大家好,我们是Water_T团队.我们团队在Alpha阶段较好完成了预期目标,团队成员合作愉快,氛围良好,配合默契,且完成的产品在alpha阶段中是用户可互动.可使用的功能 ...

  5. 【学亮编程手记】Spring Cloud三大组件Eureka/Feign/Histrix的原理及使用

  6. https 自签名SSL证书

    介绍 TLS或称传输层安全性,及其前身SSL(代表安全套接字层)是用于将正常流量包装在受保护的加密包装中的Web协议. 使用这种技术,服务器可以在服务器和客户端之间安全地发送流量,而不会被外部各方拦截 ...

  7. BZOJ1112[POI2008]砖块Klo——非旋转treap

    题目描述 N柱砖,希望有连续K柱的高度是一样的. 你可以选择以下两个动作 1:从某柱砖的顶端拿一块砖出来,丢掉不要了. 2:从仓库中拿出一块砖,放到另一柱.仓库无限大. 现在希望用最小次数的动作完成任 ...

  8. js的一些点

    1 闭包 闭包就是说,能够读取其他函数内部变量的函数. 其实这句话我不是很明白,因为我觉得闭包的作用是: 延迟函数执行 模拟私有变量 根据第二点的描述,应该是阻止其他东西访问自身私有成员,到了这怎么变 ...

  9. How to Change Error Message Colors in Windows 10 PowerShell Console

    While this was a really easy way to change some of the settings, what if you want to do more extensi ...

  10. x86汇编语言实践(3)

    0 写在前面 为了更深入的了解程序的实现原理,近期我学习了IBM-PC相关原理,并手工编写了一些x86汇编程序. 在2017年的计算机组成原理中,曾对MIPS体系结构及其汇编语言有过一定的了解,考虑到 ...