vue音乐播放器学习笔记(4) - ( vue的生命周期 ) + ( v-if 和 v-show的区别 ) + ( better-scroll下拉刷新,上拉加载 ) + ( Vue.set() 和 vm.$set ) + ( v-pre 和 v-once ) + ( font-awesone )

(一) vue的生命周期

https://segmentfault.com/a/1190000008010666

(1) beforeCreate

  • 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。组件属性未被初始化,即实例中的data,el为undefined
  • beforeCreate在官方文档描述中说,在做一些数据监视和事件初始化,这里有一个容易让人走偏的地方,就是事件初始化,其实就是为vue对象添加一些属性,就是methods中的一些函数全部作为vue对象的属性存在,Vue会讲所有的data数据和methods中的函数添加到创建的vue对象上面。

(2) created

  • 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  • created 这个方法表示,vue对象已经创建成功,这里要搞清楚vue对象并不是我们所说的虚拟dom,vue对象就是一个js对象,他内部只是对数据进行操作,通过对数据的操作进而影响到虚拟dom的构建,所以在这个方法中我们可以做一些数据初始化工作,最常见的就是发送ajax请求来对已经构建完毕的vue对象的静态属性进行一些初始化。

(3) beforeMount

  • beforeMount:模板编译/挂载之前,在挂载开始之前被调用。进行模板编译,但是,模板内容还未插入页面DOM中。
  • 这个过程就是根据编译以后产生的虚拟dom结构来构造一个真实的dom结构,再说一遍,这两个dom有很大的区别,前者只表示数据结构,后者可以直接添加到html文档结构中来渲染一个效果。在这个期间,我们就可以操作真实的dom对象了,包括我们为某一个特定的dom节点绑定事件,标签属性,内容的操作等,例如使用select2来修饰select,但是并不推荐在这里进行一些事件绑定或者dom操作,因为在这期间,Vue还要做一件非常重要的事情就是通过Vue自己的方式来标识每一个真实的dom节点,我们在vue里一般都是通过$els或者$refs来操作对应的dom元素,但是这期间正是标注所有元素的过程,很有可能会出一些意想不到的错误。

(4) mounted

  • mounted:模板编译/挂载之后,el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。( 将生成好的的模板挂载在DOM树上,并且,组件属性this.$el被赋值。)
  • mounted:见名知意,挂载,表示真实dom已经构造完毕,我们可以append到父容器当中来构造页面了,在这里我们就可以完成一些对于真实dom的操作,不论是直接访问dom的属性内容或者事件的绑定,都可以在这里放心大胆的做了,一般情况下我们不需要直接操作dom,Vue也不推荐这么做,但是这里你需要知道的事如果你有这种需求,完全可以在这里完成,挂载的过程就是将生成的真实DOM对象append到挂载点下面,就是appendChild的过程,这个时候的虚拟dom结构跟生成出来的real dom结构一模一样,我们以后要操作的就是这个虚拟dom结构,就是前面根据模版生成出来的dom数据结构。

(5) beforeUpdate

  • beforeUpdate: 组件更新之前,
  • beforeUpdate:这个方法在整个生命周期之中也只被调用一次,在做什么呢,想一想上面所做的事情,上面是根据模版构造出来一个真实的dom对象,到现在他并没有跟我们的vue实例对象扯上关系,怎么通过我们的vue实例来影响到真实的dom对象呢,怎么把我们的数据绑定的真实dom当中了,以后我们只需要操作数据就可以影响到dom结构的渲染呢?在这个方法里,Vue同样依据前面的规则根据vue实例提供的数据在模版中的位置来重新生成一个虚拟dom数据结构,没错,你没看错,我们要生成两个虚拟dom,前一个dom只是dom结构,并没有绑定我们vue的属性数据,这一个dom是绑定了我们vue实例数据的dom结构,在这个dom生成的过程中,vue根据自己的语法规则,对比如指令,表达式之类的东西进行替换,生成一个新的虚拟dom结构,接下来我们要做什么,就是进行比较两个虚拟dom之间存在的差异。

(5) updated

  • updated: 组件更新之后,
  • update:这个方法在我们整个生命周期之内会反复调用,你会发现,每一次对vue对象的变更都会触发update方法,他做了什么呢,他就是在反复的生成一个virtual dom,生成的新dom不断跟之前的dom结构进行比对。

(6) activated

  • keep-alive 组件激活时调用。
  • 使用场景:比如切换时,保持input框获得焦点
  • activated是激活的意思
  • 该钩子在服务器端渲染期间不被调用。

   <input type="text" v-model="showInputNotDirective" ref="input2">

   activated() {
      this.$refs.input2.focus()
    }

(7) deactivated

  • keep-alive 组件停用时调用。
  • 该钩子在服务器端渲染期间不被调用。

(6) beforeDestroy

  • beforeDestroy: 组件/实例销毁前被调用,在这一步,实例仍然完全可用。( 可以做一个确认停止事件的确认框,销毁组件 )

(7) destoryed

  • destoryed: 组件/实例销毁完毕。这时,组件上的watcher,子组件和事件监听都会被销毁。

实用的钩子:


Created:vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里);

beforeCreate:给个loading界面 created撤销loading;

beforeDestory:你确认删除XX吗?

mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情

destoryed:当前组件已被删除,清空相关内容

图解

(二) v-if 和 v-show

结论:如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if较好。

  • v-if的初始化较快,但切换代价高;

  • v-show初始化慢,但切换成本低。

  • v-if 是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

  • v-show 条件性显示或隐藏,
    v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS属性 display
    v-show 不支持 template

(三) better-scroll实现下拉刷新,上拉加载

https://juejin.im/post/59b777015188257e764c716f

下拉刷新 :

pullDownRefresh 配置项,监听 pullingDown 事件,刷新数据。并在刷新数据完成之后,调用 finishPullDown() 方法,回弹到顶部边界

(1) pullDownRefresh ( 选项 )

  • threshold: 50, // 当下拉到超过顶部 50px 时,触发 ( pullingDown ) 事件
  • stop: 20 // 刷新数据的过程中,回弹停留在距离顶部还有 20px 的位置

类型:Boolean | Object
默认值:false
作用:这个配置用于做下拉刷新功能,默认为 false。
当设置为 true 或者是一个 Object 的时候,可以开启下拉刷新,
可以配置顶部下拉的距离(threshold) 来决定刷新时机
以及回弹停留的距离(stop)

(2) pullingDown ( 事件 )

参数:无
( 触发时机 ):在一次下拉刷新的动作后,这个时机一般用来去后端请求数据。

(3) finishPullDown() ( 方法 )

参数:无
返回值:无
( 作用 ):当下拉刷新数据加载完毕后,需要调用此方法告诉 better-scroll 数据已加载。


options.pullDownRefresh = {
  threshold: 50, // 当下拉到超过顶部 50px 时,触发 pullingDown 事件
  stop: 20 // 刷新数据的过程中,回弹停留在距离顶部还有 20px 的位置
}

this.scroll = new BScroll(this.$refs.wrapper, options)


this.scroll.on('pullingDown', () => {
  // 刷新数据的过程中,回弹停留在距离顶部还有20px的位置
  RefreshData()
    .then((newData) => {
      this.data = newData
      // 在刷新数据完成之后,调用 finishPullDown 方法,回弹到顶部
      this.scroll.finishPullDown()
  })
})

上拉加载

(1) pullUpLoad ( 选项 )

  • threshold: -20 // 在上拉到超过底部 20px 时,触发 ( pullingUp ) 事件

类型:Boolean | Object
默认值:false
作用:这个配置用于做上拉加载功能,默认为 false。当设置为 true 或者是一个 Object 的时候,可以开启上拉加载,可以配置离底部距离阈值(threshold)来决定开始加载的时机。

(2) pullingDown ( 事件 )

参数:无
( 触发时机 ):在一次上拉加载的动作后,这个时机一般用来去后端请求数据。


<template>
  <div class="rank" ref="rank">
    <div class="scrollWrapper" ref="scrollWrapper">
      <ul class="ul">
        <li v-for="item in getData" class="li">
          <div class="dataItem">
            <div class="left">
              ![](item.share_url)
            </div>
            <div class="right">{{item.abs}}</div>
          </div>
        </li>
      </ul>
    </div>
    <Loading v-if="showTime" class="Loading"></Loading>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import Loading from 'base/loading/loading.vue'
  import png from './1.png'

  export default {
    data() {
      return {
        getData: [
          {
            share_url: png,
            abs: 'data自己的数据'
          }
        ],
        showTime: false
      }
    },
    created() {
      this._initScroll()
    },
    methods: {
      _initScroll() {
        this.$http.get('http://image.baidu.com/channel/listjson?pn=15&rn=3&tag1=%E7%BE%8E%E5%A5%B3&tag2=%E5%85%A8%E9%83%A8&ie=utf8')
          .then((response) => {
            this.getData = response.data.data.concat(this.getData)
            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.scrollWrapper, {
                  pullDownRefresh: {
                    threshold: 50, // 当下拉到超过顶部 50px 时,触发 pullingDown 事件
                    stop: 20 // 刷新数据的过程中,回弹停留在距离顶部还有 20px 的位置
                  },
                  pullUpLoad: {
                    threshold: -20 // 在上拉到超过底部 20px 时,触发 pullingUp 事件
                  }
                })
                this.scroll.on('pullingDown', () => {
                  // 刷新数据的过程中,回弹停留在距离顶部还有20px的位置
                  // 在刷新数据完成之后,调用 finishPullDown 方法,回弹到顶部
                  this.showTime = true
                  setTimeout(() => {
                    this._initScroll()
                  }, 2000)
                  this.scroll.finishPullDown()
                  this.showTime = false
                  this.scroll.refresh()
                })
                this.scroll.on('pullingUp', () => {
                  // 请求数据
                })
              } else {
                this.scroll.refresh()
              }
            })
          })
      }
    },
    components: {
      Loading
    }
  }
</script>



(四) Vue.set 和 this.$set



   selectProducted: function(loop){      // loop是从dom中传过来的数据
                if(typeof loop.checked == "undefined"){

                    // Vue.set(loop,'checked',true);   

                                         //向loop变量里面注册了checked属性,值是true;(vue全局注册);

                    this.$set(loop,'checked',true);  

                                        //向loop变量里面注册checked属性,值是true;(vue局部注册)

                }else{
                    loop.checked = !loop.checked;
                }
                this.calculateTotalPrice();
            },

--------------------------------------------------------------

<li v-for="(loop,index) in list">
  <div class="cart-item-check">
      <a href="javascipt:;" 
           class="item-check-btn " 
           v-bind:class="{'check':loop.checked}" 
           @click="selectProducted(loop)>
      </a>
  </div>      
</li> 

                        

(五) v-pre 和 v-once 和 ( v-on:click.once="" )

v-pre


<div class="right" v-pre>{{item.abs}}</div>
输出结果: {{item.abs}}   

---------------------------------------------

v-once


 <div v-on:click="add" class="add">+</div>
    <div v-once>{{number}}</div>     // 只执行一次,输出1
    <div>{{number}}</div>  // 一直累加

     add() {
        this.number += 1
      },
-----------------------------------------------

v-on:click.once=""


 <div v-on:click.once="add" class="add">+</div>


(六) font-awesome字体图标

  • 安装

npm install font-awesome --save

  • main.js 中引入
在main.js中

import 'font-awesome/css/font-awesome.css'

  • 使用

<i class="fa fa-battery-full" aria-hidden="true"></i>

.fa-battery-full
     font-size:100px    // 改变大小
     color:red   // 改变颜色

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容