week 8.3-8.9
- | Study-update |
---|---|
-Mon | 生日放假 |
-Tue | Vue学习 |
-Wes | Axios,计算属性 |
-Thu | 参与项目,分析项目 |
-Fri | 请求体.mybatis-plus学习 |
-Sat | mybatis-plus lambda |
- | Study-update |
8.3 Monday
安装vue
参考博客
8.5 Wednesday
vue中的mounted函数,钩子函数,一般用来做ajax请求取得初始化数据,在整个实例中只运行一次。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
[v-clock] {
display: none;
}
</style>
<body>
<div id="vue" v-clock>
<div>{{info.name}}</div>
<div>{{info.address}}</div>
<a v-bind:href="info.url">点我</a>
<a v-bind:href="info.links[0].url">B站</a>
</div>
<script>
var vm = new Vue({
el: '#vue',
//data()方法
data() {
return {
info: {
name: null,
address: {
street: null,
city: null,
country: null
},
links: null
},
}
},
mounted() {//钩子函数 mounted 在初始化后异步获取数据
axios.get('../test.json').then(response => (this.info = response.data));
}
})
</script>
</body>
</html>
计算属性
把计算结果缓存起来,节省系统开销
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<p>当前时间:{{currentTime1()}}</p>
<p>当前时间:{{currentTime2}}</p>
</div>
<script>
'use strict';
var app1 = new Vue({
el: '#app1',
data: {
message: 'hi',
},
methods: {
currentTime1: function () {
return Date.now();//返回一个时间戳
}
},
computed: {
currentTime2: function () {//属性调用 计算属性,最后调用方式是用属性 把计算结果缓存起来。
return Date.now();
}
}
})
</script>
</body>
</html>
监听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
千米:<input type="text" v-model="km">
米: <input type="text" v-model="m">
<p>{{km}}</p>
<p>{{m}}</p>
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
km: '0',
m: '0',
message: null
},
watch: {
km: function (val) {//var为改变后的值
this.m = val * 1000;
},
m: function (val) {
this.km = val / 1000;
}
}
});
app.$watch('km', function (newValue, oldValue) {//第一个参数为修改后参数,第二个参数为修改前参数
this.message = '修改前值为:' + oldValue + '千米,修改后值为:' + newValue + '千米。';
})
</script>
</body>
</html>