vue.js学习系列-第二篇

雨点打透心脏的1/2处 2022-01-09 05:57 205阅读 0赞

一 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