计算属性中的get和set
在vue的计算属性中,所定义的都是属性,可以直接调用
正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法
computed:{
fullNname:{
set:function(newValue){
console.log(newValue)
}
get:function(){
console.log(this.name)
}
}
}
而绝大多数情况下,计算属性没有set方法,是一个只读属性
此时计算属性可以简写
computed:{
fullName:function(){
console.log(this.name)
}
}
生命周期钩子
生命周期图示
涉及钩子函数的有:
最最完整的关于生命周期的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
![屏幕快照 2018-07-28 下午1.55.40.png](https://upload-images.jianshu.io/upload_images/13263206-520675dfb8c9fc03.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</script>
</html>
vue-resource
vue.js的一个插件
作用 : 就是发送网络请求
和jQuery相比 功能更加纯粹(只做一件事)
发送请求 是通过向vue的实例化对象里面添加$http属性 调用get方法
可以发送get请求 post请求 还可以请跨域资源
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
const app = new Vue({
el: "#app",
data: {
weatherList: []
},
methods: {
search() {
// GET /someUrl
this.$http.get('http://wthrcdn.etouch.cn/weather_mini?city=武汉').then(
response => {
// get body data
console.log(response);
this.weatherList = response.body.data.forecast;
}, error => {
// error callback
console.log(error);
});
}
},
})
</script>
vue里的单个元素动画
1.如果元素切换需要动画 需要切换的元素必须用transition标签包裹
2.transition标签里面必须有name属性 和样式进行关联
3.动画的类名 Vue一斤封装好了 会动态的添加和删除 不需要手动操作
4.如果需要其他的动画 去调整css样式
<div id="app">
<input type="button" @click="isShow = !isShow" value="切换">
</input>
<transition name="fade" @after-enter="afterEnter" @after-leave="afterLeave">
<img src="./imgs/1.jpg" v-show="isShow" alt="">
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
vue动画豆子 回调函数
让开发人员在动画播放的特定时期执行自定义逻辑
after-enter
after-learve
这些钩子绑定的元素是 transition标签
函数定义有一个形参 是操作的dom元素
动画钩子是vue里面定义好的 我们不能随便修改
*/
const app = new Vue({
el: "#app",
data: { isShow: true },
methods: {
afterEnter(el) {
console.log(el);
console.log("afterEnter");
el.src = "./imgs/2.jpg"
},
afterLeave(el) {
console.log(el);
console.log("afterLeave");
}
},
})
</script>
vue里的列表动画(transition-group)
注意点:
1.他的子元素里面必须要有key属性
2.key必须具有唯一性 而且 里面只能设置字符串或者数字
3.transition-group会自动生成包裹的标签 如果不写 默认生成span标签
4.列表动画也支持vue的动画钩子
<div id="app">
<input type="button" value="点我添加" @click="add">
<transition-group name="list" tag="ul" @after-enter="afterEnter">
<li v-for="(item,index) in numList" :key="index">
{{item}} </li>
</transition-group>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
numList: []
},
methods: {
add() {
this.numList.push(Math.floor(Math.random() * 100))
},
afterEnter(el) {
console.log(el);
}
},
})
</script>
axios的基本使用
最初的样子
<script>
const app = new Vue({
el: "#app",
data: {
// 天气列表
weatherList: [],
// 查询的地点
query: "",
// 控制遮罩层显示隐藏
isShow: false
},
methods: {
search() {
this.isShow = true;
// 清空weatherList
this.weatherList = [];
this.$http.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.query}`).then(res => {
console.log(res);
// setTimeout(function() {
setTimeout(() => {
// 关闭遮罩层
this.isShow = false;
}, 1000)
// 获取数据
this.weatherList = res.body.data.forecast
}, err => {
console.log(err);
})
}
},
</script>
改成axios的样子
<div id="app">
<!-- <input type="button" value="查天气" @click="search"> -->
<!-- <input type="text" v-model="query"> -->
<p>{{weatherList}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
query: "武汉",
weatherList: []
},
// 遭页面加载完成之后 就直接获取数据
created() {
axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.query}`)
.then(response => {
// 处理请求成功之后的响应体
console.log(this);
console.log(response);
this.weatherList = response.data.data.forecast;
})
.catch(function (error) {
// handle error
console.log(error);
})
},
})
</script>