一、vue生命周期
vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。
这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。
beforeCreate(){ //组件实例刚刚创建，还未进行数据观测和事件配置
},
created(){ //实例已经创建完成，并且已经进行数据观测和事件配置
},
beforeMount(){//模板编译之前，还没挂载
},
mounted(){ //模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
},
beforeUpdate(){//组件更新之前
},
updated(){//组件更新之后
},
beforeDestroy(){//组件销毁之前
},
destroyed(){ //组件销毁之后
}
这几个钩子中，最常用的是created()与mounted()。
二、计算属性
计算属性也是用来存储数据，但具有以下几个特点：
- 数据可以进行逻辑处理操作
- 对计算属性中的数据进行监视
1、基本用法
<div id="app">
{{addZero}}
</div>
new Vue({
el: '#app',
data: {
num: 8
},
computed: {
//这是计算属性的get方法，用于取值
addZero() {
return this.num > 10 ? this.num : '0' + this.num;
}
}
})
这里的addZero和num一样，都是属性。不过addZero是依赖于num、进行计算后的值。一旦num的值发生变化，addZero的值也会随之变化。
<div id="app">
{{num}}----{{addZero}}
<br>
<button type="button" @click="change">点击改变num</button>
</div>
new Vue({
el: '#app',
data: {
num: 8
},
methods: {
change: () => {
this.num++;
}
},
computed: {
addZero:() => {
return this.num > 10 ? this.num : '0' + this.num;
}
}
})
一旦我们点击按钮改变num的值，那么因为计算属性实时监测依赖项，addZero也会跟着发生变化。
2、计算属性 vs 方法
将计算属性的get函数定义为一个方法也可以实现和计算属性类似的功能。那么二者之间有什么区别？
- 区别一：计算属性是基于它的依赖进行实时更新的，方法则是调用才更新
- 区别二：计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。操作一个没有依赖项的值也是如此。
官方文档给出了下面这个例子：
computed: {
now: function () {
return Date.now()
}
}
计算属性存在缓存，这里的now值不会发生变化。
3. get和set
计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。
<div id="app">
{{num}}----{{addZero}}
<br>
<button type="button" @click="change(5)">点击改变num</button>
</div>
new Vue({
el: '#app',
data: {
num: 8
},
methods: {
change(newNumber) {
this.addZero = newNumber;
}
},
computed: {
addZero: {
get() {
return this.num > 10 ? this.num : '0' + this.num;
},
set(newNum) {
this.num = newNum
}
}
}
})
我们再change方法中改变addZero属性的值的时候会自动调用它的set方法。
三、实例属性和方法
vue中给实例和属性提供了若干属性和方法。
1、属性
获取属性的语法：实例名.属性名
以下是常用的属性：
- vm.$el: 获取vue实例关联的元素DOM，进而可以对其进行操作
- vm.$data: 获取数据对象data
- vm.$options：获取选项，自定义的选项也可以在这里获取。
- vm.$refs：获取所有添加ref属性的元素dom对象，进而可以对其进行操作
2、方法
vm.$mount()
手动挂载vue实例
var vm=new Vue({
data:{
msg:'Hello vue.js'
}
}).$mount('#app');
vm.$destroy()
销毁实例
vm.$destroy(); //销毁实例所占的内存空间
vm.$nextTick(callback)
在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM
var vm=new Vue({
data:{
msg:'Hello vue.js'
}
}).$mount('#app');
//修改数据
vm.msg='foo';
console.log(vm.$refs.title.textContent); //Hello vue.js
vm.$nextTick(function(){
console.log(vm.$refs.title.textContent); //foo
});
DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！使用$nextTick方法等DOM更新完再获取数据。
vm.$set(target,key,value)
通过vue实例的$set方法为对象添加属性，可以实时监视。
<div id="app">
{{user.name}}<br> {{user.age}}
<br>
<button type="button" @click="addAge">添加属性</button>
</div>
var vm = new Vue({
data: {
msg: 'Hello vue.js',
user: {
name: 'hedawei',
gender: 'man'
}
},
methods: {
addAge() {
/* this.user.age = 22; */
this.$set(this.user, 'age', 22);
}
}
}).$mount('#app');
方法中使用原始的添加属性方法的话不会在模板中显示。使用$set方法会实时监控数据，然后添加。
vm.$watch(监听的属性，callback)
监控vue实例的变化
vm.$watch('msg', (newValue, oldValue) => {
console.log('msg被修改啦，原值：' + oldValue + '，新值：' + newValue);
});
如果需要监控深度数据变化（例如监控一个对象中的某个属性），则需要在选项中添加{deep:true}
四、自定义指令
自定义指令分为自定义全局指令和自定义局部指令。
1、自定义全局指令
使用全局方法Vue.directive(指令ID,定义对象)。注：使用指令时必须在指名名称前加前缀v-，即v-指令名称。
简单示例：
Vue.directive('hello',{
bind(){ //常用！！
alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
},
inserted(){
alert('被绑定元素插入到DOM中时调用');
},
update(){
alert('被绑定元素所在模板更新时调用');
},
componentUpdated(){
alert('被绑定元素所在模板完成一次更新周期时调用');
},
unbind(){
alert('指令与元素解绑时调用，只调用一次');
}
});
这里定义了一个名为hello的指令，指令定义函数提供了几个钩子函数，分别在不同的时期生效。我们像下面这样使用这个指令:
<p v-hello>hello vue.js</p>
大多数情况下，我们只需要使用bind与update钩子函数。vue里提供了函数的简写形式：
Vue.directive('hello', function () {
alert("hello vue.js");
})
钩子函数有两个常用的参数el和binding。el是绑定的DOM对象，binding是一个对象，包含若干属性。
拿到DOM对象，我们就可以对DOM进行一些操作。
<p v-hello="msg">hello vue.js</p>
Vue.directive('hello', function (el,binding) {
el.style.color = "red";
//属性name是指令的名字（不带v-）
console.log(binding.name); //hello
//属性value是传递给指令的值
console.log(binding.value); //alice
//属性expression是指令值的字符串形式（个人感觉就是类似变量名）
console.log(binding.expression); //msg
//属性arg是传递给指令的参数(和传值写在一起容易令初学者困惑，下面分开写
//合在一起写的写法是<p v-hello:123="msg">hello vue.js</p>)
//<p v-hello:123>hello vue.js</p>
console.log(binding.arg); //123
//属性modifiers是一个包含修饰符的对象。
//与传参传值合在一起的写法是 <p v-hello:123.bar="msg">hedawei</p>
//<p v-hello.bar>hello vue.js</p>
console.log(binding.modifiers); //{bar:true}
})
var vm = new Vue({
el: '#app',
data: {
msg: 'alice'
}
})
2、局部自定义指令
局部自定义指令写在实例的directives选项中。
var vm = new Vue({
el: '#app',
data: {
msg: 'alice'
},
methods: {
},
directives: {
word: function(el, binding) {
console.log(binding.name);
}
}
})
其他用法与全局自定义指令一致。
五、过度（动画）
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画：transition、animation属性。
1、基本用法
使用transition组件，将要执行动画的元素包含在该组件内：
<transition name="fade">
运动的元素
</transition>
我们需要为其定义一个name属性，以便后面为其添加css样式。
动画有6个CSS类名，下面结合例子说明：
<style>
button {
display: block;
margin: 20px auto;
}
p {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
.fade-enter-active,
.fade-leave-active { //定义整个过渡期间的效果
transition: all 2s ease;
}
.fade-enter-to { //定义过渡进入的最终效果
opacity: 1;
width: 100px;
height: 100px;
}
.fade-leave-to { //定义过渡离开的最终效果
opacity: 0;
width: 50px;
height: 50px;
}
.fade-enter { //定义过渡进入的开始效果
opacity: 0;
width: 50px;
height: 50px;
}
</style>
<div id="app">
<button type="button" @click="flag = !flag">点 击</button>
<transition name="fade">
<p v-show="flag">
</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
flag: false
}
});
</script>
2、钩子函数
vue中给过渡的不同时期提供了不同的钩子函数。
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
<p v-show="flag">
</p>
</transition>
new Vue({
...
methods: {
beforeEnter(el) {
alert('动画进入之前');
},
enter(el) {
alert('动画进入');
},
afterEnter(el) {
alert('动画进入之后');
},
beforeLeave(el) {
alert('动画离开之前');
},
leave(el) {
alert('动画离开');
},
afterLeave(el) {
alert('动画离开之后');
}
}
});
在这不同的时期，我们可以取到过渡元素的DOM对象，从而对其进行操作。
3、多元素过渡
上面的<transition></transition>标签只适用于单元素过渡。若要对多元素进行过渡，则需要使用<transition-group></transition-group>标签，并且绑定key属性，设置不同的值。
<button type="button" @click="flag = !flag">点 击</button>
<transition-group name="fade">
<p v-show="flag" :key="1">
</p>
<p v-show="flag" :key="2">
</p>
</transition-group>
4、结合第三方库一起使用（animate.css）
我们可以使用vue的自定义过渡类名结合第三方动画库实现自定义动画效果。这六个自定义类名和vue内置的类名类似:
- enter-class
- enter-active-class
- enter-to-class
- leave-class
- leave-active-class
- leave-to-class
示例：
p {
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
}
<div id="app">
<button type="button" @click="flag = !flag">点 击</button>
<transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
<p v-show="flag">
</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
flag: false
}
});
</script>
未完待续。。。