(一) 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">
</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 原样输出
- v-once 执行一次
- v-on:click.once="" (点击)事件只执行一次
//www.greatytc.com/p/d0a4cfd1256c
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 // 改变颜色
