vue函数

数据观察

看文档的对象分类

  • 全局配置
    • Vue.config.xxx
  • 全局API
    • Vue.xxxx
  • 选项(options)
    • new Vue(options)
    • export default options
  • 实例
    • 在组件内使用的this VueComponent对象
    • new Vue() Vue$3对象

生命周期钩子

用于发送ajax请求,或获取dom上的元素

  • beforeCreate 未完成数据观察,给组件数据赋值无效
  • (常用)created 已完成数据观察,发起请求获取动态数据,给data属性赋值
  • beforeMount 装载数据之前,此时DOM还未生成
  • (常用)mounted 装载数据之后,此时操作DOM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
export default {
data(){
return {
text:'text' // 2
}
},
beforeCreate:function(){ //完成数据观察之前
//操作不了组件数据,做一些相关配置性的东西
this.text = 'abc';// 1
console.log('beforeCreate');
},
created(){//已经完成了数据观察
// 发起请求获取后台数据,将数据进行初始化
this.text = 'created';// 3
console.log('created');
},
beforeMount(){ // 将this.text等属性,装载到DOM上,之前
console.log('beforeMount');
},
mounted(){
console.log('mounted');
}
}
</script>

触发多次(结合计算属性或者监视来完成就可以)

  • beforeUpdate 数据发生改变,更新DOM之前
  • updated 数据发生改变,更新DOM之后

路由钩子

用于判断离开当前路由和进入当前路由所做的事情

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
beforeRouteEnter (to, from, next) {
在渲染该组件的对应路由被 confirm 前调用
不!能!获取组件实例 `this`
因为当钩子执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
导航离开该组件的对应路由时调用
可以访问组件实例 `this`
next(vm=>{ //最终都是放行
// 通过vm访问实例
vm.title = title;
});
}

获取元素

  • 1:在dom元素上写上ref=”名称”
  • 2:获取元素 this.$refs.名称
1
2
3
4
5
6
<span ref="s"></span>
---------------------------
created(){ //完成数据观察,通过ajax对数据进行操作
console.log(this.$refs.s);
console.log('created11');
},

监视watch

  • 简单监视 针对 xxx=123; 改变了引用
  • options: watch:{ data中是属性:function(newV,oldV){} }
  • 深度监视 针对 xxx.xxx.xxx 改变了对象的属性的引用
  • options: watch:{ data中的属性:{ deep:true,handler:fn } }
  • 1:监视的属性是data中存在的属性
  • 2:对于要监视元素的属性改变,就使用深度监视
  • 3:其监视一个属性,就是一段监视代码,不能一次监视多个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{{persons}}
<button @click="change">改变人的数据</button>
-------------------------------------------------
export default {
data(){
return {
obj:{name:'jack'},
persons:[{name:'后羿'},{name:'芈月'}]
}
},
watch:{
obj:function(newV,oldV){
console.log('改变发生了');
console.log(newV,oldV);
},
//简单监视
// persons:function(newV,oldV){
// console.log('改变发生了');
// console.log(newV,oldV);
// }
// 深度监视
persons:{
deep:true,
handler:function(newV,oldV){
console.log('改变发生了');
console.log(newV,oldV);
}
}
},

计算属性(options->computed)

  • 监视的属性是data中存在的属性
  • computed:是一个对象 key:计算名称 value:计算的具体操作
  • 计算的具体操作: function 还具备返回值
  • 这个返回值还可以在页面中显示
  • 1:计算属性中,如果原值相同,会走缓存而不会触发函数调用
  • 2: 计算属性可以监视多个this.相关值的改变
  • 3: 计算属性可以返回多个参数,以对象的形式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div>
<input type="text" name="" v-model="n1"> +
<input type="text" name="" v-model="n2"> *
<input type="text" name="" v-model="rate">
结果 {{result.total}} 一共输入了几个数{{result.count}}
</div>
</template>
<script>
export default {
data(){
return {
n1:1,
n2:1,
rate:1,
}
},
computed:{
result:function(){;
console.log('触发了监视'); //当原值相同的时候,会走缓存
//this.xxx在这里使用过以后,就会产生监视
let sum = ((this.n1-0) + (this.n2-0) ) * this.rate;
//模拟计数3
let num = 3;
return {
total:sum,count:num
}
}
}
}
</script>

给vue添加的属性不做双向数据绑定

1
2
3
4
5
6
7
8
9
10
this.goodsList = res.data.message;
//给元素添加属性,是否选中,true ,商品数量,通过prods赋值
this.goodsList.forEach(ele => {
//非法操作,vue不做双向数据绑定(该对象不是响应式)
// ele.isChecked = true;
// ele.num = prods[ele.id]; //数量
//vue中直接添加属性,不能响应式的,需要特定的函数
this.$set(ele,'isChecked',true);
this.$set(ele,'num',prods[ele.id]);